Modernize UI design with new color system, typography and layout
- 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
@@ -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>
|
||||
<% } %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
<% } %>
|
||||
<% } %>
|
||||
Reference in New Issue
Block a user