From 6f155f27997a4ef9c9f40edf3baff73b5ba34e5b Mon Sep 17 00:00:00 2001 From: dzwdz Date: Mon, 10 Feb 2025 17:20:49 +0100 Subject: sticky acct header --- app.js | 13 +++++++++++-- treed.css | 5 ++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index d024a8c..636d07e 100644 --- a/app.js +++ b/app.js @@ -175,7 +175,17 @@ let DayDigest = { let account = posts[0].account; return m("details.acct", {key: user}, [ - m("summary.acct__header", [ + m("summary.acct__header", { + onclick: (ev) => { + // Don't jump around when closing an acount which we see + // only due to position:sticky; + let el = ev.target.parentElement; + let el_y = el.getBoundingClientRect().top; + if (el_y < 0) { + window.scrollTo(window.scrollX, window.scrollY + el_y); + } + } + }, [ m("img.avatar", {src: account.avatar_static}), m("span.acct__username", account.display_name || account.acct), // TODO figure out where to show acct m("span.acct__counts.fg2", `${own_posts}o | ${replies}r | ${reblogs}b`), @@ -299,7 +309,6 @@ m.route(document.body, "/home", { if (!localStorage.instance || !localStorage.access_token) { m.route.set("/login"); - // TODO } else { m.route.set("/home"); let masto = new Mastodon(localStorage.instance, localStorage.access_token); diff --git a/treed.css b/treed.css index b7dbc09..8ff6202 100644 --- a/treed.css +++ b/treed.css @@ -32,11 +32,10 @@ body { display: flex; align-items: center; - /* TODO - background: #fff; + background: var(--background2); position: sticky; top: 0; - */ + border-bottom: 1px solid var(--border-color); margin-bottom: -1px; -- cgit v1.2.3