v1.0.1

Stops messages being able to obscure other messages with weird unicode
characters.

CHANGELOG.md

@@ -0,0 +1,15 @@
+### 1.0.0
+
+* Reimplemented the project from scratch. The original implementation
+  is on the [`historical`][historical] branch.
+
+##### 1.0.1
+
+* Added `overflow: hidden;` css to chat messages. This prevents
+  messages with weird unicode characters from overlapping other
+  messages.
+* Fixed users' colours in nojs chat.
+* Added `white-space: pre-wrap;` css to chat messages, so
+  multi-line messages actually appear on multiple lines.
+
+[historical]: https://git.076.ne.jp/ninya9k/anonstream/src/branch/historical

anonstream/static/style.css

@@ -188,6 +188,7 @@ noscript {
   width: 100%;
   box-sizing: border-box;
   border-radius: 4px;
+  overflow: hidden;
 }
 .chat-message:hover {
   background-color: #434347;
@@ -213,6 +214,7 @@ noscript {
   vertical-align: top;
 }
 .chat-message__markup {
+  white-space: pre-wrap;
   overflow-wrap: anywhere;
   line-height: 1.3125;
 }

anonstream/templates/home.html

@@ -41,7 +41,7 @@
     <a href="#chat">chat</a>
     <a href="#both">both</a>
   </nav>
-  <footer>anonstream 1.0.0 &mdash; <a href="https://git.076.ne.jp/ninya9k/anonstream" target="_blank">source</a></footer>
+  <footer>anonstream 1.0.1 &mdash; <a href="https://git.076.ne.jp/ninya9k/anonstream" target="_blank">source</a></footer>
   <script src="{{ url_for('static', filename='anonstream.js') }}" type="text/javascript"></script>
 </body>
 </html>

anonstream/templates/nojs_chat_messages.html

@@ -98,6 +98,7 @@
       box-sizing: border-box;
       border-radius: 4px;
       transform: rotate(-180deg);
+      overflow: hidden;
     }
     .chat-message:hover {
       background-color: #434347;
@@ -123,6 +124,7 @@
       vertical-align: top;
     }
     .chat-message__markup {
+      white-space: pre-wrap;
       overflow-wrap: anywhere;
       line-height: 1.3125;
     }
@@ -135,14 +137,14 @@
     }
 
     {% for token in messages | map(attribute='token') | list | unique %}
-      {% with user = users_by_token[token] %}
-        [data-token-hash="{{ user.token_hash }}"] > .chat-message__name {
-          color: {{ user.color }};
+      {% with this_user = users_by_token[token] %}
+        [data-token-hash="{{ this_user.token_hash }}"] > .chat-message__name {
+          color: {{ this_user.color }};
         }
-        {% if user.tripcode %}
-          [data-token-hash="{{ user.token_hash }}"] > .tripcode {
-            background-color: {{ user.tripcode.background_color }};
-            color: {{ user.tripcode.foreground_color }};
+        {% if this_user.tripcode %}
+          [data-token-hash="{{ this_user.token_hash }}"] > .tripcode {
+            background-color: {{ this_user.tripcode.background_color }};
+            color: {{ this_user.tripcode.foreground_color }};
           }
         {% endif %}
       {% endwith %}
@@ -160,15 +162,15 @@
   </aside>
   <ol id="chat-messages">
     {% for message in messages | reverse %}
-      <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ user.token_hash }}">
-        {% with user = users_by_token[message.token] %}
+      {% with this_user = users_by_token[message.token] %}
+        <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ this_user.token_hash }}">
           <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
           {{- '&nbsp;' | safe -}}
-          {{ appearance(user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}
+          {{ appearance(this_user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}
           {{- ': ' -}}
           <span class="chat-message__markup">{{ message.markup }}</span>
-        {% endwith %}
-      </li>
+        </li>
+      {% endwith %}
     {% endfor %}
   </ol>
   <aside id="timeout-dismiss">

anonstream/templates/nojs_chat_users.html

@@ -86,14 +86,14 @@
       cursor: default;
     }
 
-    {% for user in users_watching + users_notwatching %}
-      [data-token-hash="{{ user.token_hash }}"] > .user__name {
-        color: {{ user.color }};
+    {% for this_user in users_watching + users_notwatching %}
+      [data-token-hash="{{ this_user.token_hash }}"] > .user__name {
+        color: {{ this_user.color }};
       }
-      {% if user.tripcode %}
-        [data-token-hash="{{ user.token_hash }}"] > .tripcode {
-          background-color: {{ user.tripcode.background_color }};
-          color: {{ user.tripcode.foreground_color }};
+      {% if this_user.tripcode %}
+        [data-token-hash="{{ this_user.token_hash }}"] > .tripcode {
+          background-color: {{ this_user.tripcode.background_color }};
+          color: {{ this_user.tripcode.foreground_color }};
         }
       {% endif %}
     {% endfor %}