CLAUDE: Add responsive layout - stack pitcher/batter on mobile with pitcher on top
This commit is contained in:
parent
45098955f1
commit
05d34f5b4f
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="current-situation">
|
<div class="current-situation">
|
||||||
<!-- Side-by-Side Card Layout -->
|
<!-- Side-by-Side Card Layout (stacked on mobile) -->
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<!-- Current Batter Card (LEFT) -->
|
<!-- Current Batter Card (LEFT on desktop, BOTTOM on mobile) -->
|
||||||
<button
|
<button
|
||||||
v-if="currentBatter"
|
v-if="currentBatter"
|
||||||
:class="[
|
:class="[
|
||||||
'player-card batter-card card-transition',
|
'player-card batter-card card-transition order-2 md:order-1',
|
||||||
batterCardClasses
|
batterCardClasses
|
||||||
]"
|
]"
|
||||||
@click="openPlayerCard('batter')"
|
@click="openPlayerCard('batter')"
|
||||||
@ -34,11 +34,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Current Pitcher Card (RIGHT) -->
|
<!-- Current Pitcher Card (RIGHT on desktop, TOP on mobile) -->
|
||||||
<button
|
<button
|
||||||
v-if="currentPitcher"
|
v-if="currentPitcher"
|
||||||
:class="[
|
:class="[
|
||||||
'player-card pitcher-card card-transition',
|
'player-card pitcher-card card-transition order-1 md:order-2',
|
||||||
pitcherCardClasses
|
pitcherCardClasses
|
||||||
]"
|
]"
|
||||||
@click="openPlayerCard('pitcher')"
|
@click="openPlayerCard('pitcher')"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user