From 3216753c34091c753b92c5a087580fc80a66d611 Mon Sep 17 00:00:00 2001 From: n9k Date: Sun, 27 Feb 2022 12:12:37 +0000 Subject: [PATCH] Minor changes to the appearance of the users list Made the 'Users in chat' header above the overflow area, so it always stays on top. Now using `visibility: hidden;` instead of `display: none;` to show/hide messages/users so that nojs css animations don't reset. --- anonstream/static/anonstream.js | 29 +++++++++----------- anonstream/static/style.css | 41 ++++++++++++++++------------ anonstream/templates/home.html | 13 +++++---- anonstream/templates/nojs_users.html | 15 ++-------- 4 files changed, 47 insertions(+), 51 deletions(-) diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js index a5dc27f..b09c70c 100644 --- a/anonstream/static/anonstream.js +++ b/anonstream/static/anonstream.js @@ -13,16 +13,13 @@ const jsmarkup_info_float_uptime = '
'; const jsmarkup_info_title = '
'; const jsmarkup_chat_messages = '
    '; const jsmarkup_chat_users = `\ -
    -

    Users in chat

    -
    -
    -
      -
      -
      -
        -
        -
        `; +
        +
        + +
        +
        + +
        `; const jsmarkup_chat_form = `\
        @@ -71,11 +68,11 @@ const insert_jsmarkup = () => {jsmarkup_info_float_viewership parent.insertAdjacentHTML("beforeend", jsmarkup_info_title); } if (document.getElementById("chat-users_js") === null) { - const parent = document.getElementById("chat__users"); + const parent = document.getElementById("chat__body__users"); parent.insertAdjacentHTML("beforeend", jsmarkup_chat_users); } if (document.getElementById("chat-messages_js") === null) { - const parent = document.getElementById("chat__messages"); + const parent = document.getElementById("chat__body__messages"); parent.insertAdjacentHTML("beforeend", jsmarkup_chat_messages); } if (document.getElementById("chat-form_js") === null) { @@ -94,10 +91,10 @@ const info_title = document.getElementById("info_js__title"); const info_viewership = document.getElementById("info_js__float__viewership"); const info_uptime = document.getElementById("info_js__float__uptime"); const chat_messages = document.getElementById("chat-messages_js"); -const chat_users_watching = document.getElementById("chat-users-watching"); -const chat_users_watching_header = document.getElementById("chat-users-watching-header"); -const chat_users_notwatching = document.getElementById("chat-users-notwatching"); -const chat_users_notwatching_header = document.getElementById("chat-users-notwatching-header"); +const chat_users_watching = document.getElementById("chat-users_js__watching"); +const chat_users_watching_header = document.getElementById("chat-users_js__watching-header"); +const chat_users_notwatching = document.getElementById("chat-users_js__notwatching"); +const chat_users_notwatching_header = document.getElementById("chat-users_js__notwatching-header"); const create_chat_message = (object) => { const user = users[object.token_hash]; diff --git a/anonstream/static/style.css b/anonstream/static/style.css index 24a36e6..99e9a9c 100644 --- a/anonstream/static/style.css +++ b/anonstream/static/style.css @@ -102,9 +102,9 @@ noscript { left: calc(0.5rem + 4px); margin: 0; } -#chat__toggle:checked ~ #chat__messages, -#chat__toggle:not(:checked) ~ #chat__users { - display: none; +#chat__toggle:checked ~ #chat__body > #chat__body__messages, +#chat__toggle:not(:checked) ~ #chat__body > #chat__body__users { + visibility: hidden; } #chat__toggle:checked + #chat__header > #chat__header__button { border-style: inset; @@ -149,9 +149,13 @@ noscript { grid-column: 1; grid-row: 1; } -#chat__messages { +#chat__body { position: relative; } +#chat__body__messages { + position: relative; + height: 100%; +} #chat-messages_js { list-style: none; margin: 0; @@ -203,33 +207,36 @@ noscript { font-size: 9pt; cursor: default; } -#chat__users { +#chat__body__users { background-color: #121214; mask-image: linear-gradient(black calc(100% - 0.625rem), transparent calc(100% - 0.125rem)); - overflow: auto; + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: grid; + grid-auto-rows: min-content auto; } -#chat-users_js { - margin-bottom: 0.875rem; -} -#chat-users_js__header { +#chat-users-header { padding: 0.5rem; background-color: #2c2c30; border-bottom: var(--chat-border); } -#chat-users_js__header > h4 { +#chat-users-header > h4 { margin: 0; font-weight: normal; text-align: center; } -#chat-users_js__main { - margin: 0.5rem 0.75rem; +#chat-users_js { + padding: 0.5rem 0.75rem 0.875rem; + overflow: auto; } -#chat-users-watching-header, -#chat-users-notwatching-header { +#chat-users_js__watching-header, +#chat-users_js__notwatching-header { margin: 0; } -#chat-users-watching, -#chat-users-notwatching { +#chat-users_js__watching, +#chat-users_js__notwatching { margin: 0; padding-left: 0.75rem; list-style: none; diff --git a/anonstream/templates/home.html b/anonstream/templates/home.html index 5e5656e..157fbb0 100644 --- a/anonstream/templates/home.html +++ b/anonstream/templates/home.html @@ -15,11 +15,14 @@

        Stream chat

        -
        - -
        -
        - +
        +
        + +
        +
        +

        Users in chat

        + +
        diff --git a/anonstream/templates/nojs_users.html b/anonstream/templates/nojs_users.html index 266930b..cbbbc92 100644 --- a/anonstream/templates/nojs_users.html +++ b/anonstream/templates/nojs_users.html @@ -9,20 +9,10 @@ min-height: 100%; } body { - margin: 0 0 0.875rem; + margin: 0; color: #ddd; font-family: sans-serif; } - #header { - padding: 0.5rem; - background-color: #2c2c30; - border-bottom: 1px solid #4a4a4f; - } - #header > h4 { - margin: 0; - font-weight: normal; - text-align: center; - } #timeout { height: 0; visibility: hidden; @@ -57,7 +47,7 @@ } } #main { - margin: 0.5rem 0.75rem; + margin: 0.5rem 0.75rem 0.875rem; } #main > h5 { margin: 0; @@ -82,7 +72,6 @@ -