helios/heliosian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add heart toggle on person pages, drop it elsewhere

Browse Source
This commit is contained in:
Ian Gulliver
2026-08-15 22:48:34 -07:00
parent 57e8fc92ba
commit dcb6266493
3 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plan.md
+1 -1
View File
@@ -7,7 +7,7 @@ What remains to build. Current behavior is documented in `docs/dev.md`, `docs/da
- Remaining sections: My Family, Map. - Remaining sections: My Family, Map.
- Mobile chrome: brand-teal top bar and bottom tab navigation on narrow screens (see `docs/directory.md`); today only the desktop chrome is faithful. - Mobile chrome: brand-teal top bar and bottom tab navigation on narrow screens (see `docs/directory.md`); today only the desktop chrome is faithful.
- Filter button behavior — currently visual only; the original filters by grade and classroom. - Filter button behavior — currently visual only; the original filters by grade and classroom.
- Favorites: heart toggles on detail pages; email-list rows already heart into the bookmarks tab, saved per-device in the browser. - Favorites: per-account storage; hearts on person pages and email-list rows feed the bookmarks tab, saved per-device in the browser.
- Installable-app plumbing: manifest, icons, and meta tags per `docs/pwa.md`. - Installable-app plumbing: manifest, icons, and meta tags per `docs/pwa.md`.
- Self-service flows: photo and pronunciation upload, address update, opt-out. - Self-service flows: photo and pronunciation upload, address update, opt-out.
web/static/directory/app.js
+11 -5
View File
@@ -378,7 +378,7 @@ function referrerCrumbs() {
return null; return null;
} }
function breadcrumbs(parts) { function breadcrumbs(parts, favoriteEmail) {
const top = el('div', 'detail-top container'); const top = el('div', 'detail-top container');
const crumbs = el('div', 'crumbs'); const crumbs = el('div', 'crumbs');
const back = el('a', 'crumb-back'); const back = el('a', 'crumb-back');
@@ -399,9 +399,15 @@ function breadcrumbs(parts) {
} }
}); });
top.append(crumbs); top.append(crumbs);
const heart = el('button', 'heart-button'); if (favoriteEmail) {
heart.append(svg('heart')); const heart = el('button', 'heart-button' + (favorites.has(favoriteEmail) ? ' active' : ''));
top.append(heart); heart.append(svg('heart'));
heart.addEventListener('click', () => {
toggleFavorite(favoriteEmail);
heart.classList.toggle('active');
});
top.append(heart);
}
return top; return top;
} }
@@ -521,7 +527,7 @@ function renderPersonDetail(email) {
return; return;
} }
const origin = referrerCrumbs() || [['People', '/people']]; const origin = referrerCrumbs() || [['People', '/people']];
main.append(breadcrumbs([...origin, [p.fullName, null]])); main.append(breadcrumbs([...origin, [p.fullName, null]], p.email));
const content = el('div', 'container detail-content'); const content = el('div', 'container detail-content');
const grid = el('div', 'detail-grid'); const grid = el('div', 'detail-grid');
web/static/directory/style.css
+12
View File
@@ -636,6 +636,18 @@ a.student-card:hover {
padding: 4px; padding: 4px;
} }
.heart-button:hover {
color: var(--brand);
}
.heart-button.active {
color: var(--brand);
}
.heart-button.active svg {
fill: currentColor;
}
.detail-content { .detail-content {
padding-bottom: 44px; padding-bottom: 44px;
} }