ninya9k/anonstream
1
1
フォーク 0
コード イシュー プルリクエスト プロジェクト リリース アクティビティ

manual refresh banner in list of users

ソースを参照
このコミットが含まれているのは:
n9k 2021-04-16 12:28:41 +00:00
コミット 65b56fbda0
4個のファイルの変更、90行の追加、25行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

5
website/static/platform.css
ファイルの表示

@ -15,7 +15,8 @@
height: calc(100vw * 9 / 16);
}
#chat-window iframe {
height: calc(100vh - (100vw * 9 / 16 + 20em));
height: calc(100vh - (100vw * 9 / 16 + 20.5em));
margin-bottom: 0.5em;
min-height: 12em;
}
#chat {
@ -72,7 +73,7 @@ form[target="users"] {
}
@media screen and (min-width:48em) {
#chat-window iframe {
height: calc(100vh - 1px - 10em);
height: calc(100vh - 1px - 10.5em);
}
#stream {
height: calc(100vw * 2 / 3 * 9 / 16); /* 16:9 video taking up 2/3 of the page horizontally */

37
website/templates/chat-iframe.html
ファイルの表示

@ -4,8 +4,9 @@
<meta http-equiv="conent-security-policy" content="default-src 'none'">
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style>
body {margin: 0.5em;margin-bottom: 0;min-height: calc(100vh - 1em);}
body {margin: 0 0.5em;min-height: calc(100vh - 1em);}
#messages {transform: scaleX(-1);}
form {margin: 0;}
.inline-block {display: inline-block;}
.rotate {transform: rotate(-180deg);}
.reverse {direction: rtl;}
@ -28,31 +29,38 @@
.time {font-size: 80%;color: gray;vertical-align:middle;margin-right:0.5em;}
{% if include_user_list %}
#users {color:white;margin-left:0.5em;}
#users {color:white;}
.group {margin-bottom:1.5em;}
.group-name {margin-bottom:0.25em;}
.person {margin-left: 0.5em;}
{% endif %}
input[type="submit"] {padding: 0;margin-bottom: 0.5em;}
div#refresh {
.refresh {
color: white;
background-color: gray;
position: sticky;
/*top: 100vh;*/ /* placement is correct with top when there is no scrollbar */
bottom: 0; /* placement is correct with bottom when there is a scrollbar */
/*top: 100vh;*/ /* (when upside down etc.) placement is correct with top when there is no scrollbar */
bottom: 0; /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
div#refresh {
.unhide {
animation: unhide 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide {
to {
height: revert;
@ -60,6 +68,14 @@
visibility: visible;
}
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
margin-bottom: 1.25em;
}
}
</style>
</head>
<body>
@ -97,10 +113,14 @@
</form>
{% endif %}
<a href="" style="text-decoration: none;"><div id="refresh" class="rotate">Manual refresh required</div></a>
<a href="" style="text-decoration: none;"><div class="refresh unhide rotate">Manual refresh required</div></a>
</div>
{% if include_user_list %}
<div id="users" style="display: none;">
<div id="users" style="overflow: hidden;height:0;">
<a href="" style="text-decoration: none;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;">Manual refresh required</div>
</a>
<div style="margin: 0.5em 1em 0 1em;">
{% with person = people['broadcaster'] %}
{% if person %}
<div class="group">
@ -151,6 +171,7 @@
</form>
{% endif %}
</div>
</div>
{% endif %}
</body>
</html>

22
website/templates/index.html
ファイルの表示

@ -21,13 +21,16 @@
}
{% endif %}
#users-container {
display: none;
height: 0;
overflow: hidden;
}
#users-toggle:checked ~ #chat-window #users-container {
display: revert;
height: revert;
overflow: revert;
}
#users-toggle:checked ~ #chat-window #chat-container {
display: none;
height: 0;
overflow: hidden;
}
#users-toggle:checked + .banner form[target="chat"] {
display: none;
@ -121,13 +124,18 @@
const chatUsers = chat.contentDocument.getElementById("users");
if ( chatUsers == null || chatMessages == null )
return;
/* using display: none; resets css animations, i.e. the manual refresh banner */
if ( usersToggle.checked ) {
chatMessages.style.display = "none";
chatUsers.style.display = null;
chatMessages.style.overflow = "hidden";
chatMessages.style.height = "0";
chatUsers.style.height = "unset";
chatUsers.style.overflow = "unset";
chat.style.transform = "revert";
} else {
chatUsers.style.display = "none";
chatMessages.style.display = null;
chatUsers.style.overflow = "hidden";
chatUsers.style.height = "0";
chatMessages.style.height = "unset";
chatMessages.style.overflow = "unset";
chat.style.transform = null;
}
}

37
website/templates/users-iframe.html
ファイルの表示

@ -2,7 +2,7 @@
<head>
{% if not debug %}<meta http-equiv="refresh" content="8">{% endif %}
<style>
body {color:white;margin-left: 1em;}
body {color:white;margin-top: 0;margin-bottom: 0;}
.group {margin-bottom:1.5em;}
.group-name {margin-bottom:0.25em;}
.person {margin-left: 0.5em;}
@ -18,9 +18,43 @@
vertical-align: middle;
display: inline-block;
}
form {
margin: 0;
}
.refresh {
color: white;
background-color: gray;
position: sticky;
top: 0; /* (when upside down etc.) placement is correct with top when there is no scrollbar */
/*bottom: 0;*/ /* (when upside down etc.) placement is correct with bottom when there is a scrollbar */
padding: 1em;
text-align: center;
font-weight: bold;
border-radius: 4px;
box-shadow: 0px 2px 4px black;
margin: 0;
}
.unhide-margin {
animation: unhide-margin 0s forwards 30s;
height: 0;
padding: 0;
visibility: hidden;
}
@keyframes unhide-margin {
to {
height: revert;
padding: 1em;
visibility: visible;
marign-bottom: 1.25em;
}
}
</style>
</head>
<body>
<a href="" style="text-decoration: none;">
<div class="refresh unhide-margin" style="bottom:revert;top:0;">Manual refresh required</div>
</a>
<div style="margin: 0 1em;">
{% with person = people['broadcaster'] %}
{% if person %}
<div class="group">
@ -70,5 +104,6 @@
<button>Unban</button>
</form>
{% endif %}
</div>
</body>
</html>