public/static/css/game.css

@@ -150,9 +150,39 @@
 }
 
 #navigation {
+    position: absolute;
     z-index: 2;
 }
 
+#navigation .navigationItem {
+    margin-top: 10px;
+    opacity: 70%;
+    cursor: pointer;
+}
+
+#navigation .navigationItem:hover {
+    opacity: 100%;
+}
+
+#navigation .navigationItem div {
+    position: absolute;
+}
+
+#navigation .circleBackground {
+    width: 100%;
+    height: 100%;
+    opacity: 50%;
+}
+
+#navigation .navigationIcon {
+    width: 75%;
+    height: 75%;
+    margin: auto;
+    margin-top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
@@ -179,6 +209,10 @@
     #navigation {
         bottom: 25px;
         left: 10px;
+        width: 45px;
+    }
+    #navigation .navigationItem {
+        height: 45px;
     }
 }
 
@@ -226,6 +260,10 @@
     #navigation {
         bottom: 50px;
         left: 20px;
+        width: 60px;
+    }
+    #navigation .navigationItem {
+        height: 60px;
     }
     @media screen and (max-height: 424px) {
         #guess {
@@ -244,6 +282,10 @@
         #navigation {
             bottom: 30px;
             left: 10px;
+            width: 45px;
+        }
+        #navigation .navigationItem {
+            height: 45px;
         }
     }
 }

public/static/css/map_editor.css

@@ -55,12 +55,6 @@
     visibility: hidden;
 }
 
-#overlayControl {
-    bottom: 20px;
-    right: 10px;
-    z-index: 3;
-}
-
 #deleteButton {
     display: none;
 }

public/static/css/mapguesser.css

@@ -443,43 +443,6 @@ div.box {
     box-sizing: border-box;
 }
 
-.circleControl {
-    position: absolute;
-    width: 60px;
-    bottom: 20px;
-    right: 10px;
-}
-
-.circleControl .controlItem {
-    height: 60px;
-    margin-top: 10px;
-    opacity: 70%;
-    cursor: pointer;
-}
-
-.circleControl .controlItem:hover {
-    opacity: 100%;
-}
-
-.circleControl .controlItem div {
-    position: absolute;
-}
-
-.circleControl .controlBackground {
-    width: 100%;
-    height: 100%;
-    opacity: 50%;
-}
-
-.circleControl .controlIcon {
-    width: 75%;
-    height: 75%;
-    margin: auto;
-    margin-top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-}
-
 @media screen and (max-width: 599px) {
     header h1 span {
         display: none;
@@ -506,12 +469,6 @@ div.box {
     div.box {
         width: initial;
     }
-    .circleControl {
-        width: 45px;
-    }
-    .circleControl .controlItem {
-        height: 45px;
-    }
 }
 
 @media screen and (min-width: 600px) {
@@ -541,12 +498,6 @@ div.box {
         padding-top: 10px;
         padding-bottom: 10px;
     }
-    .circleControl {
-        width: 45px;
-    }
-    .circleControl .controlItem {
-        height: 45px;
-    }
 }
 
 @media screen and (min-height: 400px) and (max-height: 499px) {

public/static/js/map_editor.js

@@ -403,7 +403,7 @@
 
             LMapWrapper.loadMarkers(places);
 
-            document.getElementById('streetViewCoverSelector').style.display = 'none';
+            document.getElementById('streetViewCoverSelector').disabled = true;
         },
 
         hide: function () {
@@ -536,7 +536,7 @@
 
             GMapWrapper.loadMarkers(places);
 
-            document.getElementById('streetViewCoverSelector').style.display = 'block'
+            document.getElementById('streetViewCoverSelector').disabled = false;
         },
 
         hide: function () {

views/admin/map_editor.php

@@ -18,6 +18,11 @@
                     <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
                 </button>
            </span><!--
+        --><span class="inline hideOnMobile" id="mapSelection">
+        <button id="streetViewCoverSelector">
+                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/street-view-cover.svg?rev=<?= REVISION ?>" alt="Street View Conver" />
+                </button>
+           </span><!--
         --><span class="inline hideOnMobile">
                <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
                <button id="jumpButton" disabled >Jump</button>
@@ -66,16 +71,6 @@
     <div id="map" class="map">
         <div id="lmap" class="map"></div>
         <div id="gmap" class="map"></div>
-        <div id="overlayControl" class="circleControl">
-            <div id="streetViewCoverSelector" class="controlItem" title="Toggle Street View Cover">
-                <div>
-                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
-                </div>
-                <div>
-                    <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/street-view-cover.svg?rev=<?= REVISION ?>" alt="Street View Cover" class="controlIcon" />
-                </div>
-            </div>
-        </div>
     </div>
     <div id="panorama"></div>
     <div id="noPano">

views/game.php

@@ -59,21 +59,21 @@
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
-    <div id="navigation" class="circleControl">
+    <div id="navigation">
-        <div id="compassContainer" class="controlItem">
+        <div id="compassContainer" class="navigationItem">
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
             </div>
             <div>
-                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="controlIcon" />
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
             </div>
         </div>
-        <div id="returnToStart" class="controlItem">
+        <div id="returnToStart" class="navigationItem">
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
             </div>
             <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="controlIcon" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
             </div>
         </div>
     </div>