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.
このコミットが含まれているのは:
コミット
3216753c34
|
|
@ -13,16 +13,13 @@ const jsmarkup_info_float_uptime = '<div id="info_js__float__uptime"></div>';
|
|||
const jsmarkup_info_title = '<header id="info_js__title"></header>';
|
||||
const jsmarkup_chat_messages = '<ol id="chat-messages_js" data-js="true"></ol>';
|
||||
const jsmarkup_chat_users = `\
|
||||
<section id="chat-users_js">
|
||||
<header id="chat-users_js__header"><h4>Users in chat</h4></header>
|
||||
<article id="chat-users_js__main">
|
||||
<h5 id="chat-users-watching-header"></h5>
|
||||
<ul id="chat-users-watching"></ul>
|
||||
<br>
|
||||
<h5 id="chat-users-notwatching-header"></h5>
|
||||
<ul id="chat-users-notwatching"></ul>
|
||||
</article>
|
||||
</section>`;
|
||||
<article id="chat-users_js">
|
||||
<h5 id="chat-users_js__watching-header"></h5>
|
||||
<ul id="chat-users_js__watching"></ul>
|
||||
<br>
|
||||
<h5 id="chat-users_js__notwatching-header"></h5>
|
||||
<ul id="chat-users_js__notwatching"></ul>
|
||||
</article>`;
|
||||
const jsmarkup_chat_form = `\
|
||||
<form id="chat-form_js" data-js="true" action="/chat" method="post">
|
||||
<input id="chat-form_js__nonce" type="hidden" name="nonce" value="">
|
||||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -15,11 +15,14 @@
|
|||
<label id="chat__header__button" for="chat__toggle">Users</label>
|
||||
<h3 id="chat__header__text">Stream chat</h3>
|
||||
</header>
|
||||
<article id="chat__messages">
|
||||
<noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
|
||||
</article>
|
||||
<article id="chat__users">
|
||||
<noscript><iframe id="chat-users_nojs" src="{{ url_for('nojs_users', token=user.token) }}" data-js="false"></iframe></noscript>
|
||||
<article id="chat__body">
|
||||
<section id="chat__body__messages">
|
||||
<noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
|
||||
</section>
|
||||
<section id="chat__body__users">
|
||||
<header id="chat-users-header"><h4>Users in chat</h4></header>
|
||||
<noscript><iframe id="chat-users_nojs" src="{{ url_for('nojs_users', token=user.token) }}" data-js="false"></iframe></noscript>
|
||||
</section>
|
||||
</article>
|
||||
<section id="chat__form">
|
||||
<noscript><iframe id="chat-form_nojs" src="{{ url_for('nojs_form', token=user.token) }}" data-js="false"></iframe></noscript>
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header"><h4>Users in chat</h4></header>
|
||||
<aside id="timeout">
|
||||
<a href="">
|
||||
<header>Timed out</header>
|
||||
|
|
|
|||
読み込み中…
新しいイシューから参照