add: Load button style and autoscroll

public/css/main.css

@@ -315,6 +315,45 @@ body {
     margin: auto;
 }
 
+#load-more {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.load-more {
+    display: block;
+    width: 128px;
+    height: 40px;
+    margin: 16px auto;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 40px;
+    border-color: #50A0F0;
+    color: #50A0F0;
+    background-color: transparent;
+    font-size: 16pt;
+    font-weight: 500;
+}
+
+.load-more:focus {
+    color: #4595E5;
+    border-color: #4595E5;
+    outline-color: #70C0F0;
+    outline-width: 2px;
+}
+
+.load-more:hover {
+    color: #4595E5;
+    border-color: #4595E5;
+}
+
+.load-more:active {
+    color: #3585D5;
+    border-color: #3585D5;
+}
+
 @media screen and (max-width: 600px) {
     .hs {
         height: 12px;
@@ -416,6 +455,14 @@ body {
         left: 12px;
         top: 12px;
     }
+
+    .load-more {
+        width: 120px;
+        height: 32px;
+        margin: 12px auto;
+        border-radius: 32px;
+        font-size: 14pt;
+    }
 }
 
 @media screen and (max-width: 400px) {
@@ -519,6 +566,14 @@ body {
         left: 10px;
         top: 10px;
     }
+
+    .load-more {
+        width: 112px;
+        height: 28px;
+        margin: 10px auto;
+        border-radius: 28px;
+        font-size: 12pt;
+    }
 }
 
 @media screen and (max-width: 240px) {
@@ -622,4 +677,12 @@ body {
         left: 8px;
         top: 8px;
     }
+    
+    .load-more {
+        width: 104px;
+        height: 24px;
+        margin: 8px auto;
+        border-radius: 24px;
+        font-size: 11pt;
+    }
 }

src/views/add.ejs

@@ -7,7 +7,7 @@
     </div>
     <div class="chat-list">
         <form method="POST" action="/add" class="input-form">
-            <input type="username" name="username" placeholder="Enter username..." class="text-input" required />
+            <input type="username" name="username" placeholder="Enter username..." class="text-input" autocomplete="off" required />
             <input type="submit" value="Add" class="button" />
         </form>
         <% if (notFound) { %>

src/views/chat.ejs

@@ -17,17 +17,20 @@
             </div>
         <% }); %>
         <% if (hasMoreMessages) { %>
-            <button id="load-more" class="button">Load More</button>
+            <form id="load-more" onsubmit="return onLoadMoreClick(event)">
+                <input type="submit" value="Load More" class="load-more" />
+            </form>
         <% } %>
     </div>
     <form onsubmit="return onMessageSubmit(event)" class="input-form">
-        <input type="text" id="message-input" name="text" placeholder="Enter message..." class="text-input" required />
+        <input type="text" id="message-input" name="text" placeholder="Enter message..." class="text-input" autocomplete="off" required />
         <input type="submit" value="Send" class="button" />
     </form>
 </div>
 <script>
     var firstTimestamp = new Date("<%- firstTimestamp %>").toISOString();
     var lastTimestamp = new Date().toISOString()
+    var loadMoreForm = document.getElementById("load-more")
     var messageList = document.getElementById("message-list")
     var messageInput = document.getElementById("message-input")
     var timestamps = document.getElementsByClassName("message-datetime")
@@ -52,6 +55,7 @@
         container.appendChild(datetimeSpan)
         lastTimestamp = message.datetime
         messageList.insertBefore(container, before)
+        container.scrollIntoView(false);
     }
     function onMessageSubmit(event) {
         event.preventDefault()
@@ -86,7 +90,8 @@
         }
         xhr.send(JSON.stringify(data))
     }
-    function loadMoreMessages() {
+    function onLoadMoreClick(event) {
+        event.preventDefault()
         var data = { timestamp: firstTimestamp }
         var xhr = new XMLHttpRequest()
         xhr.open("POST", "/chat/<%- title %>/messages")
@@ -100,14 +105,14 @@
                 }
                 firstTimestamp = response.timestamp
                 if (!response.hasMoreMessages) {
-                    document.getElementById("load-more").style.display = "none"
+                    loadMoreForm.style.display = "none"
                 }
             } else {
-                document.getElementById("load-more").style.display = "none"
+                loadMoreForm.style.display = "none"
             }
         }
         xhr.send(JSON.stringify(data))
+        return false
     }
-    document.getElementById("load-more")?.addEventListener("click", loadMoreMessages)
     pollMessages()
 </script>