CLAUDE: Move mobile Runners/Outs beside Inning indicator
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
parent
bf57aaa9f7
commit
240d0181b1
@ -3,17 +3,18 @@
|
|||||||
<div class="container mx-auto px-3 py-4">
|
<div class="container mx-auto px-3 py-4">
|
||||||
<!-- Mobile Layout (default) -->
|
<!-- Mobile Layout (default) -->
|
||||||
<div class="lg:hidden">
|
<div class="lg:hidden">
|
||||||
<!-- Score Display - Large and Clear -->
|
<!-- Score Display with Game Situation -->
|
||||||
<div class="flex items-center justify-between mb-3">
|
<div class="flex items-center justify-between">
|
||||||
<!-- Away Team -->
|
<!-- Away Team -->
|
||||||
<div class="flex-1 text-center">
|
<div class="flex-1 text-center">
|
||||||
<div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
|
<div class="text-xs font-medium text-blue-100 mb-1">AWAY</div>
|
||||||
<div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
|
<div class="text-4xl font-bold tabular-nums">{{ awayScore }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Inning Indicator -->
|
<!-- Center: Inning + Runners/Outs -->
|
||||||
<div class="flex-1 text-center px-2">
|
<div class="flex items-center gap-2">
|
||||||
<div class="bg-white/20 backdrop-blur rounded-lg px-3 py-2">
|
<!-- Inning Indicator -->
|
||||||
|
<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-xs font-medium text-blue-100">INNING</div>
|
||||||
<div class="text-2xl font-bold">{{ inning }}</div>
|
<div class="text-2xl font-bold">{{ inning }}</div>
|
||||||
<div class="text-xs font-medium">
|
<div class="text-xs font-medium">
|
||||||
@ -25,6 +26,46 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Runners + Outs Column -->
|
||||||
|
<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) -->
|
||||||
|
<div
|
||||||
|
class="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 transition-all"
|
||||||
|
:class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 1st Base (Right) -->
|
||||||
|
<div
|
||||||
|
class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
|
||||||
|
:class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 3rd Base (Left) -->
|
||||||
|
<div
|
||||||
|
class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
|
||||||
|
:class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Outs -->
|
||||||
|
<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"
|
||||||
|
:key="i"
|
||||||
|
class="w-3 h-3 rounded-full transition-all"
|
||||||
|
:class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Home Team -->
|
<!-- Home Team -->
|
||||||
@ -33,49 +74,6 @@
|
|||||||
<div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
|
<div class="text-4xl font-bold tabular-nums">{{ homeScore }}</div>
|
||||||
</div>
|
</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 items-center justify-center">
|
|
||||||
<div class="relative w-11 h-11">
|
|
||||||
<!-- 2nd Base (Top) -->
|
|
||||||
<div
|
|
||||||
class="absolute top-0.5 left-1/2 -translate-x-1/2 w-5 h-5 rotate-45 transition-all"
|
|
||||||
:class="runners.second ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 1st Base (Right) -->
|
|
||||||
<div
|
|
||||||
class="absolute top-[60%] -right-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
|
|
||||||
:class="runners.first ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 3rd Base (Left) -->
|
|
||||||
<div
|
|
||||||
class="absolute top-[60%] -left-1.5 -translate-y-1/2 w-5 h-5 rotate-45 transition-all"
|
|
||||||
:class="runners.third ? 'bg-yellow-400 shadow-lg shadow-yellow-500/50' : 'bg-white/20'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Outs -->
|
|
||||||
<div class="bg-white/10 backdrop-blur rounded-lg px-3 py-1.5">
|
|
||||||
<div class="flex items-center justify-center gap-1.5">
|
|
||||||
<div
|
|
||||||
v-for="i in 3"
|
|
||||||
:key="i"
|
|
||||||
class="w-3 h-3 rounded-full transition-all"
|
|
||||||
:class="i <= outs ? 'bg-red-400 shadow-lg shadow-red-500/50' : 'bg-white/30'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desktop Layout (lg and up) -->
|
<!-- Desktop Layout (lg and up) -->
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user