josh/NHL-Scoreboard
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add 10 UX improvements from interface review
CI / Lint (push) Failing after 10s
Details
CI / Test (push) Has been skipped
Details
CI / Build & Push (push) Has been skipped
Details

Browse Source 
- Stale data banner after 3 consecutive fetch failures, auto-clears on recovery
- Date navigation with left/right arrows (Yesterday/Today/Tomorrow labels),
  fetches from NHL API for non-today dates, disables auto-refresh on history
- Empty state message when no games are scheduled
- Series detail page auto-refreshes every 30s when a game is live
- Notification permission deferred until a playoff OT actually occurs
- Scroll position saved/restored when navigating to/from series detail
- Team records rendered with better contrast and tabular nums
- Active bracket round highlighted with gold heading + underline,
  completed rounds dimmed more aggressively, mobile accordion auto-opens
  current round
- Browser tab title shows live game count (e.g. "NHL Scoreboard (3 Live)")
- Service worker update shows a dismissable toast instead of force-reloading

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-04-23 20:22:03 -04:00
parent 58b27ddd20
commit 2da60e27ae
8 changed files with 313 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+10
View File
@@ -15,6 +15,11 @@
<body>
<header>
<span class="header-title">NHL Scoreboard</span>
<nav class="date-nav" aria-label="Date navigation">
<button id="date-prev" class="date-btn" aria-label="Previous day">&larr;</button>
<span id="date-label" class="date-label"></span>
<button id="date-next" class="date-btn" aria-label="Next day">&rarr;</button>
</nav>
</header>
<section id="playoff-banner" class="playoff-banner hidden" aria-hidden="true">
<a class="banner-main" href="/bracket" aria-label="View the playoff bracket">
@@ -45,7 +50,12 @@
</div>
</a>
</section>
<div id="stale-banner" class="stale-banner hidden">Connection lost &mdash; scores may be outdated</div>
<main>
<div id="empty-state" class="empty-state hidden">
<p class="empty-state-heading">No games scheduled today</p>
<p class="empty-state-sub">Check back tomorrow</p>
</div>
<section id="pinned-section" class="section pinned-section hidden">
<h2 class="section-heading section-heading-gold">Spotlight &middot; Game 7</h2>
<div id="pinned-games-section" class="games-grid"></div>