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

Visual polish: theme-aware colors, collapsible cards, skeletons, hover consistency

Browse Source 
Templates only, no backend changes:

- Fixed the real bug: JS-generated status/loading text and a few component
  styles used hardcoded hex (#007acc, #999/#666, #28a745, #ff6b6b) instead
  of the CSS variables the theme system already provides, so they didn't
  track the user's chosen theme/accent - most visible on Light or any named
  theme other than the default. Added --success/--error to all 5 templates'
  :root blocks and replaced every non-:root occurrence. Left the
  .lesson-type badge colors and generic UI chrome grays alone (intentional,
  not theme-dependent). Verified live by switching to Nord and Light themes.
- Dashboard cards (Library Stats, Next Up, Pick Back Up, Recently Added,
  Continue Watching, Recently Viewed) are now collapsible, state remembered
  per device via localStorage - the no-course dashboard had grown to 7
  stacked cards.
- Course page's three action buttons get consistent compact sizing and
  icons instead of a plain stack.
- Library browser and transcript search show shimmering skeleton rows
  instead of bare "Loading..."/"Searching..." text while a fetch is in
  flight.
- Hover treatment made consistent: transcript results get the same lift
  .lesson-item already had, heatmap cells get a GitHub-style hover
  scale-up, and Notes Hub links get a background-chip hover.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-22 19:31:31 -04:00
co-authored by Claude Sonnet 5
parent 0454834e62
commit c871d6efae
6 changed files with 236 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/lesson_view.html
+9 -7
View File
@@ -22,6 +22,8 @@
--font-size-base: 16px;
--container-max-width: 1600px;
--radius: 8px;
--success: #28a745;
--error: #ff6b6b;
}
[data-theme="light"] {
--bg-primary: #f2f2f2;
@@ -364,7 +366,7 @@
<div style="margin-bottom: 20px;">
<h4>{{ text_file.split('/')[-1] }}</h4>
<div class="text-content" id="content-{{ loop.index0 }}">
<div style="text-align: center; color: #666;">Loading content...</div>
<div style="text-align: center; color: var(--text-muted);">Loading content...</div>
</div>
<a href="/files/{{ text_file|replace('\\', '/') }}" class="file-link" target="_blank">
📄 Open {{ text_file.split('/')[-1] }} in new tab
@@ -450,7 +452,7 @@
// fetching them as text would show garbled binary content,
// so just point at the download/open link instead.
contentDiv.innerHTML =
'<div style="color: #999;">Preview isn\'t available for this file type. ' +
'<div style="color: var(--text-muted);">Preview isn\'t available for this file type. ' +
'Use the "Open in new tab" link below to view or download it.</div>';
} else {
// For text files, fetch and display content
@@ -478,9 +480,9 @@
.catch(error => {
console.error('Error loading content:', error);
if (contentDiv) {
contentDiv.innerHTML =
'<div style="color: #ff6b6b;">Error loading content: ' + error.message + '</div>' +
'<div style="color: #999; font-size: 0.9em; margin-top: 10px;">File path: ' + filePath + '</div>';
contentDiv.innerHTML =
'<div style="color: var(--error);">Error loading content: ' + error.message + '</div>' +
'<div style="color: var(--text-muted); font-size: 0.9em; margin-top: 10px;">File path: ' + filePath + '</div>';
}
});
}
@@ -762,7 +764,7 @@
const btn = document.querySelector('button[onclick="markCompleted()"]');
if (btn) {
btn.textContent = 'Completed ✓';
btn.style.background = '#28a745';
btn.style.background = 'var(--success)';
btn.disabled = true;
}
isCompleted = true;
@@ -775,7 +777,7 @@
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? '#28a745' : '#007acc'};
background: ${type === 'success' ? 'var(--success)' : 'var(--accent)'};
color: white;
padding: 15px 20px;
border-radius: 5px;