From c9853dee28b10992b3e690475dee5dcbf0d77809 Mon Sep 17 00:00:00 2001 From: Christoph Hagen Date: Sat, 18 Dec 2021 12:29:08 +0100 Subject: [PATCH] Improve layout on small screens --- Public/schafkopf.html | 20 +++--- Public/style.css | 158 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 148 insertions(+), 30 deletions(-) diff --git a/Public/schafkopf.html b/Public/schafkopf.html index 940a6b6..3fc0613 100644 --- a/Public/schafkopf.html +++ b/Public/schafkopf.html @@ -58,15 +58,17 @@
-
- - - - - - - - +
+
+ + + + + + + + +
diff --git a/Public/style.css b/Public/style.css index 6b6c19f..1a08fc6 100644 --- a/Public/style.css +++ b/Public/style.css @@ -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; } \ No newline at end of file