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

Merged in bugfix/MAPG-163-fix-modal-when-height-is-low (pull request #131)

Browse Source 
MAPG-163 optimize modal height
This commit is contained in:
Bence Pőcze 2020-06-21 21:09:08 +00:00
commit 4f680db8f3
1 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,11 +251,10 @@ input.big:focus, select.big:focus, textarea.big:focus {
div.modal { div.modal {
position: fixed; position: fixed;
top: 100px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 3px; border-radius: 3px;
padding: 20px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto;
z-index: 6; z-index: 6;
visibility: hidden; visibility: hidden;
} }
@ -378,6 +377,8 @@ div.box {
div.modal { div.modal {
left: 20px; left: 20px;
right: 20px; right: 20px;
padding-left: 15px;
padding-right: 15px;
} }
div.box { div.box {
width: initial; width: initial;
@ -399,5 +400,34 @@ div.box {
width: 540px; width: 540px;
left: 50%; left: 50%;
margin-left: -270px; margin-left: -270px;
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-height: 399px) {
div.modal {
top: 20px;
max-height: calc(100% - 40px);
padding-top: 10px;
padding-bottom: 10px;
}
}
@media screen and (min-height: 400px) and (max-height: 499px) {
div.modal {
top: 50px;
max-height: calc(100% - 100px);
padding-top: 15px;
padding-bottom: 15px;
}
}
@media screen and (min-height: 500px) {
div.modal {
top: 75px;
max-height: calc(100% - 150px);
padding-top: 15px;
padding-bottom: 15px;
} }
} }