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

Merged in feature/MAPG-58-make-result-info-fixed-height (pull request #35)

Browse Source 
MAPG-58 make resultinfo fixed height and move out continue button
This commit is contained in:
Bence Pőcze 2020-05-23 00:09:08 +00:00
commit df09dff48b
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;
}
button.block {
button.fullWidth {
padding: 0;
width: 100%;
}
@ -69,6 +69,10 @@ div.buttonContainer {
height: 35px;
}
div.buttonContainer > button {
margin: 0 auto;
}
div.buttonContainer.top {
margin-bottom: 10px;
}
@ -119,30 +123,37 @@ div.buttonContainer.bottom {
z-index: 2;
}
#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
#guess > #continueButtonContainer {
display: none;
}
#guess.result > #closeGuessButtonContainer,
#guess.result > #guessButtonContainer {
display: none;
}
#guess.result > #continueButtonContainer {
display: block;
}
#map {
width: 100%;
border-radius: 3px;
}
#guess.result > #map {
height: 70%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: calc(100% - 170px);
}
#resultInfo {
height: 30%;
margin-top: 5px;
height: 120px;
width: 100%;
padding: 10px 20px;
padding: 5px 20px;
text-align: center;
box-sizing: border-box;
background-color: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-radius: 3px;
display: none;
}
@ -151,7 +162,7 @@ div.buttonContainer.bottom {
}
#resultInfo > div {
height: 25%;
height: 33.33%;
width: 100%;
display: flex;
justify-content: center;

14
views/game.php
View File

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