diff --git a/public/base.css b/public/base.css index aa59bb9..cdc814d 100644 --- a/public/base.css +++ b/public/base.css @@ -3,6 +3,8 @@ --base-color: #518; --bg: hsl(from var(--base-color) h 20% 7.5%); + --bg-darker: hsl(from var(--base-color) h 20% 5%); + --bg-lighter: hsl(from var(--base-color) h 20% 10%); --text: hsl(from var(--base-color) h 5% 100%); --accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100)); @@ -176,6 +178,47 @@ textarea:focus { 0 0 2px rgb(from var(--border-highlight) r g b / 60%); } +.avatar-container { + display: block; + margin: 0.5rem auto; + width: 3rem; + height: 3rem; + border-radius: var(--border-radius); + overflow: hidden; +} + +.avatar-container.inline { + display: inline-block; + margin: 0.5rem; +} + +.avatar-container.medium { + width: 4.5rem; + height: 4.5rem; +} + +.avatar-container.large { + width: 6rem; + height: 6rem; +} + +.avatar-container.x-large { + width: 9rem; + height: 9rem; +} + +.avatar-container.xx-large { + width: 12rem; + height: 12rem; +} + +.avatar-container img { + height: 100%; + width: 100%; + max-width: none; + object-fit: cover; +} + .clickable { cursor: pointer; } diff --git a/public/js/smartfeeds.js b/public/js/smartfeeds.js index e46378f..8793238 100644 --- a/public/js/smartfeeds.js +++ b/public/js/smartfeeds.js @@ -68,6 +68,7 @@ function smarten_feeds() { return feed.__target_element?.(item) ?? feed; }; + feed.__autoscroll_debounce_timeout = undefined; feed.__render = async (item) => { feed.__context = feed.__context ?? @@ -118,6 +119,24 @@ function smarten_feeds() { ); break; } + + if (feed.dataset.autoscroll) { + if (feed.__autoscroll_debounce_timeout) { + clearTimeout(feed.__autoscroll_debounce_timeout); + } + + feed.__autoscroll_debounce_timeout = setTimeout(() => { + feed.scrollTo({ + behavior: "auto", + left: 0, + top: + (feed.dataset.insert ?? "append") === "append" + ? feed.scrollHeight + : 0, + }); + feed.__autoscroll_debounce_timeout = undefined; + }, 15); + } } }; @@ -182,22 +201,12 @@ function smarten_feeds() { feed.dataset.hydrated = true; feed.dataset.last_update = new Date().toISOString(); feed.__attempts_since_last_successful_update = 0; - - if (feed.dataset.autoscroll) { - setTimeout(() => { - feed.scrollTop = - (feed.dataset.insert ?? "append") === "append" - ? feed.scrollHeight - : 0; - }, 50); - } }) .catch((error) => { if (error === "smartfeed:stopped") { return; } - debugger; feed.dataset.error = JSON.stringify(error); console.trace(error); }) diff --git a/public/js/smartforms.js b/public/js/smartforms.js index e28c9bd..a644732 100644 --- a/public/js/smartforms.js +++ b/public/js/smartforms.js @@ -195,6 +195,7 @@ function smarten_forms() { form.querySelectorAll("[enter-key-submits]").forEach((element) => { element.addEventListener("keypress", (event) => { if (event.key === "Enter" && !event.shiftKey) { + event.preventDefault(); form.requestSubmit(); } }); diff --git a/public/sidebar/sidebar.html b/public/sidebar/sidebar.html index fd469db..481c405 100644 --- a/public/sidebar/sidebar.html +++ b/public/sidebar/sidebar.html @@ -358,13 +358,6 @@ max-width: 200px; } - .profile-container .avatar-container #user-avatar { - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - } - .profile-container .avatar-container input[type="file"] { position: absolute; top: 0; @@ -476,7 +469,7 @@ } }); -