Made fullscreen button visible on mobile

Author: toji

css/q3demo.css

@@ -118,6 +118,12 @@ canvas {
 }
 
 #mobileVrBtn {
+    position: absolute;
+    bottom: 1em;
+    right: 4em;
+}
+
+#mobileFullscreenBtn {
     position: absolute;
     bottom: 1em;
     right: 1em;
@@ -161,4 +167,7 @@ canvas {
     #mobileVrBtn {
         display: none !important;
     }
+    #mobileFullscreenBtn {
+        display: none !important;
+    }
 }

index.html

@@ -45,6 +45,7 @@ <h2 id="mapTitle"></h2>
         </div>
 
         <img style="display: none;" src="images/vr_goggles_sm.png" id="mobileVrBtn"/>
+        <img src="images/fullscreen_sm.png" id="mobileFullscreenBtn"/>
 
         <div id="viewport-info" style="display: none;">
             <div id="controls">

js/main.js

@@ -769,10 +769,13 @@ function main() {
     }, false);
 
     // Fullscreen
-    var button = document.getElementById('fullscreenBtn');
-    button.addEventListener('click', function() {
+    function goFullscreen() {
         viewportFrame.requestFullScreen();
-    }, false);
+    }
+    var fullscreenButton = document.getElementById('fullscreenBtn');
+    var mobileFullscreenBtn = document.getElementById("mobileFullscreenBtn");
+    fullscreenButton.addEventListener('click', goFullscreen, false);
+    mobileFullscreenBtn.addEventListener('click', goFullscreen, false);
 
     // VR
     function goVrFullscreen() {
@@ -782,8 +785,8 @@ function main() {
     }
     var vrBtn = document.getElementById("vrBtn");
     var mobileVrBtn = document.getElementById("mobileVrBtn");
-    vrBtn.addEventListener("click", goVrFullscreen);
-    mobileVrBtn.addEventListener("click", goVrFullscreen);
+    vrBtn.addEventListener("click", goVrFullscreen, false);
+    mobileVrBtn.addEventListener("click", goVrFullscreen, false);
 
 }
 window.addEventListener("load", main); // Fire this once the page is loaded up