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

MAPG-178 make style compatible with cookie notice on the top of the page

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-25 14:00:38 +02:00
parent 4afbc046ff
commit 2f4f66cc94
3 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,15 @@
#panorama { #panorama {
width: 100%; position: absolute;
height: calc(100% - 40px); top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1; z-index: 1;
} }
#guessCover { #panoCover {
position: absolute; position: absolute;
top: 40px; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -111,7 +114,7 @@
z-index: 2; z-index: 2;
} }
#guess { #guess {
top: 50px; top: 10px;
left: 20px; left: 20px;
opacity: 0.95; opacity: 0.95;
visibility: hidden; visibility: hidden;
@ -157,7 +160,7 @@
#guess.result { #guess.result {
width: initial; width: initial;
height: initial; height: initial;
top: 50px; top: 10px;
left: 50px; left: 50px;
right: 50px; right: 50px;
bottom: 50px; bottom: 50px;
@ -167,11 +170,11 @@
} }
@media screen and (max-height: 424px) { @media screen and (max-height: 424px) {
#guess { #guess {
top: 50px; top: 10px;
height: initial; height: initial;
} }
#guess.adapt:hover { #guess.adapt:hover {
top: 50px; top: 10px;
height: initial; height: initial;
} }
#guess.result { #guess.result {

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

@ -1,9 +1,13 @@
#map { #map {
width: 100%; position: absolute;
height: calc(100% - 40px); top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1; z-index: 1;
} }
/* modify the cursor for the Leaflet map */
.leaflet-container { .leaflet-container {
cursor: crosshair; cursor: crosshair;
} }
@ -30,7 +34,7 @@
#control { #control {
position: absolute; position: absolute;
top: 50px; top: 10px;
right: 10px; right: 10px;
width: 125px; width: 125px;
z-index: 3; z-index: 3;
@ -50,31 +54,34 @@
@media screen and (max-width: 999px) and (min-height: 600px) { @media screen and (max-width: 999px) and (min-height: 600px) {
#map.selected { #map.selected {
height: calc(50% - 20px); height: 50%;
} }
#panorama, #noPano { #panorama, #noPano {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
height: calc(50% - 20px); height: 50%;
} }
#placeControl { #placeControl {
top: calc(50% + 30px); top: calc(50% + 10px);
} }
} }
@media screen and (min-width: 1000px), (max-height: 599px) { @media screen and (min-width: 1000px), (max-height: 599px) {
#map.selected { #map.selected {
top: 0;
bottom: 0;
left: 0;
width: 50%; width: 50%;
} }
#panorama, #noPano { #panorama, #noPano {
top: 40px; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 50%; width: 50%;
} }
#placeControl { #placeControl {
top: 50px; top: 10px;
} }
#modified.selected { #modified.selected {
right: calc(50% + 10px); right: calc(50% + 10px);

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

@ -324,6 +324,12 @@ main {
padding: 6px 12px; padding: 6px 12px;
} }
div.full {
position: relative;
width: 100%;
height: calc(100% - 40px);
}
footer { footer {
background-color: #444444; background-color: #444444;
padding: 6px 12px; padding: 6px 12px;