Add autoscroll and title, fix style

kova98 · Oct 19, 2023 · 6fe229e · 6fe229e
1 parent 3da0a1b
commit 6fe229e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/web-client/app.js b/web-client/app.js
@@ -93,6 +93,7 @@ function handleChatMessage(messageObject) {
 
     const messages = document.getElementById('messages');
     messages.appendChild(message);
+    messages.scrollTop = messages.scrollHeight
 }
 
 function sendMessage() {

diff --git a/web-client/index.html b/web-client/index.html
@@ -3,14 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebSocket Chat</title>
+    <title>Chat</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
 <div id="app">
     <div class="page" id="homePage" style="display: block;">
         <div class="home-container">
+            <h1>Chat</h1>
             <div class="status" hidden></div>
             <input class="input" type="text" id="nameInput" placeholder="Enter your name">
             <button class="button" onclick="connect()">Join</button>

diff --git a/web-client/styles.css b/web-client/styles.css
@@ -21,22 +21,33 @@ body {
 .home-container {
     display: flex;
     flex-direction: column;
-    align-items: stretch; /* Changed from center to stretch to allow child elements to grow */
+    align-items: stretch;
     justify-content: center;
     background-color: var(--primary-color);
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    padding: 50px;
-    height: 30vh;
+    padding: 20px 50px 50px 50px;
     width: 50vw;
-    max-height: 100px;
     max-width: 300px;
 }
 
+
+.status {
+    margin-bottom: 12px;
+    color: var(--font-color);
+    text-align: center;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 16px;
+}
+
 .button, .input {
-    flex-grow: 1; /* Allows the elements to grow and take up available space */
-    width: 100%; /* Makes sure the elements take the full width of the container */
-    margin: 4px 0; /* Adjusted margin to apply only to the top and bottom */
+    flex-grow: 1; 
+    width: 100%; 
+    margin: 4px 0; 
 }
 
 .button {
@@ -46,7 +57,7 @@ body {
     background-color: var(--accent-color);
     color: white;
     cursor: pointer;
-    max-height: 40px; /* Added max-height to prevent the button from growing too large */
+    max-height: 40px; 
 }
 
 .button:hover {