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 @@ } }); -
+
-
+
user avatar
diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css index 8c78815..59c9aac 100644 --- a/public/tabs/chat/chat.css +++ b/public/tabs/chat/chat.css @@ -67,8 +67,8 @@ #chat .message-container { position: relative; transition: all 0.33s; - background: rgba(255, 255, 255, 0.03); - margin-top: 0.75rem; + background: var(--bg-lighter); + margin-top: 0.5rem; padding: 0.5rem; border-radius: var(--border-radius); } @@ -77,13 +77,44 @@ padding: 0; } -#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick, -#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock, -#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick, -#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock { - padding-top: 0; - padding-bottom: 0; - margin-top: 0; +.user-tock.time-tock:has(+ .user-tock.time-tick), +.user-tock.time-tick:has(+ .user-tock.time-tock), +.user-tick.time-tock:has(+ .user-tick.time-tick), +.user-tick.time-tick:has(+ .user-tick.time-tock), +.user-tock.time-tock:has(+ .user-tick.time-tick), +.user-tock.time-tick:has(+ .user-tick.time-tock), +.user-tick.time-tock:has(+ .user-tock.time-tick), +.user-tick.time-tick:has(+ .user-tock.time-tock), +.user-tock.time-tock:last-of-type, +.user-tock.time-tick:last-of-type, +.user-tick.time-tock:last-of-type, +.user-tick.time-tick:last-of-type { + /* border: 1px dotted red; */ + margin-bottom: 1rem !important; + padding-bottom: 0.25rem !important; + padding-top: 0 !important; + margin-top: 0.5rem !important; +} + +.user-tock.time-tock:has(+ .user-tock.time-tock), +.user-tock.time-tick:has(+ .user-tock.time-tick), +.user-tick.time-tock:has(+ .user-tick.time-tock), +.user-tick.time-tick:has(+ .user-tick.time-tick) { + /* border: 1px dotted blue; */ + margin-bottom: -0.75rem !important; + padding-top: 0 !important; +} + +.user-tock.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick), +.user-tock.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock), +.user-tick.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick), +.user-tick.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock), +.user-tock.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick), +.user-tock.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock), +.user-tick.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick), +.user-tick.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock) { + /* border: 1px dotted green; */ + margin-bottom: -0.75rem !important; } #chat @@ -179,27 +210,15 @@ height: 3.75rem; } -#chat .message-container .info-container .avatar-container { - display: inline-block; - margin: 0 4px; - width: 3rem; - height: 3rem; - border-radius: 16%; - overflow: hidden; -} - -#chat .message-container .info-container .avatar-container img { - min-width: 100%; - min-height: 100%; -} - #chat .message-container .info-container .username-container { margin: 0 4px; font-weight: bold; + padding-top: 0.5rem; } #chat .message-container .info-container .datetime-container { margin: 0 4px; + padding-top: 0.4rem; } #chat .message-container .info-container .datetime-container .long { diff --git a/public/tabs/chat/chat.html b/public/tabs/chat/chat.html index 42139aa..c23e29c 100644 --- a/public/tabs/chat/chat.html +++ b/public/tabs/chat/chat.html @@ -118,7 +118,7 @@
-
+
user avatar
-
+
user avatar
-
+