diff --git a/app/public/app.js b/app/public/app.js index 0888af1..ef0c532 100644 --- a/app/public/app.js +++ b/app/public/app.js @@ -71,6 +71,7 @@ function check_message() { const message_good = get_cookie("App-Message-Good") === "true"; if (message) { + element.classList.remove("hidden"); element.style.marginBottom = "1rem"; element.style.paddingLeft = "1rem"; element.innerHTML = `
`; @@ -85,6 +86,7 @@ function check_message() { globalThis.show_message = (message, message_good = true) => { const element = document.getElementById("messages"); + element.classList.remove("hidden"); element.style.marginBottom = "1rem"; element.style.paddingLeft = "1rem"; element.innerHTML = ` `; diff --git a/app/public/messages.js b/app/public/messages.js index 023e38c..b8fa549 100644 --- a/app/public/messages.js +++ b/app/public/messages.js @@ -121,6 +121,10 @@ function sock_con() { if (document.getElementById(`message_${msg.body}`)) { document.getElementById(`message_${msg.body}`).remove(); } + + if (document.getElementById(`message_${msg.body}_reply`)) { + document.getElementById(`message_${msg.body}_reply`).remove(); + } } else if (msg.method === "MessageUpdate") { const [id, content] = JSON.parse(msg.body); document.getElementById(`${id}_body`).innerHTML = diff --git a/app/public/style.css b/app/public/style.css index 74806ac..190377e 100644 --- a/app/public/style.css +++ b/app/public/style.css @@ -135,6 +135,10 @@ nav.sticky { top: 0; } +nav:not(.sticky) { + padding: var(--pad-1); +} + @media screen and (max-width: 900px) { main, article, @@ -254,7 +258,7 @@ video { position: relative; } -.button:not(nav *, .tab, .dropdown .inner *, .square) { +.button:not(.tab, .dropdown .inner *, .square) { border-radius: var(--radius); } @@ -349,10 +353,12 @@ video { color: inherit; position: absolute; z-index: 2; - top: 100%; + top: calc(100% + 5px); right: 0; width: max-content; max-width: 15rem; + border-radius: var(--radius); + overflow: hidden; } .dropdown .inner.surface { @@ -394,6 +400,10 @@ video { right: unset; } +nav .dropdown .inner { + top: calc(100% + var(--pad-3)); +} + /* input */ input, textarea, @@ -819,7 +829,8 @@ menu.col { } .message:hover .dropdown.hidden, -.message:focus .dropdown.hidden { +.message:focus .dropdown.hidden, +.message:has(.open) .dropdown.hidden { display: flex !important; } diff --git a/app/templates_src/chats.lisp b/app/templates_src/chats.lisp index 2a79eb7..00df8f3 100644 --- a/app/templates_src/chats.lisp +++ b/app/templates_src/chats.lisp @@ -22,7 +22,7 @@ (div ("class" "card surface w_full flex justify_between items_center gap_2") (a - ("class" "flush flex gap_ch items_center {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}") + ("class" "flush flex gap_ch items_center flex_wrap {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}") ("href" "/chats/{{ chat[0].id }}") (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}")) (div diff --git a/app/templates_src/components.lisp b/app/templates_src/components.lisp index 59ebd0e..7f8de93 100644 --- a/app/templates_src/components.lisp +++ b/app/templates_src/components.lisp @@ -112,6 +112,7 @@ (text "{% if replying_to -%}") (div ("class" "message_reply_wrapper") + ("id" "message_{{ message.id }}_reply") (text "{{ self::message(message=replying_to, hide_actions=true) }}")) (text "{%- endif %}") (text "{%- endmacro %}") diff --git a/app/templates_src/root.lisp b/app/templates_src/root.lisp index 44e5662..7478a0a 100644 --- a/app/templates_src/root.lisp +++ b/app/templates_src/root.lisp @@ -112,8 +112,7 @@ (article ("class" "content_container flex flex_col") ("id" "page") - (ul ("id" "messages")) - (text "{% block body %}{% endblock %}") - (div ("style" "min-height: 32px"))) + (ul ("class" "hidden") ("id" "messages")) + (text "{% block body %}{% endblock %}")) (script (text "setTimeout(() => init_dropdowns(document.body), 150);"))))