Improve layout on small screens

Public/schafkopf.html

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

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;
+    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;
     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-column: 1;
-    grid-row: 3;
+    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-column: 7;
-    grid-row: 3;
+    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;
+    margin: 5px;
-    padding-left: 16px;
+    padding: 5px;
-    padding-right: 16px;
     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;
 }