diff --git a/public/static/css/game.css b/public/static/css/game.css index 4081aa9..9887cc7 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -1,12 +1,15 @@ #panorama { - width: 100%; - height: calc(100% - 40px); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; z-index: 1; } -#guessCover { +#panoCover { position: absolute; - top: 40px; + top: 0; left: 0; bottom: 0; right: 0; @@ -111,7 +114,7 @@ z-index: 2; } #guess { - top: 50px; + top: 10px; left: 20px; opacity: 0.95; visibility: hidden; @@ -157,7 +160,7 @@ #guess.result { width: initial; height: initial; - top: 50px; + top: 10px; left: 50px; right: 50px; bottom: 50px; @@ -167,11 +170,11 @@ } @media screen and (max-height: 424px) { #guess { - top: 50px; + top: 10px; height: initial; } #guess.adapt:hover { - top: 50px; + top: 10px; height: initial; } #guess.result { diff --git a/public/static/css/map_editor.css b/public/static/css/map_editor.css index b0a161f..59f2315 100644 --- a/public/static/css/map_editor.css +++ b/public/static/css/map_editor.css @@ -1,9 +1,13 @@ #map { - width: 100%; - height: calc(100% - 40px); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; z-index: 1; } +/* modify the cursor for the Leaflet map */ .leaflet-container { cursor: crosshair; } @@ -30,7 +34,7 @@ #control { position: absolute; - top: 50px; + top: 10px; right: 10px; width: 125px; z-index: 3; @@ -50,31 +54,34 @@ @media screen and (max-width: 999px) and (min-height: 600px) { #map.selected { - height: calc(50% - 20px); + height: 50%; } #panorama, #noPano { left: 0; bottom: 0; right: 0; - height: calc(50% - 20px); + height: 50%; } #placeControl { - top: calc(50% + 30px); + top: calc(50% + 10px); } } @media screen and (min-width: 1000px), (max-height: 599px) { #map.selected { + top: 0; + bottom: 0; + left: 0; width: 50%; } #panorama, #noPano { - top: 40px; + top: 0; bottom: 0; right: 0; width: 50%; } #placeControl { - top: 50px; + top: 10px; } #modified.selected { right: calc(50% + 10px); diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css index b016fb5..ed8b4f7 100644 --- a/public/static/css/mapguesser.css +++ b/public/static/css/mapguesser.css @@ -324,6 +324,12 @@ main { padding: 6px 12px; } +div.full { + position: relative; + width: 100%; + height: calc(100% - 40px); +} + footer { background-color: #444444; padding: 6px 12px;