Nojs users list: add meta refresh tag & timeout

このコミットが含まれているのは:
n9k 2022-02-27 05:01:49 +00:00
コミット 69027f1097
3個のファイルの変更53行の追加12行の削除

ファイルの表示

@ -45,12 +45,13 @@ async def nojs_chat_redirect(user):
@with_user_from(request)
async def nojs_users(user):
users_by_presence = get_users_by_presence()
return await render_template(
return await render_template_with_etag(
'nojs_users.html',
user=user,
get_default_name=get_default_name,
users_watching=users_by_presence[Presence.WATCHING],
users_notwatching=users_by_presence[Presence.NOTWATCHING],
timeout=CONFIG['THRESHOLD_NOJS_CHAT_TIMEOUT'],
)
@current_app.route('/chat/form.html')

ファイルの表示

@ -33,7 +33,7 @@
text-decoration: none;
transform: rotate(-180deg);
}
#chat-timeout {
#timeout {
z-index: 1;
position: absolute;
top: 0.5rem;
@ -41,15 +41,15 @@
visibility: hidden;
animation: appear 0s {{ timeout }}s forwards;
}
#chat-timeout header {
#timeout header {
font-size: 20pt;
}
#chat-timeout-dismiss {
#timeout-dismiss {
position: absolute;
bottom: 2px;
width: calc(100% - 1rem);
}
#chat-timeout-dismiss > .button {
#timeout-dismiss > .button {
visibility: hidden;
height: 0;
padding: 0;
@ -58,12 +58,12 @@
appear 0s {{ timeout }}s forwards,
unskinny 0s {{ timeout }}s forwards;
}
#chat-timeout-alt {
#timeout-alt {
padding: 4px 0 2px 0;
}
#notimeout:target + #chat-timeout,
#notimeout:target ~ #chat-timeout-dismiss,
#notimeout:not(:target) ~ #chat-timeout-alt {
#notimeout:target + #timeout,
#notimeout:target ~ #timeout-dismiss,
#notimeout:not(:target) ~ #timeout-alt {
display: none;
}
@keyframes appear {
@ -127,7 +127,7 @@
<body>
<div id="end"></div>
<div id="notimeout"></div>
<aside id="chat-timeout">
<aside id="timeout">
<a class="button" href="{{ url_for('nojs_chat_redirect') }}">
<header>Timed out</header>
<small>Click to refresh</small>
@ -146,10 +146,10 @@
</li>
{% endfor %}
</ol>
<aside id="chat-timeout-dismiss">
<aside id="timeout-dismiss">
<a class="button" href="#notimeout">Hide timeout notice</a>
</aside>
<aside id="chat-timeout-alt">
<aside id="timeout-alt">
<a class="button" href="{{ url_for('nojs_chat_redirect') }}">Click to refresh</a>
</aside>
</body>

ファイルの表示

@ -3,6 +3,7 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="6">
<style>
html {
min-height: 100%;
@ -22,6 +23,39 @@
font-weight: normal;
text-align: center;
}
#timeout {
height: 0;
visibility: hidden;
animation: appear 0s {{ timeout }}s forwards;
}
#timeout > a {
display: block;
text-align: center;
background-color: #3674bf;
border: 4px outset #3584e4;
box-shadow: 0 0 5px #3584e4;
padding: 1.25ch 0;
box-sizing: border-box;
color: inherit;
font-size: 12pt;
font-weight: bold;
text-decoration: none;
animation: unskinny 0s {{ timeout }}s forwards;
}
#timeout header {
font-size: 20pt;
}
@keyframes appear {
to {
height: auto;
visibility: visible;
}
}
@keyframes unskinny {
to {
margin: 0.5rem;
}
}
#main {
margin: 0.5rem 0.75rem;
}
@ -49,6 +83,12 @@
</head>
<body>
<header id="header"><h4>Users in chat</h4></header>
<aside id="timeout">
<a href="">
<header>Timed out</header>
<small>Click to refresh</small>
</a>
</aside>
<main id="main">
<h5>Watching ({{ users_watching | length }})</h5>
<ul>