Merge branch 'feature/return-to-starting-point-button' into feature/in-game-compass

public/static/css/game.css

@@ -157,13 +157,14 @@
 #navigation .navigationItem {
     margin-top: 10px;
     opacity: 70%;
+    cursor: pointer;
 }
 
 #navigation .navigationItem:hover {
     opacity: 100%;
 }
 
-#navigation span {
+#navigation div {
     position: absolute;
 }
 
@@ -188,9 +189,9 @@
     }
     #showGuessButtonContainer {
         position: absolute;
-        left: 60px;
+        left: 65px;
         bottom: 30px;
-        right: 60px;
+        right: 20px;
         z-index: 2;
     }
     #guess {

public/static/js/game.js

@@ -334,6 +334,9 @@
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result');
 
+            // needs to be set visible after the show guess map hid it in mobile view
+            document.getElementById("navigation").style.visibility = 'visible';
+
             Game.initialize();
         },
 
@@ -380,9 +383,6 @@
 
             Game.loadPano(Game.panoId, Game.pov);
 
-            // needs to be set visible after the show guess map hid it in mobile view
-            document.getElementById("navigation").style.visibility = 'visible';
-
             // update the compass
             const heading = Game.panorama.getPov().heading;
             document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";

views/game.php

@@ -69,12 +69,12 @@
             </span>
         </div>
         <div id="returnToStart" class="navigationItem">
-            <span>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
-            </span>
-            <span>
+            </div>
+            <div>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
-            </span>
+            </div>
         </div>
     </div>
 @endsection