only the image is rotated, not the whole div

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/29

multi/package.json

@@ -8,6 +8,6 @@
         "ws": "^7.4.4"
     },
     "scripts": {},
-    "author": "Pőcze Bence <bence@pocze.ch>",
+    "author": "Pőcze Bence and The MapGuesser Contributors <bence@pocze.ch>",
     "license": "GNU AGPL 3.0"
 }

public/static/css/game.css

@@ -157,6 +157,7 @@
 #navigation .navigationItem {
     margin-top: 10px;
     opacity: 70%;
+    cursor: pointer;
 }
 
 #navigation .navigationItem:hover {
@@ -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();
         },
 
@@ -358,7 +361,10 @@
             document.getElementById('panoCover').style.visibility = 'hidden';
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
-            document.getElementById('guess').classList.remove('result')
+            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.map.setOptions({
                 draggableCursor: 'crosshair'
@@ -380,12 +386,9 @@
 
             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)";
+            document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
         },
 
         handleErrorResponse: function (error) {
@@ -864,7 +867,7 @@
         Game.rewriteGoogleLink();
 
         const heading = Game.panorama.getPov().heading;
-        document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
+        document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
     });
 
     if (COOKIES_CONSENT) {

views/game.php

@@ -60,12 +60,12 @@
         </div>
     </div>
     <div id="navigation">
-        <div id="compass" class="navigationItem">
+        <div class="navigationItem">
             <span>
                 <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
             </span>
             <span>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
+                <img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
             </span>
         </div>
         <div id="returnToStart" class="navigationItem">

views/templates/layout_normal.php

@@ -29,6 +29,6 @@
 </main>
 <footer>
     <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
- --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
+ --><p>&copy; The MapGuesser Contributors <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
 </footer>
 @endsection