Improve layout on small screens

This commit is contained in:
Christoph Hagen 2021-12-18 12:29:08 +01:00
parent 02e91cce53
commit c9853dee28
2 changed files with 148 additions and 30 deletions

View File

@ -58,6 +58,7 @@
<div id="action-bar-centering"> <div id="action-bar-centering">
<div id="action-bar"></div> <div id="action-bar"></div>
</div> </div>
<div id="player-cards-center">
<div id="player-cards"> <div id="player-cards">
<button id="player-card1" class="player-card" disabled></button> <button id="player-card1" class="player-card" disabled></button>
<button id="player-card2" class="player-card" disabled></button> <button id="player-card2" class="player-card" disabled></button>
@ -69,6 +70,7 @@
<button id="player-card8" class="player-card" disabled></button> <button id="player-card8" class="player-card" disabled></button>
</div> </div>
</div> </div>
</div>
<div id="login-window"> <div id="login-window">
<div id="login-window-vertical-center"> <div id="login-window-vertical-center">

View File

@ -100,7 +100,7 @@ body {
height: 50px; height: 50px;
background-color: var(--element-background); background-color: var(--element-background);
padding: 0px; padding: 0px;
z-index: 1; z-index: 5;
width: 100%; width: 100%;
position: absolute; position: absolute;
} }
@ -296,10 +296,10 @@ body {
margin-top: 10px; margin-top: 10px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 949px; width: 649px;
height: 409px; height: 389px;
grid-template-columns: 150px 200px 71px 36px 35px 36px 71px 200px 150px; grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
grid-template-rows: 111px 76px 35px 76px 111px; grid-template-rows: 101px 86px 15px 86px 101px;
column-gap: 0px; column-gap: 0px;
row-gap: 0px; row-gap: 0px;
align-items: center; align-items: center;
@ -312,31 +312,31 @@ body {
} }
#table-player-card-bottom { #table-player-card-bottom {
grid-column: 4 / span 3; grid-column: 3 / span 3;
grid-row: 4 / span 2; grid-row: 4 / span 2;
z-index: 2; z-index: 2;
} }
#table-player-card-left { #table-player-card-left {
grid-column: 3 / span 2; grid-column: 2 / span 2;
grid-row: 2 / span 3; grid-row: 2 / span 3;
z-index: 1; z-index: 1;
} }
#table-player-card-top { #table-player-card-top {
grid-column: 4 / span 3; grid-column: 3 / span 3;
grid-row: 1 / span 2; grid-row: 1 / span 2;
z-index: 4; z-index: 4;
} }
#table-player-card-right { #table-player-card-right {
grid-column: 6 / span 2; grid-column: 5 / span 2;
grid-row: 2 / span 3; grid-row: 2 / span 3;
z-index: 3; z-index: 3;
} }
#table-player-info-bottom { #table-player-info-bottom {
grid-column: 2 / span 2; grid-column: 1 / span 2;
grid-row: 5; grid-row: 5;
font-size: large; font-size: large;
text-align: right; text-align: right;
@ -345,15 +345,15 @@ body {
} }
#table-player-info-left { #table-player-info-left {
grid-column: 2; grid-column: 1;
grid-row: 3; grid-row: 2 / span 3;
font-size: large; font-size: large;
text-align: right; text-align: right;
margin-right: 15px; margin-right: 15px;
} }
#table-player-info-top { #table-player-info-top {
grid-column: 2 / span 2; grid-column: 1 / span 2;
grid-row: 1; grid-row: 1;
font-size: large; font-size: large;
text-align: right; text-align: right;
@ -362,31 +362,35 @@ body {
} }
#table-player-info-right { #table-player-info-right {
grid-column: 8; grid-column: 7;
grid-row: 3; grid-row: 2 / span 3;
font-size: large; font-size: large;
margin-left: 15px; margin-left: 15px;
} }
.player-connection-state { .player-connection-state {
font-size: x-small; font-size: x-small;
color: var(--alert-color);
} }
#available-games-list { #available-games-list {
grid-column: 1; grid-column: 3 / span 3;
grid-row: 1 / span 5; grid-row: 1 / span 5;
width: 100%; width: 100%;
z-index: 1;
} }
.available-game { .available-game {
margin-top: 5px; margin: 5px;
padding-left: 16px; padding: 5px;
padding-right: 16px;
background-color: var(--game-type-color); background-color: var(--game-type-color);
text-align: center; text-align: center;
} }
#player-cards-center {
width: 100%;
margin-top: 10px;
}
#player-cards { #player-cards {
display: none; display: none;
margin-left: auto; margin-left: auto;
@ -394,7 +398,6 @@ body {
width: 923px; width: 923px;
grid-template-columns: 111px 111px 111px 111px 111px 111px 111px 111px; grid-template-columns: 111px 111px 111px 111px 111px 111px 111px 111px;
column-gap: 5px; column-gap: 5px;
margin-top: 10px;
} }
.player-card { .player-card {
@ -406,6 +409,111 @@ body {
transition-duration: 0.2s; transition-duration: 0.2s;
} }
@media screen and (max-width: 925px) {
#player-cards {
width: 748px;
grid-template-columns: 91px 91px 91px 91px 91px 91px 91px 91px;
column-gap: 0px;
}
}
@media screen and (max-width: 750px) {
#player-cards {
width: 601px;
grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px;
column-gap: 0px;
}
}
@media screen and (max-width: 605px) {
#player-cards {
width: 461px;
grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px;
column-gap: 0px;
}
}
@media screen and (max-width: 465px) {
#player-cards {
width: 321px;
grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px;
column-gap: 0px;
}
}
@media screen and (max-width: 650px) {
#table-players {
width: 549px;
grid-template-columns: 150px 71px 36px 35px 36px 71px 150px;
}
}
@media screen and (max-width: 550px) {
#table-players {
width: 514px;
grid-template-columns: 150px 54px 53px 0px 54px 53px 150px;
}
}
@media screen and (max-width: 515px) {
#table-players {
width: 467px;
grid-template-columns: 150px 30px 53px 0px 54px 30px 150px;
}
#table-player-card-right {
grid-column: 3 / span 4;
margin-left: 30px;
}
}
@media screen and (max-width: 470px) {
#table-players {
width: 407px;
grid-template-columns: 120px 30px 53px 0px 54px 30px 120px;
}
}
@media screen and (max-width: 410px) {
#table-players {
width: 367px;
grid-template-columns: 100px 30px 53px 0px 54px 30px 100px;
}
}
@media screen and (max-width: 370px) {
#table-players {
width: 307px;
grid-template-columns: 70px 30px 53px 0px 54px 30px 70px;
}
}
@media screen and (max-height: 715px) {
#table-players {
grid-template-rows: 94px 93px 0px 94px 93px;
}
}
@media screen and (max-height: 700px) {
#player-cards-center {
max-height: 150px;
overflow: hidden;
bottom: 0px;
position: absolute;
}
}
@media screen and (max-height: 650px) {
#player-cards-center {
max-height: 100px;
}
}
@media screen and (max-height: 600px) {
#player-cards-center {
max-height: 50px;
}
}
.player-card:disabled, .player-card:disabled,
.player-card[disabled] { .player-card[disabled] {
cursor: not-allowed; cursor: not-allowed;
@ -417,32 +525,40 @@ body {
#player-card1 { #player-card1 {
grid-column: 1; grid-column: 1;
z-index: 1;
} }
#player-card2 { #player-card2 {
grid-column: 2; grid-column: 2;
z-index: 2;
} }
#player-card3 { #player-card3 {
grid-column: 3; grid-column: 3;
z-index: 3;
} }
#player-card4 { #player-card4 {
grid-column: 4; grid-column: 4;
z-index: 4;
} }
#player-card5 { #player-card5 {
grid-column: 5; grid-column: 5;
z-index: 5;
} }
#player-card6 { #player-card6 {
grid-column: 6; grid-column: 6;
z-index: 6;
} }
#player-card7 { #player-card7 {
grid-column: 7; grid-column: 7;
z-index: 7;
} }
#player-card8 { #player-card8 {
grid-column: 8; grid-column: 8;
z-index: 8;
} }