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

MAPG-35 introduce layout for mobile

Browse Source 
further style fixes and adjustments
This commit is contained in:
Bence Pőcze 2020-05-21 01:58:47 +02:00
parent f039c80eaa
commit 4d8ad9f10f
2 changed files with 121 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,16 +27,17 @@ p {
button { button {
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
background-color: #5e77aa; background-color: #5e77aa;
padding: 8px 15px; padding: 0 15px;
height: 35px;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
} }
button:hover, button:focus { button:enabled:hover, button:enabled:focus {
background-color: #29457f; background-color: #29457f;
outline: none; outline: none;
} }
@ -44,10 +45,34 @@ button:hover, button:focus {
button:disabled { button:disabled {
cursor: no-drop; cursor: no-drop;
color: #dddddd; color: #dddddd;
background-color: #808080;
opacity: 0.7; 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 { #loading {
position: absolute; position: absolute;
width: 40px; width: 40px;
@ -56,8 +81,7 @@ button:disabled {
left: 50%; left: 50%;
margin-top: -20px; margin-top: -20px;
margin-left: -20px; margin-left: -20px;
z-index: 2; z-index: 3;
visibility: visible;
} }
#panorama { #panorama {
@ -68,57 +92,18 @@ button:disabled {
#guess { #guess {
position: absolute; position: absolute;
right: 20px;
bottom: 20px; bottom: 20px;
width: 250px; right: 20px;
height: 150px;
opacity: 0.5;
z-index: 2; z-index: 2;
visibility: visible;
transition-property: width, height, opacity;
transition-duration: 0.1s;
transition-delay: 0.8s;
} }
#guess:hover { #guessMap {
width: 500px;
height: 350px;
opacity: 0.95;
transition-delay: 0s;
}
#guess > #guessMap {
height: 115px;
width: 100%; width: 100%;
transition-property: height;
transition-duration: 0.1s;
transition-delay: 0.8s;
border-radius: 3px; 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 { #result {
position: absolute; position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
opacity: 0.95; opacity: 0.95;
z-index: 2; z-index: 2;
visibility: hidden; visibility: hidden;
@ -152,16 +137,93 @@ button:disabled {
} }
#scoreBarBase { #scoreBarBase {
height: 20px; height: 24px;
width: 60%;
margin: 0 auto; margin: 0 auto;
background-color: #eeeeee; background-color: #eeeeee;
border-radius: 3px;
} }
#scoreBar { #scoreBar {
height: 100%; height: 100%;
width: 0; width: 0;
border-radius: 3px;
transition-property: width; transition-property: width;
transition-duration: 2.0s; 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%;
}
}

11
views/game.php
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapGuesser</title> <title>MapGuesser</title>
<link href="static/css/mapguesser.css" rel="stylesheet"> <link href="static/css/mapguesser.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" 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"> <img src="static/img/loading.gif">
</div> </div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="showGuessButtonContainer">
<button id="showGuessButton" class="block">Show guess map</button>
</div>
<div id="guess"> <div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer top">
<button id="closeGuessButton" class="block gray">Close</button>
</div>
<div id="guessMap"></div> <div id="guessMap"></div>
<div id="guessButtonContainer"> <div class="buttonContainer bottom">
<button id="guessButton" disabled>Guess</button> <button id="guessButton" class="block" disabled>Guess</button>
</div> </div>
</div> </div>
<div id="result"> <div id="result">