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

Fix toggle button styling and collapse groups by default

Browse Source 
Toggle buttons now match the rest of the admin UI (same font, padding,
border-radius). Both start secondary/gray; the active one turns blue.
List and deck group sections are collapsed by default instead of open.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-27 13:19:10 -04:00
1 parent 2d663f6964
commit 5c2b5baec2
3 files changed
+6 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/admin.html
+2 -2
View File
@@ -306,7 +306,7 @@
</div> </div>
<div class="panel-col"> <div class="panel-col">
<div class="toggle-btns"> <div class="toggle-btns">
<button type="button" id="list-new-btn">+ New list</button> <button type="button" id="list-new-btn" class="secondary">+ New list</button>
<button type="button" id="list-bulk-btn" class="secondary">⬆ Bulk import</button> <button type="button" id="list-bulk-btn" class="secondary">⬆ Bulk import</button>
</div> </div>
<div id="list-editor-section" hidden> <div id="list-editor-section" hidden>
@@ -351,7 +351,7 @@
</div> </div>
<div class="panel-col"> <div class="panel-col">
<div class="toggle-btns"> <div class="toggle-btns">
<button type="button" id="deck-new-btn">+ New deck</button> <button type="button" id="deck-new-btn" class="secondary">+ New deck</button>
<button type="button" id="deck-bulk-btn" class="secondary">⬆ Bulk import</button> <button type="button" id="deck-bulk-btn" class="secondary">⬆ Bulk import</button>
</div> </div>
<div id="deck-editor-section" hidden> <div id="deck-editor-section" hidden>
public/admin.js
+2 -2
View File
@@ -1324,11 +1324,11 @@ function renderGroupSections(groups, renderItem) {
const ungrouped = groups[''] || []; const ungrouped = groups[''] || [];
let html = ''; let html = '';
for (const g of named) { for (const g of named) {
html += `<details class="list-group" open><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`; html += `<details class="list-group"><summary class="list-group-header">${esc(g)}</summary>${groups[g].map(renderItem).join('')}</details>`;
} }
if (ungrouped.length) { if (ungrouped.length) {
html += named.length html += named.length
? `<details class="list-group" open><summary class="list-group-header">Ungrouped</summary>${ungrouped.map(renderItem).join('')}</details>` ? `<details class="list-group"><summary class="list-group-header">Ungrouped</summary>${ungrouped.map(renderItem).join('')}</details>`
: ungrouped.map(renderItem).join(''); : ungrouped.map(renderItem).join('');
} }
return html || '<p class="hint">None yet.</p>'; return html || '<p class="hint">None yet.</p>';
public/styles.css
+2 -2
View File
@@ -198,7 +198,7 @@ body {
font-size: 1.5rem; text-align: center; width: 180px; padding: 0.5rem; font-size: 1.5rem; text-align: center; width: 180px; padding: 0.5rem;
border: 2px solid var(--accent); border-radius: 10px; margin-right: 0.5rem; border: 2px solid var(--accent); border-radius: 10px; margin-right: 0.5rem;
} }
#pin-form button, .inline-form button, #list-form button, .row-actions button { #pin-form button, .inline-form button, #list-form button, .row-actions button, .toggle-btns button {
font-size: 1rem; font-family: inherit; font-weight: 700; font-size: 1rem; font-family: inherit; font-weight: 700;
background: var(--accent); color: #fff; border: none; background: var(--accent); color: #fff; border: none;
border-radius: 10px; padding: 0.6rem 1.2rem; cursor: pointer; border-radius: 10px; padding: 0.6rem 1.2rem; cursor: pointer;
@@ -340,7 +340,7 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
/* ---------- toggle button rows (new/bulk import) ---------- */ /* ---------- toggle button rows (new/bulk import) ---------- */
.toggle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .toggle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.toggle-btns button.active { background: var(--accent); color: #fff; } .toggle-btns button.active { background: var(--accent) !important; color: #fff !important; }
.section-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 0; color: var(--ink); } .section-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 0; color: var(--ink); }
/* 2-column layout for wide screens */ /* 2-column layout for wide screens */