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

Header/footer polish, fix dead link, add focus rings

Browse Source 
- Dashboard header shortened to match every other page (was notably
  taller than the rest).
- Files moved before Settings in the bottom nav.
- Removed the header's course-name badge - purely redundant with the
  page's own heading directly below it.
- Fixed a dead link: "Progress" pointed to #stats, but no element
  with that id existed anywhere on the page.
- Added a visible :focus-visible ring across all pages - tabbing
  through the site previously gave no indication of what was focused.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-26 10:14:02 -04:00
co-authored by Claude Sonnet 5
parent becbb0b419
commit 9fb193a07e
9 changed files with 69 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/course_dashboard.html
+15 -22
View File
@@ -84,8 +84,7 @@
.app-header {
background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
padding: 28px 0;
margin-bottom: 30px;
padding: 18px 0;
border-bottom: 3px solid var(--accent);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
@@ -124,19 +123,6 @@
margin-top: 2px;
}
.header-course-badge {
background: var(--bg-primary);
border: 1px solid var(--accent);
color: var(--text-primary);
padding: 8px 16px;
border-radius: var(--radius);
font-size: 0.9em;
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-icon-btn {
display: flex;
align-items: center;
@@ -1002,6 +988,15 @@
word-break: break-word;
}
}
/* Visible keyboard-focus ring - buttons/links otherwise give no
indication which element is focused when tabbing through the
page (mouse clicks don't trigger :focus-visible, so this is
keyboard/switch-navigation only, not a click-ring). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
</style>
</head>
<body>
@@ -1017,9 +1012,7 @@
<p class="tagline">Your self-hosted course library</p>
</div>
</a>
{% if course %}
<div class="header-course-badge">{{ course.name }}</div>
{% elif library_stats and library_stats.total_courses %}
{% if library_stats and library_stats.total_courses %}
<a href="/random-pick" class="header-icon-btn" title="Surprise Me - random incomplete course">{{ icons.icon('dice', 20) }}</a>
{% endif %}
</div>
@@ -1038,7 +1031,7 @@
</div>
<div class="container">
<div class="card">
<div class="card" id="stats">
<h2 class="course-name-heading">{{ course.name }}</h2>
{% if resume_lesson %}
<a class="btn resume-btn" href="/lesson/{{ resume_lesson.url }}">▶ Resume: {{ resume_lesson.title }}</a>
@@ -1320,12 +1313,12 @@
<a href="/help" class="tab-item {% if active_tab == 'help' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('help', 20) }}</span><span class="tab-label">Help</span>
</a>
<a href="/settings" class="tab-item {% if active_tab == 'settings' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('settings', 20) }}</span><span class="tab-label">Settings</span>
</a>
<a href="/unsorted" class="tab-item {% if active_tab == 'files' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('folder', 20) }}</span><span class="tab-label">Files</span>
</a>
<a href="/settings" class="tab-item {% if active_tab == 'settings' %}active{% endif %}">
<span class="tab-icon">{{ icons.icon('settings', 20) }}</span><span class="tab-label">Settings</span>
</a>
</nav>
<div id="toast-container" class="toast-container"></div>