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) @with_user_from(request)
async def nojs_users(user): async def nojs_users(user):
users_by_presence = get_users_by_presence() users_by_presence = get_users_by_presence()
return await render_template( return await render_template_with_etag(
'nojs_users.html', 'nojs_users.html',
user=user, user=user,
get_default_name=get_default_name, get_default_name=get_default_name,
users_watching=users_by_presence[Presence.WATCHING], users_watching=users_by_presence[Presence.WATCHING],
users_notwatching=users_by_presence[Presence.NOTWATCHING], users_notwatching=users_by_presence[Presence.NOTWATCHING],
timeout=CONFIG['THRESHOLD_NOJS_CHAT_TIMEOUT'],
) )
@current_app.route('/chat/form.html') @current_app.route('/chat/form.html')

ファイルの表示

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

ファイルの表示

@ -3,6 +3,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="refresh" content="6">
<style> <style>
html { html {
min-height: 100%; min-height: 100%;
@ -22,6 +23,39 @@
font-weight: normal; font-weight: normal;
text-align: center; 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 { #main {
margin: 0.5rem 0.75rem; margin: 0.5rem 0.75rem;
} }
@ -49,6 +83,12 @@
</head> </head>
<body> <body>
<header id="header"><h4>Users in chat</h4></header> <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"> <main id="main">
<h5>Watching ({{ users_watching | length }})</h5> <h5>Watching ({{ users_watching | length }})</h5>
<ul> <ul>