alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move Back button into header on Rules and Leaderboard pages

Browse Source 
Position the button absolutely on the left side of the header,
vertically centered with the title. Remove mobile fixed-position
override that placed it in the top bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 17:37:13 -05:00
parent 730ba9c462
commit 8657a0501f
2 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -415,9 +415,8 @@
<!-- Rules Screen --> <!-- Rules Screen -->
<div id="rules-screen" class="screen"> <div id="rules-screen" class="screen">
<div class="rules-container"> <div class="rules-container">
<button id="rules-back-btn" class="btn rules-back-btn">« Back</button>
<div class="rules-header"> <div class="rules-header">
<button id="rules-back-btn" class="btn rules-back-btn">« Back</button>
<h1><span class="golfer-logo">🏌️</span> <span class="golf-title">Golf Rules</span></h1> <h1><span class="golfer-logo">🏌️</span> <span class="golf-title">Golf Rules</span></h1>
<p class="rules-subtitle">6-Card Golf Card Game - Complete Guide</p> <p class="rules-subtitle">6-Card Golf Card Game - Complete Guide</p>
</div> </div>
@ -733,9 +732,8 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
<!-- Leaderboard Screen --> <!-- Leaderboard Screen -->
<div id="leaderboard-screen" class="screen"> <div id="leaderboard-screen" class="screen">
<div class="leaderboard-container"> <div class="leaderboard-container">
<button id="leaderboard-back-btn" class="btn leaderboard-back-btn">&laquo; Back</button>
<div class="leaderboard-header"> <div class="leaderboard-header">
<button id="leaderboard-back-btn" class="btn leaderboard-back-btn">&laquo; Back</button>
<h1>Leaderboard</h1> <h1>Leaderboard</h1>
<p class="leaderboard-subtitle">Top players ranked by performance</p> <p class="leaderboard-subtitle">Top players ranked by performance</p>
</div> </div>

22
client/style.css
View File

@ -2854,12 +2854,15 @@ input::placeholder {
/* Rules back button */ /* Rules back button */
.rules-back-btn { .rules-back-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 4px 12px; padding: 4px 12px;
font-size: 0.8rem; font-size: 0.8rem;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
margin-bottom: 15px;
} }
.rules-back-btn:hover { .rules-back-btn:hover {
@ -2875,6 +2878,7 @@ input::placeholder {
/* Rules header */ /* Rules header */
.rules-header { .rules-header {
position: relative;
text-align: center; text-align: center;
margin-bottom: 25px; margin-bottom: 25px;
padding-bottom: 20px; padding-bottom: 20px;
@ -3514,6 +3518,7 @@ input::placeholder {
} }
.leaderboard-header { .leaderboard-header {
position: relative;
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -3532,12 +3537,15 @@ input::placeholder {
/* Leaderboard back button */ /* Leaderboard back button */
.leaderboard-back-btn { .leaderboard-back-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
padding: 4px 12px; padding: 4px 12px;
font-size: 0.8rem; font-size: 0.8rem;
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
margin-bottom: 15px;
} }
.leaderboard-back-btn:hover { .leaderboard-back-btn:hover {
@ -5002,17 +5010,9 @@ body.mobile-portrait .game-header #leave-game-btn {
display: none !important; display: none !important;
} }
body.mobile-portrait .rules-back-btn,
body.mobile-portrait .leaderboard-back-btn {
position: fixed;
top: 8px;
left: 8px;
z-index: 100;
}
body.mobile-portrait .rules-container, body.mobile-portrait .rules-container,
body.mobile-portrait .leaderboard-container { body.mobile-portrait .leaderboard-container {
margin-top: 36px; margin-top: 0;
} }
body.mobile-portrait .status-message { body.mobile-portrait .status-message {