From 0ac099298136de90e2955850b29af3b55cdc6bba Mon Sep 17 00:00:00 2001 From: Frank Schwenk Date: Fri, 4 Apr 2025 11:11:53 +0200 Subject: [PATCH] Improve game detail view responsiveness and layout --- index.html | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) diff --git a/index.html b/index.html index e690fd9..3b1fd15 100644 --- 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; + } + }