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_info_title = '<header id="info_js__title"></header>';
|
||||||
const jsmarkup_chat_messages = '<ol id="chat-messages_js" data-js="true"></ol>';
|
const jsmarkup_chat_messages = '<ol id="chat-messages_js" data-js="true"></ol>';
|
||||||
const jsmarkup_chat_users = `\
|
const jsmarkup_chat_users = `\
|
||||||
<section id="chat-users_js">
|
<article id="chat-users_js">
|
||||||
<header id="chat-users_js__header"><h4>Users in chat</h4></header>
|
<h5 id="chat-users_js__watching-header"></h5>
|
||||||
<article id="chat-users_js__main">
|
<ul id="chat-users_js__watching"></ul>
|
||||||
<h5 id="chat-users-watching-header"></h5>
|
<br>
|
||||||
<ul id="chat-users-watching"></ul>
|
<h5 id="chat-users_js__notwatching-header"></h5>
|
||||||
<br>
|
<ul id="chat-users_js__notwatching"></ul>
|
||||||
<h5 id="chat-users-notwatching-header"></h5>
|
</article>`;
|
||||||
<ul id="chat-users-notwatching"></ul>
|
|
||||||
</article>
|
|
||||||
</section>`;
|
|
||||||
const jsmarkup_chat_form = `\
|
const jsmarkup_chat_form = `\
|
||||||
<form id="chat-form_js" data-js="true" action="/chat" method="post">
|
<form id="chat-form_js" data-js="true" action="/chat" method="post">
|
||||||
<input id="chat-form_js__nonce" type="hidden" name="nonce" value="">
|
<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);
|
parent.insertAdjacentHTML("beforeend", jsmarkup_info_title);
|
||||||
}
|
}
|
||||||
if (document.getElementById("chat-users_js") === null) {
|
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);
|
parent.insertAdjacentHTML("beforeend", jsmarkup_chat_users);
|
||||||
}
|
}
|
||||||
if (document.getElementById("chat-messages_js") === null) {
|
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);
|
parent.insertAdjacentHTML("beforeend", jsmarkup_chat_messages);
|
||||||
}
|
}
|
||||||
if (document.getElementById("chat-form_js") === null) {
|
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_viewership = document.getElementById("info_js__float__viewership");
|
||||||
const info_uptime = document.getElementById("info_js__float__uptime");
|
const info_uptime = document.getElementById("info_js__float__uptime");
|
||||||
const chat_messages = document.getElementById("chat-messages_js");
|
const chat_messages = document.getElementById("chat-messages_js");
|
||||||
const chat_users_watching = document.getElementById("chat-users-watching");
|
const chat_users_watching = document.getElementById("chat-users_js__watching");
|
||||||
const chat_users_watching_header = document.getElementById("chat-users-watching-header");
|
const chat_users_watching_header = document.getElementById("chat-users_js__watching-header");
|
||||||
const chat_users_notwatching = document.getElementById("chat-users-notwatching");
|
const chat_users_notwatching = document.getElementById("chat-users_js__notwatching");
|
||||||
const chat_users_notwatching_header = document.getElementById("chat-users-notwatching-header");
|
const chat_users_notwatching_header = document.getElementById("chat-users_js__notwatching-header");
|
||||||
|
|
||||||
const create_chat_message = (object) => {
|
const create_chat_message = (object) => {
|
||||||
const user = users[object.token_hash];
|
const user = users[object.token_hash];
|
||||||
|
|
|
@ -102,9 +102,9 @@ noscript {
|
||||||
left: calc(0.5rem + 4px);
|
left: calc(0.5rem + 4px);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#chat__toggle:checked ~ #chat__messages,
|
#chat__toggle:checked ~ #chat__body > #chat__body__messages,
|
||||||
#chat__toggle:not(:checked) ~ #chat__users {
|
#chat__toggle:not(:checked) ~ #chat__body > #chat__body__users {
|
||||||
display: none;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
#chat__toggle:checked + #chat__header > #chat__header__button {
|
#chat__toggle:checked + #chat__header > #chat__header__button {
|
||||||
border-style: inset;
|
border-style: inset;
|
||||||
|
@ -149,9 +149,13 @@ noscript {
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-row: 1;
|
grid-row: 1;
|
||||||
}
|
}
|
||||||
#chat__messages {
|
#chat__body {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
#chat__body__messages {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
#chat-messages_js {
|
#chat-messages_js {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -203,33 +207,36 @@ noscript {
|
||||||
font-size: 9pt;
|
font-size: 9pt;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
#chat__users {
|
#chat__body__users {
|
||||||
background-color: #121214;
|
background-color: #121214;
|
||||||
mask-image: linear-gradient(black calc(100% - 0.625rem), transparent calc(100% - 0.125rem));
|
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 {
|
#chat-users-header {
|
||||||
margin-bottom: 0.875rem;
|
|
||||||
}
|
|
||||||
#chat-users_js__header {
|
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
background-color: #2c2c30;
|
background-color: #2c2c30;
|
||||||
border-bottom: var(--chat-border);
|
border-bottom: var(--chat-border);
|
||||||
}
|
}
|
||||||
#chat-users_js__header > h4 {
|
#chat-users-header > h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
#chat-users_js__main {
|
#chat-users_js {
|
||||||
margin: 0.5rem 0.75rem;
|
padding: 0.5rem 0.75rem 0.875rem;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
#chat-users-watching-header,
|
#chat-users_js__watching-header,
|
||||||
#chat-users-notwatching-header {
|
#chat-users_js__notwatching-header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#chat-users-watching,
|
#chat-users_js__watching,
|
||||||
#chat-users-notwatching {
|
#chat-users_js__notwatching {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.75rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
|
@ -15,11 +15,14 @@
|
||||||
<label id="chat__header__button" for="chat__toggle">Users</label>
|
<label id="chat__header__button" for="chat__toggle">Users</label>
|
||||||
<h3 id="chat__header__text">Stream chat</h3>
|
<h3 id="chat__header__text">Stream chat</h3>
|
||||||
</header>
|
</header>
|
||||||
<article id="chat__messages">
|
<article id="chat__body">
|
||||||
<noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
|
<section id="chat__body__messages">
|
||||||
</article>
|
<noscript><iframe id="chat-messages_nojs" src="{{ url_for('nojs_chat', token=user.token, _anchor='end') }}" data-js="false"></iframe></noscript>
|
||||||
<article id="chat__users">
|
</section>
|
||||||
<noscript><iframe id="chat-users_nojs" src="{{ url_for('nojs_users', token=user.token) }}" data-js="false"></iframe></noscript>
|
<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>
|
</article>
|
||||||
<section id="chat__form">
|
<section id="chat__form">
|
||||||
<noscript><iframe id="chat-form_nojs" src="{{ url_for('nojs_form', token=user.token) }}" data-js="false"></iframe></noscript>
|
<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%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0 0 0.875rem;
|
margin: 0;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
font-family: sans-serif;
|
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 {
|
#timeout {
|
||||||
height: 0;
|
height: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
@ -57,7 +47,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#main {
|
#main {
|
||||||
margin: 0.5rem 0.75rem;
|
margin: 0.5rem 0.75rem 0.875rem;
|
||||||
}
|
}
|
||||||
#main > h5 {
|
#main > h5 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -82,7 +72,6 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header id="header"><h4>Users in chat</h4></header>
|
|
||||||
<aside id="timeout">
|
<aside id="timeout">
|
||||||
<a href="">
|
<a href="">
|
||||||
<header>Timed out</header>
|
<header>Timed out</header>
|
||||||
|
|
読み込み中…
新しいイシューから参照