Merged in feature/MAPG-35-make-layout-nice-on-mobile (pull request #16)
feature/MAPG-35-make-layout-nice-on-mobile
This commit is contained in:
commit
655815db77
@ -27,16 +27,17 @@ p {
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background-color: #5e77aa;
|
||||
padding: 8px 15px;
|
||||
padding: 0 15px;
|
||||
height: 35px;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
button:hover, button:focus {
|
||||
button:enabled:hover, button:enabled:focus {
|
||||
background-color: #29457f;
|
||||
outline: none;
|
||||
}
|
||||
@ -44,10 +45,34 @@ button:hover, button:focus {
|
||||
button:disabled {
|
||||
cursor: no-drop;
|
||||
color: #dddddd;
|
||||
background-color: #808080;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
button.block {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.gray {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
button.gray:hover, button.gray:focus {
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
div.buttonContainer {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
div.buttonContainer.top {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
div.buttonContainer.bottom {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
@ -56,8 +81,7 @@ button:disabled {
|
||||
left: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
z-index: 2;
|
||||
visibility: visible;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#panorama {
|
||||
@ -68,57 +92,18 @@ button:disabled {
|
||||
|
||||
#guess {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
opacity: 0.5;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
visibility: visible;
|
||||
transition-property: width, height, opacity;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
#guess:hover {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
opacity: 0.95;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#guess > #guessMap {
|
||||
height: 115px;
|
||||
#guessMap {
|
||||
width: 100%;
|
||||
transition-property: height;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#guess:hover > #guessMap {
|
||||
height: 315px;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#guessButtonContainer {
|
||||
margin-top: 5px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#guessButton {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#result {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
opacity: 0.95;
|
||||
z-index: 2;
|
||||
visibility: hidden;
|
||||
@ -152,16 +137,93 @@ button:disabled {
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
height: 20px;
|
||||
width: 60%;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
background-color: #eeeeee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#scoreBar {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 3px;
|
||||
transition-property: width;
|
||||
transition-duration: 2.0s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
button {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#showGuessButtonContainer {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#guess {
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
opacity: 0.95;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#guessMap {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
#result {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
#showGuessButtonContainer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#guess {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
opacity: 0.5;
|
||||
transition-property: width, height, opacity;
|
||||
transition-duration: 0.1s;
|
||||
transition-delay: 0.8s;
|
||||
}
|
||||
|
||||
#guess:hover {
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
opacity: 0.95;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
#closeGuessButtonContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#guessMap {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
#result {
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
#scoreBarBase {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -172,6 +172,16 @@
|
||||
|
||||
Core.getNewPosition();
|
||||
|
||||
document.getElementById('showGuessButton').onclick = function () {
|
||||
this.style.visibility = 'hidden';
|
||||
document.getElementById('guess').style.visibility = 'visible';
|
||||
}
|
||||
|
||||
document.getElementById('closeGuessButton').onclick = function () {
|
||||
document.getElementById('showGuessButton').style.visibility = null;
|
||||
document.getElementById('guess').style.visibility = null;
|
||||
}
|
||||
|
||||
document.getElementById('guessButton').onclick = function () {
|
||||
if (!Core.guessMarker) {
|
||||
return;
|
||||
@ -231,15 +241,16 @@
|
||||
}
|
||||
|
||||
document.getElementById('continueButton').onclick = function () {
|
||||
document.getElementById('scoreBar').style.width = '0';
|
||||
document.getElementById('scoreBar').style.width = null;
|
||||
|
||||
Core.resultMarkers.real.setMap(null);
|
||||
Core.resultMarkers.real = null;
|
||||
Core.resultMarkers.guess.setMap(null);
|
||||
Core.resultMarkers.guess = null;
|
||||
|
||||
document.getElementById('guess').style.visibility = 'visible';
|
||||
document.getElementById('result').style.visibility = 'hidden';
|
||||
document.getElementById('showGuessButton').style.visibility = null;
|
||||
document.getElementById('guess').style.visibility = null;
|
||||
document.getElementById('result').style.visibility = null;
|
||||
|
||||
Core.guessMap.fitBounds(guessMapBounds);
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>MapGuesser</title>
|
||||
<link href="static/css/mapguesser.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
|
||||
@ -11,10 +12,16 @@
|
||||
<img src="static/img/loading.gif">
|
||||
</div>
|
||||
<div id="panorama"></div>
|
||||
<div id="showGuessButtonContainer">
|
||||
<button id="showGuessButton" class="block">Show guess map</button>
|
||||
</div>
|
||||
<div id="guess">
|
||||
<div id="closeGuessButtonContainer" class="buttonContainer top">
|
||||
<button id="closeGuessButton" class="block gray">Close</button>
|
||||
</div>
|
||||
<div id="guessMap"></div>
|
||||
<div id="guessButtonContainer">
|
||||
<button id="guessButton" disabled>Guess</button>
|
||||
<div class="buttonContainer bottom">
|
||||
<button id="guessButton" class="block" disabled>Guess</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="result">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user