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/unsorted.html
+19 -13
View File
@@ -164,14 +164,14 @@
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 10px;
padding: 5px 8px;
border-radius: var(--radius);
background: var(--bg-tertiary);
margin-bottom: 5px;
background: none;
margin-bottom: 0;
cursor: pointer;
}
.curate-row:hover {
background: var(--bg-tertiary-hover);
background: var(--bg-tertiary);
}
.curate-row.is-hidden {
opacity: 0.55;
@@ -188,15 +188,24 @@
text-overflow: ellipsis;
white-space: nowrap;
}
/* Leading chevron doubles as the expand affordance (matches the
course tree's leaner style - see _course_tree.html) and rotates
via :has() rather than any JS touching it directly; toggling is
just add/remove of one class on .curate-children. */
.curate-toggle {
font-size: 1.1em;
width: 18px;
text-align: center;
display: inline-block;
width: 12px;
flex-shrink: 0;
color: var(--accent);
font-size: 0.85em;
transition: transform 0.15s ease;
}
.curate-row:has(+ .curate-children.expanded) .curate-toggle {
transform: rotate(90deg);
}
.curate-children {
margin-left: 22px;
margin-top: 4px;
margin-left: 16px;
margin-top: 1px;
display: none;
}
.curate-children.expanded {
@@ -1456,7 +1465,7 @@
<div class="curate-row ${hiddenClass}" onclick="toggleCurateDir(this, '${safePath}')">
${checkbox}
<div class="curate-row-name">
<span class="curate-toggle">▶</span>
<span class="curate-toggle">▸</span>
<span>${icon}</span>
<span class="name">${escapeHtml(item.name)}</span>
</div>
@@ -1477,16 +1486,13 @@
function toggleCurateDir(rowEl, path) {
const content = rowEl.nextElementSibling;
const toggleIcon = rowEl.querySelector('.curate-toggle');
if (!content || !content.classList.contains('curate-children')) return;
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
if (toggleIcon) toggleIcon.textContent = '▶';
return;
}
content.classList.add('expanded');
if (toggleIcon) toggleIcon.textContent = '▼';
if (content.dataset.loaded === 'true') return;
content.innerHTML = '<div class="curate-empty-hint">Loading...</div>';