shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: design-fidelity pass on players page

Browse Source
This commit is contained in:
Samuel Enocsson
2026-05-21 15:15:29 +02:00
parent 686d7ca00c
commit 16d375ae10
7 changed files with 463 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/pages/index.ejs
+40 -28
View File
@@ -1,21 +1,27 @@
<% var body = `
<!-- Add Player Section -->
<div class="card-section">
<h3>Add Yourself to Tracked Players</h3>
<div class="card-section-form">
<input
type="number"
id="pdga-number-input"
class="input"
placeholder="Enter your PDGA number"
min="1"
style="width: 240px;"
/>
<button class="btn btn-add" onclick="searchAndAddPlayer()">
<i class="fas fa-user-plus"></i> Add Player
<!-- Add Player Card -->
<form class="add-bar" onsubmit="searchAndAddPlayer(event)">
<div class="add-bar-label">
<span class="add-bar-kicker">Track a player</span>
<span class="add-bar-hint">Add a PDGA number to start following their rating.</span>
</div>
<div class="add-bar-controls">
<div class="input-wrap">
<span class="input-prefix">#</span>
<input
type="text"
id="pdga-number-input"
inputmode="numeric"
placeholder="277890"
aria-label="PDGA number"
oninput="this.value = this.value.replace(/[^0-9]/g, '')"
/>
</div>
<button type="submit" class="btn-primary">
<i class="fas fa-user-plus"></i> Add player
</button>
</div>
</div>
</form>
<!-- KPI Summary Tiles -->
<section class="kpi-strip" aria-label="Tracker overview">
@@ -53,19 +59,25 @@
</article>
</section>
<div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
<a href="#" onclick="clearCache(); return false;" style="color: var(--text-muted); font-size: 12px; text-decoration: none; opacity: 0.4;" title="Clear cache"><i class="fas fa-cog"></i></a>
<!-- Players Table Card -->
<div class="table-card">
<div class="table-toolbar">
<span class="kicker">TRACKED PLAYERS</span>
<div class="toolbar-actions">
<button id="trendchart-toggle" class="pill-toggle" type="button" aria-pressed="false">
<svg class="pill-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 17l5-6 4 4 4-7 5 6" />
</svg>
<span class="pill-label">Trend chart</span>
<span class="pill-dot"></span>
</button>
</div>
</div>
<div id="ratings-table" hx-get="/partials/ratings-table" hx-trigger="load"></div>
</div>
<div class="table-toolbar">
<button id="trendchart-toggle" class="pill-toggle" type="button" aria-pressed="false">
<svg class="pill-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
<polyline points="1,9 4,5 7,7 11,2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="pill-label">Trend chart</span>
<span class="pill-dot"></span>
</button>
</div>
<div id="ratings-table" hx-get="/partials/ratings-table" hx-trigger="load"></div>
<!-- Footnote -->
<p class="footnote">Unofficial PDGA rating tracker. Ratings scraped from pdga.com on each refresh.</p>
`; %>
<% var modals = `
@@ -100,4 +112,4 @@
initScript: 'setupTooltipsAfterSwap();',
body: body,
modals: modals
}) %>
}) %>