polish: mobile view layout and usability improvements
All checks were successful
Build and Deploy / Build & Push (push) Successful in 53s
All checks were successful
Build and Deploy / Build & Push (push) Successful in 53s
Header: - Hide "X of Y parks open this week" badge on mobile (hidden sm:inline-flex) — title + Coaster Mode button fit cleanly on a 390px screen WeekNav: - Arrow button padding 6px 14px → 10px 16px, minWidth: 44px for proper touch targets (Apple HIG recommends 44px minimum) - Date label minWidth 200px → 140px, prevents crowding on small screens ParkCard: - Name container: flex: 1, minWidth: 0 so long park names don't push the status badge off-screen; name wraps naturally instead of overflowing - Timezone abbreviation: opacity: 0.6 → color: var(--color-text-dim), semantic dimming instead of opacity for better accessibility - Passholder label: 0.58rem → 0.65rem (was below WCAG minimum) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -118,7 +118,7 @@ export function HomePageClient({
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<span style={{
|
<span className="hidden sm:inline-flex" style={{
|
||||||
background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
|
background: visibleParks.length > 0 ? "var(--color-open-bg)" : "var(--color-surface)",
|
||||||
border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
|
border: `1px solid ${visibleParks.length > 0 ? "var(--color-open-border)" : "var(--color-border)"}`,
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
@@ -126,6 +126,8 @@ export function HomePageClient({
|
|||||||
fontSize: "0.78rem",
|
fontSize: "0.78rem",
|
||||||
color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
|
color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
|
alignItems: "center",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
}}>
|
}}>
|
||||||
{visibleParks.length} of {PARKS.length} parks open this week
|
{visibleParks.length} of {PARKS.length} parks open this week
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
|
|||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
gap: 12,
|
gap: 12,
|
||||||
}}>
|
}}>
|
||||||
<div>
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
fontSize: "0.95rem",
|
fontSize: "0.95rem",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
@@ -137,10 +137,10 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
|
|||||||
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
|
||||||
{isPH && (
|
{isPH && (
|
||||||
<span style={{
|
<span style={{
|
||||||
fontSize: "0.58rem",
|
fontSize: "0.65rem",
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
color: "var(--color-ph-label)",
|
color: "var(--color-ph-label)",
|
||||||
letterSpacing: "0.05em",
|
letterSpacing: "0.04em",
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
}}>
|
}}>
|
||||||
Passholder
|
Passholder
|
||||||
@@ -156,7 +156,7 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
|
|||||||
: "var(--color-open-hours)",
|
: "var(--color-open-hours)",
|
||||||
}}>
|
}}>
|
||||||
{dayData.hoursLabel}{" "}
|
{dayData.hoursLabel}{" "}
|
||||||
<span style={{ fontSize: "0.68rem", fontWeight: 400, opacity: 0.6 }}>
|
<span style={{ fontSize: "0.68rem", fontWeight: 400, color: "var(--color-text-dim)" }}>
|
||||||
{tzAbbr}
|
{tzAbbr}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
color: "var(--color-text)",
|
color: "var(--color-text)",
|
||||||
minWidth: 200,
|
minWidth: 140,
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
letterSpacing: "-0.01em",
|
letterSpacing: "-0.01em",
|
||||||
fontVariantNumeric: "tabular-nums",
|
fontVariantNumeric: "tabular-nums",
|
||||||
@@ -97,8 +97,8 @@ export function WeekNav({ weekStart, weekDates, isCurrentWeek }: WeekNavProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const navBtnStyle: React.CSSProperties = {
|
const navBtnStyle: React.CSSProperties = {
|
||||||
padding: "6px 14px",
|
padding: "10px 16px",
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: "1px solid var(--color-border)",
|
border: "1px solid var(--color-border)",
|
||||||
background: "var(--color-surface)",
|
background: "var(--color-surface)",
|
||||||
color: "var(--color-text-muted)",
|
color: "var(--color-text-muted)",
|
||||||
@@ -106,11 +106,13 @@ const navBtnStyle: React.CSSProperties = {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
||||||
|
minWidth: 44,
|
||||||
|
textAlign: "center",
|
||||||
};
|
};
|
||||||
|
|
||||||
const navBtnHover: React.CSSProperties = {
|
const navBtnHover: React.CSSProperties = {
|
||||||
padding: "6px 14px",
|
padding: "10px 16px",
|
||||||
borderRadius: 6,
|
borderRadius: 8,
|
||||||
border: "1px solid var(--color-text-dim)",
|
border: "1px solid var(--color-text-dim)",
|
||||||
background: "var(--color-surface-2)",
|
background: "var(--color-surface-2)",
|
||||||
color: "var(--color-text-secondary)",
|
color: "var(--color-text-secondary)",
|
||||||
@@ -118,6 +120,8 @@ const navBtnHover: React.CSSProperties = {
|
|||||||
fontSize: "1rem",
|
fontSize: "1rem",
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
transition: "background 150ms ease, border-color 150ms ease, color 150ms ease",
|
||||||
|
minWidth: 44,
|
||||||
|
textAlign: "center",
|
||||||
};
|
};
|
||||||
|
|
||||||
const todayBtnStyle: React.CSSProperties = {
|
const todayBtnStyle: React.CSSProperties = {
|
||||||
|
|||||||
Reference in New Issue
Block a user