cal/strat-gameplay-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLAUDE: Move mobile Runners/Outs beside Inning indicator

Browse Source 
Restructured mobile layout to match desktop:
- Runners+Outs column now beside Inning box in same row
- Layout: Away | [Inning][Runners/Outs] | Home
- Consistent layout between mobile and desktop views

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2025-11-27 22:19:38 -06:00
parent bf57aaa9f7
commit 240d0181b1
1 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend-sba/components/Game/ScoreBoard.vue
View File

@ -3,17 +3,18 @@
<div class="container mx-auto px-3 py-4">
<!-- Mobile Layout (default) -->
<div class="lg:hidden">
<!-- Score Display - Large and Clear -->
<div class="flex items-center justify-between mb-3">
<!-- Score Display with Game Situation -->
<div class="flex items-center justify-between">
<!-- Away Team -->
<div class="flex-1 text-center">
<div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
<div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
</div>
<!-- Center: Inning + Runners/Outs -->
<div class="flex items-center gap-2">
<!-- Inning Indicator -->
<div class="flex-1 text-center px-2">
<div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2">
<div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2 text-center">
<div class="text-xs font-medium text-blue-100">INNING</div>
<div class="text-2xl font-bold">{{ inning }}</div>
<div class="text-xs font-medium">
@ -25,21 +26,11 @@
</span>
</div>
</div>
</div>
<!-- Home Team -->
<div class="flex-1 text-center">
<div class="text-xs font-medium text-blue-100 mb-1">HOME</div>
<div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
</div>
</div>
<!-- Game Situation - Runners + Outs stacked -->
<div class="flex items-center justify-center gap-4 text-sm">
<!-- Runners + Outs Column -->
<div class="flex flex-col gap-0.5 w-24">
<!-- Runners (Mini Diamond) - Fixed positioning -->
<div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1">
<div class="flex flex-col gap-0.5 w-20">
<!-- Runners (Mini Diamond) -->
<div class="bg-white/10 backdrop-blur rounded-lg px-2 py-1">
<div class="flex items-center justify-center">
<div class="relative w-11 h-11">
<!-- 2nd Base (Top) -->
@ -64,7 +55,7 @@
</div>
<!-- Outs -->
<div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1.5">
<div class="bg-white/10 backdrop-blur rounded-lg px-2 py-1.5">
<div class="flex items-center justify-center gap-1.5">
<div
v-for="i in 3"
@ -76,6 +67,13 @@
</div>
</div>
</div>
<!-- Home Team -->
<div class="flex-1 text-center">
<div class="text-xs font-medium text-blue-100 mb-1">HOME</div>
<div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
</div>
</div>
</div>
<!-- Desktop Layout (lg and up) -->