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

Redesign course unit list into collapsible cards on student and admin views

Browse Source 
Student view auto-opens the unit whose item due-dates span today (falls back
to most-recent past unit, earliest future unit, then first with incomplete
work). Admin view starts all units expanded. Both share the same card design:
unit-number badge, name, progress/count indicator, animated chevron toggle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-07-29 16:24:44 -04:00
1 parent ac7b86b470
commit 723bbb93c8
3 files changed
+189 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/styles.css
+86 -2
View File
@@ -283,8 +283,92 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
.course-pct { font-size: 0.85rem; color: var(--muted); }
.progress-track.small { height: 8px; margin: 0.2rem 0; }
.unit-block { margin-bottom: 1.5rem; }
.unit-block h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
/* student course unit cards */
#course-units .unit-block {
background: var(--card); border-radius: 16px; margin: 0.75rem 0;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.08); overflow: hidden;
}
#course-units .unit-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%; background: none; border: none; padding: 1rem 1.1rem;
cursor: pointer; font-family: inherit; text-align: left; gap: 0.75rem;
border-bottom: 2px solid transparent; transition: border-color 0.15s;
}
#course-units .unit-block.open .unit-toggle { border-bottom-color: var(--accent); }
#course-units .unit-toggle-left {
display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
}
#course-units .unit-num-badge {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; background: var(--accent); color: #fff;
padding: 0.2em 0.55em; border-radius: 6px; flex-shrink: 0;
}
#course-units .unit-title-text {
font-size: 1.05rem; font-weight: 700; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#course-units .unit-toggle-right {
display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}
#course-units .unit-done-count {
font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap;
}
#course-units .unit-mini-progress { width: 56px; height: 6px; margin: 0; }
#course-units .unit-chevron {
font-size: 1.15rem; color: var(--muted); display: inline-block;
transition: transform 0.22s ease;
}
#course-units .unit-block:not(.open) .unit-chevron { transform: rotate(-90deg); }
#course-units .unit-items-list {
max-height: 0; overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 0.85rem;
}
#course-units .unit-block.open .unit-items-list {
max-height: 4000px; padding: 0.1rem 0.85rem 0.85rem;
}
/* admin course unit cards */
#cd-units .unit-block {
background: var(--card); border-radius: 16px; margin: 0.75rem 0; padding: 0;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.08); overflow: hidden;
}
#cd-units .unit-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 0.85rem 1rem; cursor: pointer; gap: 0.75rem; user-select: none;
border-bottom: 2px solid transparent; transition: border-color 0.15s;
}
#cd-units .unit-block.open .unit-toggle { border-bottom-color: var(--accent); }
#cd-units .unit-toggle-left {
display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
}
#cd-units .unit-num-badge {
font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; background: var(--accent); color: #fff;
padding: 0.2em 0.55em; border-radius: 6px; flex-shrink: 0;
}
#cd-units .unit-title-text {
font-size: 1rem; font-weight: 700; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cd-units .unit-toggle-right {
display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0;
}
#cd-units .unit-item-count {
font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap;
}
#cd-units .unit-chevron {
font-size: 1.1rem; color: var(--muted); transition: transform 0.22s ease;
}
#cd-units .unit-block:not(.open) .unit-chevron { transform: rotate(-90deg); }
#cd-units .unit-items-list {
max-height: 0; overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 0.85rem;
}
#cd-units .unit-block.open .unit-items-list {
max-height: 4000px; padding: 0.5rem 0.85rem 0.85rem;
}
/* ---------- item viewers (lesson/assignment/quiz) ---------- */
.item-card {