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

MAPG-58 make resultinfo fixed height and move out continue button

Browse Source
This commit is contained in:
Bence Pőcze 2020-05-23 02:07:50 +02:00
parent d6cafdeb06
commit 3285ce2a4f
2 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ button:disabled {
opacity: 0.7; opacity: 0.7;
} }
button.block { button.fullWidth {
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
@ -69,6 +69,10 @@ div.buttonContainer {
height: 35px; height: 35px;
} }
div.buttonContainer > button {
margin: 0 auto;
}
div.buttonContainer.top { div.buttonContainer.top {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -119,30 +123,37 @@ div.buttonContainer.bottom {
z-index: 2; z-index: 2;
} }
#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer { #guess > #continueButtonContainer {
display: none; display: none;
} }
#guess.result > #closeGuessButtonContainer,
#guess.result > #guessButtonContainer {
display: none;
}
#guess.result > #continueButtonContainer {
display: block;
}
#map { #map {
width: 100%; width: 100%;
border-radius: 3px; border-radius: 3px;
} }
#guess.result > #map { #guess.result > #map {
height: 70%; height: calc(100% - 170px);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} }
#resultInfo { #resultInfo {
height: 30%; margin-top: 5px;
height: 120px;
width: 100%; width: 100%;
padding: 10px 20px; padding: 5px 20px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
background-color: #ffffff; background-color: #ffffff;
border-bottom-left-radius: 3px; border-radius: 3px;
border-bottom-right-radius: 3px;
display: none; display: none;
} }
@ -151,7 +162,7 @@ div.buttonContainer.bottom {
} }
#resultInfo > div { #resultInfo > div {
height: 25%; height: 33.33%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;

16
views/game.php
View File

@ -16,15 +16,15 @@
</div> </div>
<div id="panorama"></div> <div id="panorama"></div>
<div id="showGuessButtonContainer"> <div id="showGuessButtonContainer">
<button id="showGuessButton" class="block">Show guess map</button> <button id="showGuessButton" class="fullWidth">Show guess map</button>
</div> </div>
<div id="guess"> <div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer top"> <div id="closeGuessButtonContainer" class="buttonContainer top">
<button id="closeGuessButton" class="block gray">Close</button> <button id="closeGuessButton" class="fullWidth gray">Close</button>
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="guessButtonContainer" class="buttonContainer bottom"> <div id="guessButtonContainer" class="buttonContainer bottom">
<button id="guessButton" class="block" disabled>Guess</button> <button id="guessButton" class="fullWidth" disabled>Guess</button>
</div> </div>
<div id="resultInfo"> <div id="resultInfo">
<div id="distanceInfo"> <div id="distanceInfo">
@ -40,11 +40,11 @@
<div id="scoreBar"></div> <div id="scoreBar"></div>
</div> </div>
</div> </div>
<div> </div>
<button id="continueButton">Continue</button> <div id="continueButtonContainer" class="buttonContainer bottom">
<button id="showSummaryButton">Show summary</button> <button id="continueButton" class="fullWidth">Continue</button>
<button id="startNewGameButton">Start new game</button> <button id="showSummaryButton" class="fullWidth">Show summary</button>
</div> <button id="startNewGameButton" class="fullWidth">Start new game</button>
</div> </div>
</div> </div>
<script> <script>