esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feature/place-streetview-cover-to-the-map #35

Merged
bence merged 2 commits from feature/place-streetview-cover-to-the-map into develop 2021-05-02 16:27:42 +02:00
Conversation 0 Commits 2 Files Changed 6 +75 -57
6 changed files with 75 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
public/static/css/game.css
View File

@ -150,39 +150,9 @@
} }
#navigation { #navigation {
position: absolute;
z-index: 2; 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) { @media screen and (max-width: 599px) {
#mapName { #mapName {
display: none; display: none;
@ -209,10 +179,6 @@
#navigation { #navigation {
bottom: 25px; bottom: 25px;
left: 10px; left: 10px;
width: 45px;
}
#navigation .navigationItem {
height: 45px;
} }
} }
@ -260,10 +226,6 @@
#navigation { #navigation {
bottom: 50px; bottom: 50px;
left: 20px; left: 20px;
width: 60px;
}
#navigation .navigationItem {
height: 60px;
} }
@media screen and (max-height: 424px) { @media screen and (max-height: 424px) {
#guess { #guess {
@ -282,10 +244,6 @@
#navigation { #navigation {
bottom: 30px; bottom: 30px;
left: 10px; left: 10px;
width: 45px;
}
#navigation .navigationItem {
height: 45px;
} }
} }
} }

6
public/static/css/map_editor.css
View File

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

49
public/static/css/mapguesser.css
View File

@ -443,6 +443,43 @@ div.box {
box-sizing: border-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) { @media screen and (max-width: 599px) {
header h1 span { header h1 span {
display: none; display: none;
@ -469,6 +506,12 @@ div.box {
div.box { div.box {
width: initial; width: initial;
} }
.circleControl {
width: 45px;
}
.circleControl .controlItem {
height: 45px;
}
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
@ -498,6 +541,12 @@ div.box {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.circleControl {
width: 45px;
}
.circleControl .controlItem {
height: 45px;
}
} }
@media screen and (min-height: 400px) and (max-height: 499px) { @media screen and (min-height: 400px) and (max-height: 499px) {

4
public/static/js/map_editor.js
View File

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

15
views/admin/map_editor.php
View File

@ -18,11 +18,6 @@
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" /> <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/map.svg?rev=<?= REVISION ?>" alt="Map Selector" />
</button> </button>
</span><!-- </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"> --><span class="inline hideOnMobile">
<input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" /> <input type="text" id="jumpCoordinates" placeholder="Insert coordinates here" />
<button id="jumpButton" disabled >Jump</button> <button id="jumpButton" disabled >Jump</button>
@ -71,6 +66,16 @@
<div id="map" class="map"> <div id="map" class="map">
<div id="lmap" class="map"></div> <div id="lmap" class="map"></div>
<div id="gmap" 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>
<div id="panorama"></div> <div id="panorama"></div>
<div id="noPano"> <div id="noPano">

14
views/game.php
View File

@ -59,21 +59,21 @@
<button id="startNewGameButton" class="fullWidth">Play this map again</button> <button id="startNewGameButton" class="fullWidth">Play this map again</button>
</div> </div>
</div> </div>
<div id="navigation"> <div id="navigation" class="circleControl">
<div id="compassContainer" class="navigationItem"> <div id="compassContainer" class="controlItem">
<div> <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>
<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> </div>
<div id="returnToStart" class="navigationItem"> <div id="returnToStart" class="controlItem">
<div> <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>
<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> </div>
</div> </div>