josh/SixFlagsSuperCalendar
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: josh:c6c32a168b1e785a17c8782ff6ede2d9b38bb303
Branches Tags
josh:main
...
compare: josh:a84bbcac31e38e5109d5568affa7fdb6fcdbf501
Branches Tags
josh:main

2 Commits
c6c32a168b ... a84bbcac31

Author SHA1 Message Date
Josh Wright
a84bbcac31 polish: taller week calendar cells with more padding around pills
All checks were successful
Build and Deploy / Build & Push (push) Successful in 51s
Details 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-04-05 15:20:41 -04:00
Josh Wright
569d0a41e2 polish: more padding and line spacing in month calendar pills, taller min row 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-04-05 15:19:46 -04:00
3 changed files with 8 additions and 8 deletions
Expand all files Collapse all files

2
app/globals.css
View File

@@ -118,7 +118,7 @@
/* sm+: let rows breathe and grow with their content (cells are wide enough) */ /* sm+: let rows breathe and grow with their content (cells are wide enough) */
@media (min-width: 640px) { @media (min-width: 640px) {
.park-calendar-grid { .park-calendar-grid {
grid-auto-rows: minmax(96px, auto); grid-auto-rows: minmax(108px, auto);
} }
} }

10
components/ParkMonthCalendar.tsx
View File

@@ -203,16 +203,16 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
background: "var(--color-ph-bg)", background: "var(--color-ph-bg)",
border: "1px solid var(--color-ph-border)", border: "1px solid var(--color-ph-border)",
borderRadius: 5, borderRadius: 5,
padding: "5px 6px", padding: "8px 6px",
textAlign: "center", textAlign: "center",
}}> }}>
<div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}> <div style={{ fontSize: "0.6rem", fontWeight: 700, color: "var(--color-ph-label)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
Passholder Passholder
</div> </div>
<div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 3 }}> <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 4 }}>
{dayData.hoursLabel} {dayData.hoursLabel}
</div> </div>
<div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 2, letterSpacing: "0.04em" }}> <div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 3, letterSpacing: "0.04em" }}>
{tzAbbr} {tzAbbr}
</div> </div>
</div> </div>
@@ -221,13 +221,13 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
background: "var(--color-open-bg)", background: "var(--color-open-bg)",
border: "1px solid var(--color-open-border)", border: "1px solid var(--color-open-border)",
borderRadius: 5, borderRadius: 5,
padding: "5px 6px", padding: "8px 6px",
textAlign: "center", textAlign: "center",
}}> }}>
<div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}> <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
{dayData.hoursLabel} {dayData.hoursLabel}
</div> </div>
<div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 3, letterSpacing: "0.04em" }}> <div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 4, letterSpacing: "0.04em" }}>
{tzAbbr} {tzAbbr}
</div> </div>
</div> </div>

4
components/WeekCalendar.tsx
View File

@@ -48,7 +48,7 @@ function DayCell({
verticalAlign: "middle", verticalAlign: "middle",
borderBottom: "1px solid var(--color-border)", borderBottom: "1px solid var(--color-border)",
borderLeft: "1px solid var(--color-border)", borderLeft: "1px solid var(--color-border)",
height: 56, height: 72,
background: isWeekend ? "var(--color-weekend-header)" : "transparent", background: isWeekend ? "var(--color-weekend-header)" : "transparent",
transition: "background 120ms ease", transition: "background 120ms ease",
}; };
@@ -71,7 +71,7 @@ function DayCell({
if (dayData.specialType === "passholder_preview") { if (dayData.specialType === "passholder_preview") {
return ( return (
<td style={{ ...base, padding: 4 }}> <td style={{ ...base, padding: 6 }}>
<div style={{ <div style={{
background: "var(--color-ph-bg)", background: "var(--color-ph-bg)",
border: "1px solid var(--color-ph-border)", border: "1px solid var(--color-ph-border)",