Improve game detail view responsiveness and layout

2025-04-04 11:11:53 +02:00
parent c3e8ef9067
commit 0ac0992981
1 changed files with 131 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -767,6 +767,137 @@
                font-size: 14px;
            }
        }
+
+        /* Game detail styles */
+        .game-detail {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            padding: 20px;
+            background-color: #2a2a2a;
+            border-radius: 10px;
+            margin-top: 20px;
+            min-height: 0; /* Allow content to shrink */
+        }
+
+        .scores-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+            min-height: 0; /* Allow content to shrink */
+        }
+
+        .player-score {
+            flex: 1;
+            text-align: center;
+            padding: 20px;
+            background-color: #333;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; /* Allow content to shrink */
+        }
+
+        .player-name {
+            font-size: 24px;
+            margin-bottom: 10px;
+            color: #fff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .score {
+            font-size: 48px;
+            font-weight: bold;
+            margin: 10px 0;
+            line-height: 1;
+        }
+
+        .score-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-top: auto; /* Push buttons to bottom */
+        }
+
+        .score-button {
+            background-color: #333;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 10px 20px;
+            font-size: 18px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            min-width: 80px; /* Ensure buttons have minimum width */
+        }
+
+        /* Responsive styles */
+        @media screen and (max-width: 480px) {
+            .game-detail {
+                padding: 15px;
+                margin-top: 10px;
+            }
+
+            .scores-container {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .player-score {
+                padding: 15px;
+                min-height: 200px; /* Ensure minimum height for score display */
+            }
+
+            .player-name {
+                font-size: 20px;
+            }
+
+            .score {
+                font-size: 36px;
+            }
+
+            .score-buttons {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+
+            .score-button {
+                padding: 8px 16px;
+                font-size: 16px;
+                min-width: 70px;
+            }
+        }
+
+        @media screen and (min-width: 481px) and (max-width: 768px) {
+            .game-detail {
+                padding: 20px;
+            }
+
+            .scores-container {
+                gap: 15px;
+            }
+
+            .player-score {
+                padding: 15px;
+                min-height: 180px; /* Ensure minimum height for score display */
+            }
+
+            .player-name {
+                font-size: 22px;
+            }
+
+            .score {
+                font-size: 42px;
+            }
+
+            .score-button {
+                padding: 8px 16px;
+                font-size: 16px;
+                min-width: 70px;
+            }
+        }
    </style>
 </head>
 <body>