ch/Schafkopf-Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve layout on small screens

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Public/schafkopf.html
View File

@ -58,15 +58,17 @@
<div id="action-bar-centering">
<div id="action-bar"></div>
</div>
<div id="player-cards">
<button id="player-card1" class="player-card" disabled></button>
<button id="player-card2" class="player-card" disabled></button>
<button id="player-card3" class="player-card" disabled></button>
<button id="player-card4" class="player-card" disabled></button>
<button id="player-card5" class="player-card" disabled></button>
<button id="player-card6" class="player-card" disabled></button>
<button id="player-card7" class="player-card" disabled></button>
<button id="player-card8" class="player-card" disabled></button>
<div id="player-cards-center">
<div id="player-cards">
<button id="player-card1" class="player-card" disabled></button>
<button id="player-card2" class="player-card" disabled></button>
<button id="player-card3" class="player-card" disabled></button>
<button id="player-card4" class="player-card" disabled></button>
<button id="player-card5" class="player-card" disabled></button>
<button id="player-card6" class="player-card" disabled></button>
<button id="player-card7" class="player-card" disabled></button>
<button id="player-card8" class="player-card" disabled></button>
</div>
</div>
</div>

158
Public/style.css
View File

@ -100,7 +100,7 @@ body {
height: 50px;
background-color: var(--element-background);
padding: 0px;
z-index: 1;
z-index: 5;
width: 100%;
position: absolute;
}
@ -296,10 +296,10 @@ body {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
width: 949px;
height: 409px;
grid-template-columns: 150px 200px 71px 36px 35px 36px 71px 200px 150px;
grid-template-rows: 111px 76px 35px 76px 111px;
width: 649px;
height: 389px;
grid-template-columns: 200px 71px 36px 35px 36px 71px 200px;
grid-template-rows: 101px 86px 15px 86px 101px;
column-gap: 0px;
row-gap: 0px;
align-items: center;
@ -312,31 +312,31 @@ body {
}
#table-player-card-bottom {
grid-column: 4 / span 3;
grid-column: 3 / span 3;
grid-row: 4 / span 2;
z-index: 2;
}
#table-player-card-left {
grid-column: 3 / span 2;
grid-column: 2 / span 2;
grid-row: 2 / span 3;
z-index: 1;
}
#table-player-card-top {
grid-column: 4 / span 3;
grid-column: 3 / span 3;
grid-row: 1 / span 2;
z-index: 4;
}
#table-player-card-right {
grid-column: 6 / span 2;
grid-column: 5 / span 2;
grid-row: 2 / span 3;
z-index: 3;
}
#table-player-info-bottom {
grid-column: 2 / span 2;
grid-column: 1 / span 2;
grid-row: 5;
font-size: large;
text-align: right;
@ -345,15 +345,15 @@ body {
}
#table-player-info-left {
grid-column: 2;
grid-row: 3;
grid-column: 1;
grid-row: 2 / span 3;
font-size: large;
text-align: right;
margin-right: 15px;
}
#table-player-info-top {
grid-column: 2 / span 2;
grid-column: 1 / span 2;
grid-row: 1;
font-size: large;
text-align: right;
@ -362,31 +362,35 @@ body {
}
#table-player-info-right {
grid-column: 8;
grid-row: 3;
grid-column: 7;
grid-row: 2 / span 3;
font-size: large;
margin-left: 15px;
}
.player-connection-state {
font-size: x-small;
color: var(--alert-color);
}
#available-games-list {
grid-column: 1;
grid-column: 3 / span 3;
grid-row: 1 / span 5;
width: 100%;
z-index: 1;
}
.available-game {
margin-top: 5px;
padding-left: 16px;
padding-right: 16px;
margin: 5px;
padding: 5px;
background-color: var(--game-type-color);
text-align: center;
}
#player-cards-center {
width: 100%;
margin-top: 10px;
}
#player-cards {
display: none;
margin-left: auto;
@ -394,7 +398,6 @@ body {
width: 923px;
grid-template-columns: 111px 111px 111px 111px 111px 111px 111px 111px;
column-gap: 5px;
margin-top: 10px;
}
.player-card {
@ -406,6 +409,111 @@ body {
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] {
cursor: not-allowed;
@ -417,32 +525,40 @@ body {
#player-card1 {
grid-column: 1;
z-index: 1;
}
#player-card2 {
grid-column: 2;
z-index: 2;
}
#player-card3 {
grid-column: 3;
z-index: 3;
}
#player-card4 {
grid-column: 4;
z-index: 4;
}
#player-card5 {
grid-column: 5;
z-index: 5;
}
#player-card6 {
grid-column: 6;
z-index: 6;
}
#player-card7 {
grid-column: 7;
z-index: 7;
}
#player-card8 {
grid-column: 8;
z-index: 8;
}