From 65b56fbda0bf201837cd8927e6c0578a983b44f2 Mon Sep 17 00:00:00 2001
From: ninya9k <originalcocaineninja@protonmail.com>
Date: Fri, 16 Apr 2021 12:28:41 +0000
Subject: [PATCH] manual refresh banner in list of users

---
 website/static/platform.css         |  5 +--
 website/templates/chat-iframe.html  | 51 ++++++++++++++++++++---------
 website/templates/index.html        | 22 +++++++++----
 website/templates/users-iframe.html | 37 ++++++++++++++++++++-
 4 files changed, 90 insertions(+), 25 deletions(-)

diff --git a/website/static/platform.css b/website/static/platform.css
index 4b2618e..e4c1407 100644
--- a/website/static/platform.css
+++ b/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 */
diff --git a/website/templates/chat-iframe.html b/website/templates/chat-iframe.html
index 7fa0a34..ddd7722 100644
--- a/website/templates/chat-iframe.html
+++ b/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,38 +29,53 @@
           .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;
           }
-        @keyframes unhide {
-          to {
-            height: revert;
-            padding: 1em;
-            visibility: visible;
+          .unhide-margin {
+            animation: unhide-margin 0s forwards 30s;
+            height: 0;
+            padding: 0;
+            visibility: hidden;
+          }
+          @keyframes unhide {
+            to {
+              height: revert;
+              padding: 1em;
+              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>
+</html>
\ No newline at end of file
diff --git a/website/templates/index.html b/website/templates/index.html
index a52c41c..47df243 100644
--- a/website/templates/index.html
+++ b/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;
             }
         }
diff --git a/website/templates/users-iframe.html b/website/templates/users-iframe.html
index b2e202e..3f33629 100644
--- a/website/templates/users-iframe.html
+++ b/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>
\ No newline at end of file