Merge pull request #473 from AndreaGon/patch-19

Fix Issue #416

activities/Blockrain.activity/css/activity.css

@@ -11,6 +11,25 @@
   background-image: url(../assets/themeChanger.svg);
 }
 
+/*Add image to fullscreen/unfullscreen button*/
+#fullscreen-button {
+  background-image: url(../icons/view-fullscreen.svg);
+}
+
+#unfullscreen-button {
+  background-image: url(../icons/view-return.svg);
+  border: 0;
+  border-radius: 0px;
+  margin: 1px;
+  width: 45px;
+  height: 45px;
+  top: 0;
+  right: 8%;
+  position: absolute;
+  visibility: hidden;
+  z-index: 5;
+}
+
 .blockrain-game-holder {
   position: relative;
   padding: 0;
@@ -22,6 +41,7 @@
   overflow-x: auto;
 }
 
+
 @media only screen and (min-width: 500px) {
 
 	.blockrain-game-holder {
@@ -196,9 +216,16 @@
         left: 30vw;
     }
 }
+
+/*Adjusted unfullscreen button position so it won't overlap with the activity container*/
 @media only screen and (max-width: 500px) {
     #canvas {
         width: 100vw;
         height: 70vh;
     }
+    #unfullscreen-button
+    {
+      top: 70%;
+      right: 3%;
+    }
 }

activities/Blockrain.activity/index.html

@@ -28,6 +28,7 @@
   <button class="toolbutton" id="activity-button" title="My Activity"></button>
 	<button class="toolbutton" id="btn-next" title="Change theme"></button>
   <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>
+	<button class="toolbutton pull-right" id="fullscreen-button" title="Fullscreen"></button>
 </div>
 
 <button id="up-arrow" title="Up Arrow"></button>
@@ -43,6 +44,8 @@
   	document.getElementsByClassName("noarrowkeys")[0].className="arrowkeys";
   }
 </script>
+
+<button class="toolbutton pull-right" id="unfullscreen-button" title="Unfullscreen"></button>
 </body>
 
 </html>

activities/Blockrain.activity/js/activity.js

@@ -34,6 +34,21 @@ define(["sugar-web/activity/activity"], function (activity) {
 			},
 		});
 
+		// Switch to full screen when the full screen button is pressed
+		document.getElementById("fullscreen-button").addEventListener('click', function() {
+		  document.getElementById("main-toolbar").style.display = "none";
+		  document.getElementById("canvas").style.top = "0px";
+		  document.getElementById("unfullscreen-button").style.visibility = "visible";
+
+		});
+
+		//Return to normal size
+		document.getElementById("unfullscreen-button").addEventListener('click', function() {
+		  document.getElementById("main-toolbar").style.display = "block";
+		  document.getElementById("canvas").style.top = "55px";
+		  document.getElementById("unfullscreen-button").style.visibility = "hidden";
+		});
+
 		// Save high score in Journal on Stop
 		document.getElementById("stop-button").addEventListener('click', function (event) {
 			saveHighestScore();