nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make list/deck group sections collapsible with prominent headers

Browse Source 
Group headers now use a solid tan background, bold uppercase text, and a
▼/▶ arrow indicator so collapsible sections are visually obvious.
Uses native <details>/<summary> elements; ungrouped items show inline
when no named groups exist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-27 12:48:51 -04:00
1 parent 9acd0a792f
commit 24e709e038
2 files changed
+23 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/admin.js
+4 -2
View File
@@ -1324,10 +1324,12 @@ function renderGroupSections(groups, renderItem) {
const ungrouped = groups[''] || [];
let html = '';
for (const g of named) {
html += `<div class="list-group"><div class="list-group-header">${esc(g)}</div>${groups[g].map(renderItem).join('')}</div>`;
html += `<details class="list-group" open><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`;
}
if (ungrouped.length) {
html += `<div class="list-group">${named.length ? '<div class="list-group-header">Ungrouped</div>' : ''}${ungrouped.map(renderItem).join('')}</div>`;
html += named.length
? `<details class="list-group" open><summary class="list-group-header">Ungrouped</summary>${ungrouped.map(renderItem).join('')}</details>`
: ungrouped.map(renderItem).join('');
}
return html || '<p class="hint">None yet.</p>';
}
public/styles.css
+19 -6
View File
@@ -355,14 +355,27 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
.archived-badge { background: #e8e2d0; color: var(--muted); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 999px; }
/* ---------- list/deck groups ---------- */
.list-group { margin-bottom: 0.75rem; }
.list-group { margin-bottom: 1rem; }
.list-group-header {
font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--muted);
padding: 0.5rem 0.25rem 0.2rem;
border-bottom: 1.5px solid #e8e2d0;
margin-bottom: 0.25rem;
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; color: #5a5240;
background: #e8e2d0;
padding: 0.55rem 0.9rem;
border-radius: 8px;
margin-bottom: 0.4rem;
cursor: pointer; user-select: none; list-style: none;
transition: background 0.15s;
}
.list-group-header:hover { background: #ddd7c6; }
.list-group-header::-webkit-details-marker { display: none; }
.list-group-header::before {
content: '▼';
font-size: 0.75rem;
transition: transform 0.2s;
flex-shrink: 0;
}
.list-group:not([open]) .list-group-header::before { transform: rotate(-90deg); }
/* ---------- roster chips ---------- */
#cd-roster { display: flex; flex-wrap: wrap; gap: 0.5rem; }