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

Modernize UI design with new color system, typography and layout

Browse Source 
- Add sticky dark header with nav replacing inline text links
- Introduce CSS custom properties design system (colors, spacing, shadows)
- Use DM Sans + JetBrains Mono fonts replacing Arial
- Modernize tables with uppercase headers and subtle hover states
- Add gradient fill and rounded line to rating chart
- Unify card sections across players and courses pages
- Add backdrop blur to modals
- Clean up inline styles to use CSS variables
This commit is contained in:
Samuel Enocsson
2026-02-19 09:11:52 +01:00
parent 2f73dddbd8
commit 371a398446
10 changed files with 777 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/pages/courses.ejs
+19 -18
View File
@@ -1,21 +1,22 @@
<% var body = `
<div class="search-container">
<input
type="text"
class="search-input"
id="course-search"
name="q"
placeholder="Search courses by name or city..."
hx-get="/partials/course-table"
hx-trigger="input changed delay:300ms, search"
hx-target="#courses-table"
/>
</div>
<div class="controls">
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
<i class="fas fa-sync-alt"></i> Scrape Courses
</button>
<div class="card-section">
<h3>Find Courses</h3>
<div class="card-section-form">
<input
type="text"
class="input"
id="course-search"
name="q"
placeholder="Search courses by name or city..."
hx-get="/partials/course-table"
hx-trigger="input changed delay:300ms, search"
hx-target="#courses-table"
style="width: 340px;"
/>
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
<i class="fas fa-sync-alt"></i> Scrape Courses
</button>
</div>
</div>
<div id="loading" class="loading" style="display: none;">Loading courses...</div>
@@ -29,4 +30,4 @@
cssFiles: ['courses.css'],
jsFiles: ['courses.js'],
body: body
}) %>
}) %>
views/pages/index.ejs
+7 -6
View File
@@ -1,23 +1,24 @@
<% var body = `
<!-- Add Player Section -->
<div class="add-player-section">
<div class="card-section">
<h3>Add Yourself to Tracked Players</h3>
<div class="add-player-form">
<div class="card-section-form">
<input
type="number"
id="pdga-number-input"
class="pdga-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
</button>
</div>
</div>
<div style="position: absolute; top: 10px; right: 15px;">
<a href="#" onclick="loadAllPlayers(); return false;" style="color: #007bff; font-size: 11px; text-decoration: none; margin-right: 10px;" title="Load all player data" id="load-all-btn">Load All</a>
<a href="#" onclick="clearCache(); return false;" style="color: #ccc; font-size: 12px; text-decoration: none; opacity: 0.3;" title="Clear cache"><i class="fas fa-cog"></i></a>
<div style="display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 16px;">
<a href="#" onclick="loadAllPlayers(); return false;" style="color: var(--accent); font-size: 12px; text-decoration: none;" title="Load all player data" id="load-all-btn">Load All</a>
<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>
</div>
<div id="loading" class="loading" style="display: none;">Loading ratings...</div>
<div id="progress-section" style="display: none;">
views/partials/course-layouts.ejs
+7 -7
View File
@@ -20,14 +20,14 @@
}
});
%>
<h4 style="margin-top: 0;">Layouts:</h4>
<h4>Layouts:</h4>
<% if (activeLayouts.length > 0) { %>
<% activeLayouts.forEach(function(layout) {
var ratingDisplay = layout.mean_rating ?
'<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
'<span style="color: var(--green); font-weight: 700; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
var dateDisplay = layout.last_played ?
'<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' : '';
'<span style="color: var(--text-muted); font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' : '';
%>
<div class="layout-item">
<div>
@@ -48,10 +48,10 @@
<div class="accordion-content" id="accordion-<%= courseId %>">
<% inactiveLayouts.forEach(function(layout) {
var ratingDisplay = layout.mean_rating ?
'<span style="color: #28a745; font-weight: bold; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
'<span style="color: var(--green); font-weight: 700; margin-left: 10px;">Rating: ' + layout.mean_rating + '</span>' : '';
var dateDisplay = layout.last_played ?
'<span style="color: #6c757d; font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' :
'<span style="color: #dc3545; font-size: 12px; margin-left: 10px;">Never played</span>';
'<span style="color: var(--text-muted); font-size: 12px; margin-left: 10px;">Last played: ' + new Date(layout.last_played).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) + '</span>' :
'<span style="color: var(--red); font-size: 12px; margin-left: 10px;">Never played</span>';
%>
<div class="layout-item inactive">
<div>
@@ -68,4 +68,4 @@
<% if (activeLayouts.length === 0 && inactiveLayouts.length === 0) { %>
<div class="no-layouts">No layouts found. Click the refresh icon to scrape layouts.</div>
<% } %>
<% } %>
<% } %>
views/partials/layout.ejs
+10 -2
View File
@@ -14,9 +14,17 @@
<% } %>
</head>
<body>
<header class="app-header">
<div class="header-inner">
<a href="/" class="app-logo">
<span class="logo-icon"><i class="fas fa-compact-disc"></i></span>
PDGA Ratings
</a>
<%- include('../partials/nav') %>
</div>
</header>
<div class="container">
<h1><%= heading %></h1>
<%- include('../partials/nav') %>
<%- body %>
</div>
views/partials/nav.ejs
+4 -4
View File
@@ -1,4 +1,4 @@
<div style="text-align: center; margin-bottom: 20px;">
<a href="/" style="margin: 0 15px; color: <%= activePage === 'players' ? '#333' : '#007bff' %>; text-decoration: none; font-weight: bold;">Player Ratings</a>
<a href="/courses" style="margin: 0 15px; color: <%= activePage === 'courses' ? '#333' : '#007bff' %>; text-decoration: none; font-weight: bold;">Courses</a>
</div>
<nav class="app-nav">
<a href="/" class="<%= activePage === 'players' ? 'active' : '' %>">Players</a>
<a href="/courses" class="<%= activePage === 'courses' ? 'active' : '' %>">Courses</a>
</nav>
views/partials/ratings-table.ejs
+5 -5
View File
@@ -1,5 +1,5 @@
<% if (ratings.length === 0) { %>
<p>No ratings found.</p>
<p style="text-align: center; color: var(--text-muted); padding: 40px 0;">No ratings found.</p>
<% } else { %>
<table>
<thead>
@@ -24,12 +24,12 @@
<td class="mobile-hide"><%= index + 1 %></td>
<td class="player-name">
<a href="https://www.pdga.com/player/<%= player.pdgaNumber %>" target="_blank" onclick="event.stopPropagation()"><%= player.name %></a>
<div class="mobile-only pdga-number" style="font-size: 11px; color: #999; margin-top: 2px;">PDGA #<%= player.pdgaNumber %></div>
<div class="mobile-only pdga-number" style="font-size: 11px; margin-top: 2px;">PDGA #<%= player.pdgaNumber %></div>
</td>
<td class="pdga-number mobile-hide">#<%= player.pdgaNumber %></td>
<td class="rating">
<div class="refresh-section">
<span class="rating-value" data-rating="<%= player.rating || '' %>" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%- player.rating || '<span style="color: #999; font-style: italic;">Click refresh</span>' %></span>
<span class="rating-value" data-rating="<%= player.rating || '' %>" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%- player.rating || '<span style="color: var(--text-muted); font-style: italic;">Click refresh</span>' %></span>
<i class="fas fa-sync-alt refresh-icon" onclick="refreshPlayer(<%= player.pdgaNumber %>)" title="Refresh player data"></i>
</div>
<div class="mobile-only rating-change <%= ratingChangeClass %>" style="font-size: 11px; margin-top: 2px;"><%= ratingChangeText %></div>
@@ -39,7 +39,7 @@
<td class="predicted-rating mobile-hide" id="predicted-<%= player.pdgaNumber %>">
<div class="refresh-section">
<span class="predicted-value" data-stddev="<%= player.stdDev || '' %>" data-pdga="<%= player.pdgaNumber %>" style="cursor: help;"><%= player.predictedRating || 'N/A' %></span>
<i class="fas fa-question-circle debug-icon" onclick="showDebugInfo(<%= player.pdgaNumber %>)" title="Show calculation details" style="margin-left: 5px; color: #6c757d; cursor: pointer; opacity: 0.6;"></i>
<i class="fas fa-question-circle debug-icon" onclick="showDebugInfo(<%= player.pdgaNumber %>)" title="Show calculation details" style="margin-left: 5px; color: var(--text-muted); cursor: pointer; opacity: 0.6;"></i>
<i class="fas fa-sync-alt refresh-icon" onclick="refreshRoundHistory(<%= player.pdgaNumber %>)" title="Refresh prediction data"></i>
</div>
<div class="std-dev-tooltip" id="tooltip-stddev-<%= player.pdgaNumber %>"></div>
@@ -61,4 +61,4 @@
<% }); %>
</tbody>
</table>
<% } %>
<% } %>