sam/family_home_lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: add always-visible back-to-top button + collapsible dashboard panels (per-section, persisted)

Browse Source
This commit is contained in:
Sam Rolfe
2026-10-07 15:06:22 +11:00
parent 6f32301540
commit e02e5712d2
4 changed files with 533 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
portal/static/app.css
View File

@@ -254,7 +254,6 @@ button.button, input[type="submit"].button { font-family: inherit; }
/* loading pulse for polling */
.tool-grid.htmx-request .tool-card { opacity: .6; transition: opacity .2s; }
/* -------------------------------------------------- Tool embed */
.tool-bar {
position: sticky; top: 52px; z-index: 15;
@@ -345,3 +344,44 @@ button.button, input[type="submit"].button { font-family: inherit; }
[data-theme="dark"] .form-error { background: #3a2424; color: #ffb4ab; border-color: #7a4e4c; }
[data-theme="dark"] .tool-icon { color: #1c1e22; }
[data-theme="dark"] .category-pill { background: var(--surface-2); }
/* ---------- Back to top ---------- */
.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 100;
width: 44px;
height: 44px;
border-radius: var(--rounded-full);
border: 1px solid var(--hairline);
background: var(--surface-2);
color: var(--ink);
font-size: 20px;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.15);
display: flex; align-items: center; justify-content: center;
opacity: .85;
transition: opacity .2s, transform .15s;
}
.back-to-top:hover { opacity: 1; transform: translateY(-2px); }
[data-theme="dark"] .back-to-top { background: var(--surface-2); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
/* ---------- Collapsible dashboard panels ---------- */
.section-toggle {
background: none;
border: 1px solid var(--hairline);
color: var(--ink);
border-radius: var(--rounded-full);
width: 26px; height: 26px;
line-height: 1;
cursor: pointer;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
opacity: .7;
transition: transform .2s, opacity .2s;
}
.section-toggle:hover { opacity: 1; }
.section.collapsed .section-toggle { transform: rotate(-90deg); }
.section.collapsed .tool-grid { display: none; }