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

Redesign expandable lists to a leaner, flat style

Browse Source 
Course tree (lesson-page sidebar + dashboard's loaded-course view) and
File Management's Manage Library browser both move from boxed,
bordered rows to a flat list: no per-row background/border, a small
leading chevron that doubles as the expand affordance instead of a
separate right-edge button, indentation for hierarchy. The chevron's
rotation is pure CSS (:has(+ .tree-content.expanded) / :has(+
.curate-children.expanded)) rather than JS swapping glyph text, which
also let a fair amount of now-redundant JS come out.

The course tree's new styles are scoped under .tree-container (course
dashboard) and .lesson-sidebar (lesson page) so they don't leak into
the Library folder browser and other rows that reuse the same base
.tree-header/.lesson-item/etc. class names elsewhere in
course_dashboard.html - confirmed those are visually untouched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
rmsitz
2026-08-26 10:45:38 -04:00
co-authored by Claude Sonnet 5
parent 016acacdb5
commit bf0a02d008
7 changed files with 197 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_course_tree.html
+27 -35
View File
@@ -8,6 +8,13 @@
defined by whichever page imports this - see course_dashboard.html
for the canonical versions.
Flat list styling (no per-row box/border), a leading chevron that
doubles as the expand affordance instead of a separate right-edge
button, and indentation for hierarchy - the chevron's rotation is
driven purely by CSS (:has(+ .tree-content.expanded)), so toggling
is just adding/removing one class on .tree-content; nothing in JS
ever touches the icon directly.
`current_lesson` (a Lesson object, not a path string) is optional -
when given, the matching row gets a `current` class instead of being
a plain click target, and stays unclickable since you're already
@@ -20,16 +27,11 @@
{% set stats = section_stats(node) %}
<div class="tree-item">
<div class="tree-header directory" onclick="toggleTree(this)">
<div class="tree-title">
<span class="tree-icon">{{ icons.icon('folder', 16) }}</span>
<span class="tree-name" title="{{ node.name }}">{{ node.name }}</span>
<span class="tree-stats">
{% if stats.total_lessons %}{{ stats.completed_lessons }}/{{ stats.total_lessons }} watched{% else %}Empty{% endif %}
</span>
</div>
{% if node.children or node.lessons %}
<button class="tree-toggle">▶</button>
{% endif %}
<span class="tree-toggle-icon">▸</span>
<span class="tree-name" title="{{ node.name }}">{{ node.name }}</span>
<span class="tree-stats">
{% if stats.total_lessons %}{{ stats.completed_lessons }}/{{ stats.total_lessons }}{% else %}Empty{% endif %}
</span>
</div>
{% if node.children or node.lessons %}
@@ -44,31 +46,21 @@
{% set is_current = current_lesson and lesson.path == current_lesson.path %}
<div class="lesson-item {% if is_current %}current{% elif lesson.completed %}completed{% elif percent_watched %}in-progress{% endif %}"
{% if not is_current %}onclick="window.location.href='/lesson/{{ lesson_relative_path }}/{{ lesson.title|replace(' ', '_') }}'"{% endif %}>
<div class="lesson-title">
<span class="lesson-icon">
{% if lesson.lesson_type == 'video' %}{{ icons.icon('video', 16) }}
{% elif lesson.lesson_type == 'audio' %}{{ icons.icon('music', 16) }}
{% elif lesson.lesson_type == 'quiz' %}{{ icons.icon('clipboard', 16) }}
{% elif lesson.lesson_type == 'mixed' %}{{ icons.icon('package', 16) }}
{% else %}{{ icons.icon('file-text', 16) }}{% endif %}
</span>
<span class="lesson-name" title="{{ lesson.title }}">{{ lesson.title }}</span>
</div>
<div class="lesson-meta">
<span class="lesson-type {{ lesson.lesson_type }}">{{ lesson.lesson_type|title }}</span>
{% if lesson.duration_seconds and lesson.duration_seconds >= 60 %}
<span class="lesson-duration">{{ lesson.duration_seconds|format_duration }}</span>
{% endif %}
{% if lesson.completed %}
<span class="status-icon completed">{{ icons.icon('check', 14) }}</span>
{% elif percent_watched %}
<span class="watched-badge">{{ percent_watched }}% watched</span>
{% else %}
<span class="status-icon pending">{{ icons.icon('circle', 14) }}</span>
{% endif %}
</div>
{% if percent_watched %}
<div class="lesson-progress-track"><div class="lesson-progress-fill" style="width: {{ percent_watched }}%;"></div></div>
<span class="lesson-icon">
{% if lesson.lesson_type == 'video' %}{{ icons.icon('video', 15) }}
{% elif lesson.lesson_type == 'audio' %}{{ icons.icon('music', 15) }}
{% elif lesson.lesson_type == 'quiz' %}{{ icons.icon('clipboard', 15) }}
{% elif lesson.lesson_type == 'mixed' %}{{ icons.icon('package', 15) }}
{% else %}{{ icons.icon('file-text', 15) }}{% endif %}
</span>
<span class="lesson-name" title="{{ lesson.title }}">{{ lesson.title }}</span>
{% if lesson.duration_seconds and lesson.duration_seconds >= 60 %}
<span class="lesson-duration">{{ lesson.duration_seconds|format_duration }}</span>
{% endif %}
{% if lesson.completed %}
<span class="status-icon completed">{{ icons.icon('check', 13) }}</span>
{% elif percent_watched %}
<span class="watched-badge">{{ percent_watched }}%</span>
{% endif %}
</div>
{% endfor %}