diff --git a/CHANGELOG.md b/CHANGELOG.md index 329b097..a5cb3e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,4 @@ +2026-08-26 14:13 UTC — Header/footer polish, fix dead link, add focus rings 2026-08-26 13:41 UTC — Move sidebar left, add collapse toggle and remembered sections 2026-08-26 13:17 UTC — Add hover tooltips for truncated sidebar titles 2026-08-26 13:12 UTC — Add course outline sidebar to the lesson page diff --git a/README.md b/README.md index 0584de0..e36bfd8 100644 --- a/README.md +++ b/README.md @@ -221,6 +221,11 @@ silently stay blank instead of erroring. - Grid view shows a small progress ring in the corner of each course's thumbnail (a checkmark once complete) instead of a separate bar, so completion reads at a glance without switching to list view +- Interface polish: a shorter header (matching every other page instead of + standing out taller), Files moved before Settings in the bottom nav, a + visible focus ring for keyboard navigation, and a redundant course-name + badge removed from the header (the course name is already the page's own + heading right below it) **Playback & progress** - Video/audio player with resize, playback-speed presets, and resume-from- diff --git a/VERSION b/VERSION index 1f3250b..7550b9c 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2026-08-26 13:41 UTC — move sidebar left, add collapse toggle and remembered sections +2026-08-26 14:13 UTC — header/footer polish, fix dead link, add focus rings diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html index e7ec574..cd6b38c 100644 --- a/templates/course_dashboard.html +++ b/templates/course_dashboard.html @@ -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; + } @@ -1017,9 +1012,7 @@

Your self-hosted course library

- {% if course %} -
{{ course.name }}
- {% elif library_stats and library_stats.total_courses %} + {% if library_stats and library_stats.total_courses %} {{ icons.icon('dice', 20) }} {% endif %} @@ -1038,7 +1031,7 @@
-
+

{{ course.name }}

{% if resume_lesson %} ▶ Resume: {{ resume_lesson.title }} @@ -1320,12 +1313,12 @@ {{ icons.icon('help', 20) }}Help - - {{ icons.icon('settings', 20) }}Settings - {{ icons.icon('folder', 20) }}Files + + {{ icons.icon('settings', 20) }}Settings +
diff --git a/templates/help.html b/templates/help.html index c44e52a..4340ffa 100644 --- a/templates/help.html +++ b/templates/help.html @@ -139,6 +139,13 @@ .card li { padding: 6px 0; } + /* Visible keyboard-focus ring - see course_dashboard.html for why + :focus-visible (keyboard/switch only, not mouse clicks). */ + 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; + } @@ -239,12 +246,12 @@ {{ icons.icon('help', 20) }}Help - - {{ icons.icon('settings', 20) }}Settings - {{ icons.icon('folder', 20) }}Files + + {{ icons.icon('settings', 20) }}Settings + diff --git a/templates/lesson_view.html b/templates/lesson_view.html index a98ff3d..f9ef69e 100644 --- a/templates/lesson_view.html +++ b/templates/lesson_view.html @@ -706,6 +706,13 @@ text-decoration: none; color: inherit; } + /* Visible keyboard-focus ring - see course_dashboard.html for why + :focus-visible (keyboard/switch only, not mouse clicks). */ + 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; + } diff --git a/templates/notes_hub.html b/templates/notes_hub.html index 164f874..9fbd9bf 100644 --- a/templates/notes_hub.html +++ b/templates/notes_hub.html @@ -218,6 +218,13 @@ background: var(--bg-tertiary); text-decoration: underline; } + /* Visible keyboard-focus ring - see course_dashboard.html for why + :focus-visible (keyboard/switch only, not mouse clicks). */ + 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; + } @@ -279,12 +286,12 @@ {{ icons.icon('help', 20) }}Help - - {{ icons.icon('settings', 20) }}Settings - {{ icons.icon('folder', 20) }}Files + + {{ icons.icon('settings', 20) }}Settings + diff --git a/templates/unsorted.html b/templates/unsorted.html index 576179b..f0d1807 100644 --- a/templates/unsorted.html +++ b/templates/unsorted.html @@ -553,6 +553,13 @@ .tab-item.active { color: var(--accent); } + /* Visible keyboard-focus ring - see course_dashboard.html for why + :focus-visible (keyboard/switch only, not mouse clicks). */ + 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; + } @@ -709,12 +716,12 @@ {{ icons.icon('help', 20) }}Help - - {{ icons.icon('settings', 20) }}Settings - {{ icons.icon('folder', 20) }}Files + + {{ icons.icon('settings', 20) }}Settings +