From cbd58071b8f14a07bdad9a0b94b8323dedce5ac7 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 23 Sep 2025 17:13:51 -0700 Subject: [PATCH] feature: blurbs refactor: style updates and fixes --- public/index.html | 1 + public/js/smartforms.js | 3 +- public/js/textareaenhancements.js | 31 ++++++++++++++++ public/tabs/blurbs/blurbs.html | 61 +++++++++++++------------------ public/tabs/blurbs/new_blurb.html | 48 ++++++++++++++++++------ public/tabs/chat/chat.css | 3 +- public/tabs/forum/forum.html | 3 +- public/tabs/forum/new_post.html | 2 +- public/tabs/tabs.html | 1 + 9 files changed, 101 insertions(+), 52 deletions(-) create mode 100644 public/js/textareaenhancements.js diff --git a/public/index.html b/public/index.html index a9a38a4..57ea98a 100644 --- a/public/index.html +++ b/public/index.html @@ -31,6 +31,7 @@ + diff --git a/public/js/smartforms.js b/public/js/smartforms.js index ed34255..2bc4aa9 100644 --- a/public/js/smartforms.js +++ b/public/js/smartforms.js @@ -1,8 +1,7 @@ function smarten_forms() { - const forms = document.body.querySelectorAll("form[data-smart]:not([data-smartened])"); + const forms = document?.body?.querySelectorAll("form[data-smart]:not([data-smartened])") ?? []; for (const form of forms) { async function on_submit(event) { - debugger; event.preventDefault(); form.disabled = true; form.__submitted_at = new Date(); diff --git a/public/js/textareaenhancements.js b/public/js/textareaenhancements.js new file mode 100644 index 0000000..0fcf435 --- /dev/null +++ b/public/js/textareaenhancements.js @@ -0,0 +1,31 @@ +function enhance_textareas() { + const textareas = document.body.querySelectorAll("textarea:not([data-enhanced])"); + for (const textarea of textareas) { + const max_length_attr = textarea.getAttribute("maxlength"); + if (/^\d+$/.test(max_length_attr)) { + const max_length = parseInt(max_length_attr, 10); + + function on_updated() { + const counters = this.parentElement.querySelectorAll( + `[data-limit-counter-for="${this.name}"]`, + ); + for (const counter of counters) { + counter.innerHTML = `${this.value.length} / ${max_length}`; + } + } + + textarea.addEventListener("keyup", on_updated); + textarea.addEventListener("paste", on_updated); + textarea.addEventListener("blur", on_updated); + on_updated.call(textarea); + } + + textarea.dataset.enhanced = true; + } +} + +const textarea_enhancement_observer = new MutationObserver(enhance_textareas); +textarea_enhancement_observer.observe(document, { + childList: true, + subtree: true, +}); diff --git a/public/tabs/blurbs/blurbs.html b/public/tabs/blurbs/blurbs.html index 1ccb159..444e547 100644 --- a/public/tabs/blurbs/blurbs.html +++ b/public/tabs/blurbs/blurbs.html @@ -1,6 +1,8 @@
diff --git a/public/tabs/chat/chat.css b/public/tabs/chat/chat.css index e557302..67345bc 100644 --- a/public/tabs/chat/chat.css +++ b/public/tabs/chat/chat.css @@ -185,7 +185,8 @@ } #chat .message-container .info-container .avatar-container img { - width: 100%; + min-width: 100%; + min-height: 100%; } #chat .message-container .info-container .username-container { diff --git a/public/tabs/forum/forum.html b/public/tabs/forum/forum.html index 91f0c9b..0390388 100644 --- a/public/tabs/forum/forum.html +++ b/public/tabs/forum/forum.html @@ -85,7 +85,8 @@ } .post-container .info-container .avatar-container img { - width: 100%; + min-width: 100%; + min-height: 100%; } .post-container .info-container .username-container { diff --git a/public/tabs/forum/new_post.html b/public/tabs/forum/new_post.html index 04896e5..105baad 100644 --- a/public/tabs/forum/new_post.html +++ b/public/tabs/forum/new_post.html @@ -54,7 +54,7 @@