Compare commits

..

No commits in common. "9e8dc14029d4379329e3bfe07d215105e896c869" and "8f818fc1ee9efbfdd01edbcfff12f993e5c4d409" have entirely different histories.

9 changed files with 87 additions and 110 deletions

View file

@ -3,8 +3,6 @@
--base-color: #518; --base-color: #518;
--bg: hsl(from var(--base-color) h 20% 7.5%); --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%); --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)); --accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
@ -178,47 +176,6 @@ textarea:focus {
0 0 2px rgb(from var(--border-highlight) r g b / 60%); 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 { .clickable {
cursor: pointer; cursor: pointer;
} }

View file

@ -68,7 +68,6 @@ function smarten_feeds() {
return feed.__target_element?.(item) ?? feed; return feed.__target_element?.(item) ?? feed;
}; };
feed.__autoscroll_debounce_timeout = undefined;
feed.__render = async (item) => { feed.__render = async (item) => {
feed.__context = feed.__context =
feed.__context ?? feed.__context ??
@ -119,24 +118,6 @@ function smarten_feeds() {
); );
break; 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);
}
} }
}; };
@ -201,12 +182,22 @@ function smarten_feeds() {
feed.dataset.hydrated = true; feed.dataset.hydrated = true;
feed.dataset.last_update = new Date().toISOString(); feed.dataset.last_update = new Date().toISOString();
feed.__attempts_since_last_successful_update = 0; 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) => { .catch((error) => {
if (error === "smartfeed:stopped") { if (error === "smartfeed:stopped") {
return; return;
} }
debugger;
feed.dataset.error = JSON.stringify(error); feed.dataset.error = JSON.stringify(error);
console.trace(error); console.trace(error);
}) })

View file

@ -195,7 +195,6 @@ function smarten_forms() {
form.querySelectorAll("[enter-key-submits]").forEach((element) => { form.querySelectorAll("[enter-key-submits]").forEach((element) => {
element.addEventListener("keypress", (event) => { element.addEventListener("keypress", (event) => {
if (event.key === "Enter" && !event.shiftKey) { if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
form.requestSubmit(); form.requestSubmit();
} }
}); });

View file

@ -358,6 +358,13 @@
max-width: 200px; 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"] { .profile-container .avatar-container input[type="file"] {
position: absolute; position: absolute;
top: 0; top: 0;
@ -469,7 +476,7 @@
} }
}); });
</script> </script>
<div class="avatar-container xx-large"> <div class="avatar-container">
<img <img
id="user-avatar" id="user-avatar"
src="/images/default_avatar.gif" src="/images/default_avatar.gif"

View file

@ -76,6 +76,20 @@
display: flex; display: flex;
} }
.blurb-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 20%;
overflow: hidden;
}
.blurb-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.blurb-container .info-container .username-container { .blurb-container .info-container .username-container {
display: block; display: block;
margin: 0 0.5rem; margin: 0 0.5rem;
@ -181,7 +195,7 @@
</div> </div>
<div class="info-container"> <div class="info-container">
<div class="avatar-container inline"> <div class="avatar-container">
<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" /> <img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" />
</div> </div>
<div class="username-container"> <div class="username-container">

View file

@ -67,8 +67,8 @@
#chat .message-container { #chat .message-container {
position: relative; position: relative;
transition: all 0.33s; transition: all 0.33s;
background: var(--bg-lighter); background: rgba(255, 255, 255, 0.03);
margin-top: 0.5rem; margin-top: 0.75rem;
padding: 0.5rem; padding: 0.5rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
@ -77,44 +77,13 @@
padding: 0; padding: 0;
} }
.user-tock.time-tock:has(+ .user-tock.time-tick), #chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick,
.user-tock.time-tick:has(+ .user-tock.time-tock), #chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
.user-tick.time-tock:has(+ .user-tick.time-tick), #chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
.user-tick.time-tick:has(+ .user-tick.time-tock), #chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
.user-tock.time-tock:has(+ .user-tick.time-tick), padding-top: 0;
.user-tock.time-tick:has(+ .user-tick.time-tock), padding-bottom: 0;
.user-tick.time-tock:has(+ .user-tock.time-tick), margin-top: 0;
.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 #chat
@ -210,15 +179,27 @@
height: 3.75rem; 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 { #chat .message-container .info-container .username-container {
margin: 0 4px; margin: 0 4px;
font-weight: bold; font-weight: bold;
padding-top: 0.5rem;
} }
#chat .message-container .info-container .datetime-container { #chat .message-container .info-container .datetime-container {
margin: 0 4px; margin: 0 4px;
padding-top: 0.4rem;
} }
#chat .message-container .info-container .datetime-container .long { #chat .message-container .info-container .datetime-container .long {

View file

@ -118,7 +118,7 @@
</button> </button>
</div> </div>
<div class="info-container"> <div class="info-container">
<div class="avatar-container inline"> <div class="avatar-container">
<img <img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar" alt="user avatar"

View file

@ -40,6 +40,20 @@
margin-left: 1.8rem; margin-left: 1.8rem;
} }
.essay-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 20%;
overflow: hidden;
}
.essay-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.essay-container .info-container .username-container { .essay-container .info-container .username-container {
display: block; display: block;
margin: 0 0.5rem; margin: 0 0.5rem;
@ -161,7 +175,7 @@
</div> </div>
<div class="info-container"> <div class="info-container">
<div class="avatar-container inline medium"> <div class="avatar-container">
<img <img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar" alt="user avatar"

View file

@ -75,6 +75,20 @@
display: flex; display: flex;
} }
.post-container .info-container .avatar-container {
display: block;
margin: 0.5rem;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
.post-container .info-container .avatar-container img {
min-width: 100%;
min-height: 100%;
}
.post-container .info-container .username-container { .post-container .info-container .username-container {
display: block; display: block;
margin: 0 0.5rem; margin: 0 0.5rem;
@ -196,7 +210,7 @@
</div> </div>
<div class="info-container"> <div class="info-container">
<div class="avatar-container inline"> <div class="avatar-container">
<img <img
src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
alt="user avatar" alt="user avatar"