Merge pull request 'feature/place-streetview-cover-to-the-map' (#35) from feature/place-streetview-cover-to-the-map into develop

Reviewed-on: https://gitea.e5tv.hu/esoko/mapguesser/pulls/35
2021-05-02 16:27:41 +02:00 · 2021-05-02 16:27:41 +02:00 · 398204c5d5
commit 398204c5d5
parent aaa5a1daba c112a25409
6 changed files with 75 additions and 57 deletions
--- a/public/static/css/game.css
+++ b/public/static/css/game.css
@ -150,39 +150,9 @@
 }

 #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;
@ -209,10 +179,6 @@
    #navigation {
        bottom: 25px;
        left: 10px;
-        width: 45px;
-    }
-    #navigation .navigationItem {
-        height: 45px;
    }
 }

@ -260,10 +226,6 @@
    #navigation {
        bottom: 50px;
        left: 20px;
-        width: 60px;
-    }
-    #navigation .navigationItem {
-        height: 60px;
    }
    @media screen and (max-height: 424px) {
        #guess {
@ -282,10 +244,6 @@
        #navigation {
            bottom: 30px;
            left: 10px;
-            width: 45px;
-        }
-        #navigation .navigationItem {
-            height: 45px;
        }
    }
 }
--- a/public/static/css/map_editor.css
+++ b/public/static/css/map_editor.css
@ -55,6 +55,12 @@
    visibility: hidden;
 }

+#overlayControl {
+    bottom: 20px;
+    right: 10px;
+    z-index: 3;
+}
+
 #deleteButton {
    display: none;
 }
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@ -443,6 +443,43 @@ 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;
@ -469,6 +506,12 @@ div.box {
    div.box {
        width: initial;
    }
+    .circleControl {
+        width: 45px;
+    }
+    .circleControl .controlItem {
+        height: 45px;
+    }
 }

@media screen and (min-width: 600px) {
@ -498,6 +541,12 @@ 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) {
--- a/public/static/js/map_editor.js
+++ b/public/static/js/map_editor.js
@ -403,7 +403,7 @@

            LMapWrapper.loadMarkers(places);

-            document.getElementById('streetViewCoverSelector').disabled = true;
+            document.getElementById('streetViewCoverSelector').style.display = 'none';
        },

        hide: function () {
@ -536,7 +536,7 @@

            GMapWrapper.loadMarkers(places);

-            document.getElementById('streetViewCoverSelector').disabled = false;
+            document.getElementById('streetViewCoverSelector').style.display = 'block'
        },

        hide: function () {
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@ -11,18 +11,13 @@

@extends(templates/layout_full)

-@section(subheader) 
+@section(subheader)
           <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
        --><span class="inline hideOnMobile" id="mapSelection">
                <button id="mapSelector">
                    <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>
@ -71,6 +66,16 @@
    <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">
--- a/views/game.php
+++ b/views/game.php
@ -59,21 +59,21 @@
            <button id="startNewGameButton" class="fullWidth">Play this map again</button>
        </div>
    </div>
-    <div id="navigation">
-        <div id="compassContainer" class="navigationItem">
+    <div id="navigation" class="circleControl">
+        <div id="compassContainer" class="controlItem">
            <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
            </div>
            <div>
-                <img id="compass" 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="controlIcon" />
            </div>
        </div>
-        <div id="returnToStart" class="navigationItem">
+        <div id="returnToStart" class="controlItem">
            <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="controlBackground" />
            </div>
            <div>
-                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="controlIcon" />
            </div>
        </div>
    </div>