rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish dashboard: consistent icon set, flatter cards, merged activity card

Browse Source 
Replace card-header emoji with a matching stroke-style SVG icon set that
inherits theme color via currentColor. Drop the accent-stripe border from
every card and keep it only on the Your Courses card, the one primary
action. Merge Continue Watching and Recently Viewed into a single
true-recency list so an old completed item can no longer outrank a newer
in-progress one across two separately-capped lists.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-23 21:11:36 -04:00
co-authored by Claude Sonnet 5
parent daec0742ec
commit 3039d1206d
2 changed files with 23 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/course_dashboard.html
+22 -18
View File
@@ -206,6 +206,12 @@
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
}
#library-card {
/* the one card that's a primary action (browse/search/load a
course) rather than a passive info/list card - every other
card getting the same accent stripe made nothing stand out */
border-left: 4px solid var(--accent);
}
@@ -380,6 +386,16 @@
transform: rotate(-90deg);
}
.card-header-label {
display: flex;
align-items: center;
gap: 8px;
}
.card-icon {
flex-shrink: 0;
color: var(--text-primary);
}
.card-body {
overflow: hidden;
max-height: 3000px;
@@ -1088,7 +1104,7 @@
<div class="container">
<div class="card" id="library-card">
<h2>Your Courses</h2>
<h2><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="8" height="8" rx="1.5"></rect><rect x="13" y="3" width="8" height="8" rx="1.5"></rect><rect x="3" y="13" width="8" height="8" rx="1.5"></rect><rect x="13" y="13" width="8" height="8" rx="1.5"></rect></svg>Your Courses</span></h2>
<div class="library-toolbar">
<input type="text" id="library-search-input" class="library-search-input"
placeholder="Search courses…" oninput="handleLibrarySearchInput(this.value)">
@@ -1124,7 +1140,7 @@
{% if library_stats and library_stats.total_courses %}
<div class="container">
<div class="card">
<h2 class="collapsible-header" data-card-id="library-stats">📊 Library Stats</h2>
<h2 class="collapsible-header" data-card-id="library-stats"><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="20" x2="6" y2="14"></line><line x1="12" y1="20" x2="12" y2="8"></line><line x1="18" y1="20" x2="18" y2="11"></line></svg>Library Stats</span></h2>
<div class="card-body">
<div class="stats-grid">
<div class="stats-tile">
@@ -1166,7 +1182,7 @@
{% if next_up %}
<div class="container">
<div class="card" id="next-up-card">
<h2 class="collapsible-header" data-card-id="next-up">📌 Next Up</h2>
<h2 class="collapsible-header" data-card-id="next-up"><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="20" y2="6"></line><line x1="8" y1="12" x2="20" y2="12"></line><line x1="8" y1="18" x2="20" y2="18"></line><circle cx="4" cy="6" r="1"></circle><circle cx="4" cy="12" r="1"></circle><circle cx="4" cy="18" r="1"></circle></svg>Next Up</span></h2>
<div class="card-body" id="next-up-list">
{% for item in next_up %}
<div class="lesson-item" data-path="{{ item.path }}">
@@ -1193,7 +1209,7 @@
{% if stale_courses %}
<div class="container">
<div class="card">
<h2 class="collapsible-header" data-card-id="pick-back-up">⏰ Pick Back Up</h2>
<h2 class="collapsible-header" data-card-id="pick-back-up"><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"></path><polyline points="3 4 3 9 8 9"></polyline></svg>Pick Back Up</span></h2>
<div class="card-body">
{% for item in stale_courses %}
{{ render_course_row(item, 'Last touched ' + item.last_touched_display) }}
@@ -1205,7 +1221,7 @@
{% if recently_added %}
<div class="container">
<div class="card">
<h2 class="collapsible-header" data-card-id="recently-added">🆕 Recently Added</h2>
<h2 class="collapsible-header" data-card-id="recently-added"><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>Recently Added</span></h2>
<div class="card-body">
{% for item in recently_added %}
{{ render_course_row(item, item.added_display) }}
@@ -1214,22 +1230,10 @@
</div>
</div>
{% endif %}
{% if continue_watching %}
<div class="container">
<div class="card">
<h2 class="collapsible-header" data-card-id="continue-watching">▶ Continue Watching</h2>
<div class="card-body">
{% for view in continue_watching %}
{{ render_view_row(view) }}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if recent_views %}
<div class="container">
<div class="card">
<h2 class="collapsible-header" data-card-id="recently-viewed">🕐 Recently Viewed</h2>
<h2 class="collapsible-header" data-card-id="recently-viewed"><span class="card-header-label"><svg class="card-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>Recently Viewed</span></h2>
<div class="card-body">
{% for view in recent_views %}
{{ render_view_row(view) }}