Add mobile styling

kova98 · Oct 20, 2023 · 8047a24 · 8047a24
1 parent ee832f5
commit 8047a24
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 23 deletions.
diff --git a/web-client/app.js b/web-client/app.js
@@ -6,10 +6,31 @@ let serverAddress = 'wss://playground.rokokovac.com/chat';
 // let serverAddress = 'ws://localhost:5000';
 
 const nameInput = document.getElementById('nameInput');
-enableEnterToSubmit(nameInput, connect);
 nameInput.focus();
 nameInput.value = name;
 
+nameInput.addEventListener('keypress', function (event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+        if (name.length > 16){
+            return;
+        }
+        event.preventDefault();
+        connect();
+    }
+});
+
+const connectButton = document.getElementById('connectButton');
+nameInput.addEventListener("input", function(event) {
+    setStatus('');
+    connectButton.disabled = false;
+    name = nameInput.value.trim();
+    if (name.length > 16){
+        setStatus('Name is too long');
+        connectButton.disabled = true;
+        return;
+    }
+});
+
 const messageInput = document.getElementById('messageInput');
 messageInput.addEventListener('keypress', function (event) {
     const messageText = messageInput.value.trim();
@@ -37,17 +58,18 @@ messageInput.addEventListener("input", function(event) {
     }
 });
 
-function enableEnterToSubmit(input, action) {
-    input.addEventListener('keypress', function (event) {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            action();
-        }
-    });
-}
-
 function connect() {
     name = nameInput.value.trim();
+    if (!name) {
+        setStatus('Please enter the name.');
+        return;
+    }
+
+    if (name.length > 16) {
+        setStatus('Name is too long.');
+        return;
+    }
+
     localStorage.setItem("name", name);
     const nameParam = encodeURIComponent(name);
     socket = new WebSocket(serverAddress + '/ws?name=' + nameParam);
@@ -140,16 +162,18 @@ function handleUserList(message) {
 }
 
 function updateUsersDisplay() {
-    const usersList = document.getElementById('users');
-    usersList.innerHTML = '';
-    for (let i = 0; i < users.length; i++) {
-        const userElement = document.createElement('div');
-        userElement.className = 'user';
-        userElement.innerText = users[i];
-        if (users[i] === name) {
-            userElement.classList.add('current-user');
+    const usersList = document.getElementsByClassName('users');
+    for (let i = 0; i < usersList.length; i++) {
+        usersList[i].innerHTML = '';
+        for (let j = 0; j < users.length; j++) {
+            const userElement = document.createElement('div');
+            userElement.className = 'user';
+            userElement.innerText = users[j];
+            if (users[j] === name) {
+                userElement.classList.add('current-user');
+            }
+            usersList[i].appendChild(userElement);
         }
-        usersList.appendChild(userElement);
     }
 }
 

diff --git a/web-client/index.html b/web-client/index.html
@@ -14,23 +14,24 @@
             <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>
+            <button id="connectButton" class="button" onclick="connect()">Join</button>
         </div>
     </div>
     <div class="page" id="chatPage" style="display: none;">
         <div class="status" hidden></div>
         <div class="chat-container">
+
             <div class="chat">
+                <div class="users mobile-users-list">asdf</div>
+
                 <div id="messages"></div>
                 <div class="input-section">
                     <div id="error-message" hidden></div>
                     <input class="input" type="text" id="messageInput" placeholder="Type a message">
                     <button id="sendButton" class="button" onclick="sendMessage()">Send</button>
                 </div>
             </div>
-            <div class="users-list" id="users">
-
-            </div>
+            <div class="users users-list"></div>
         </div>
     </div>
 </div>

diff --git a/web-client/styles.css b/web-client/styles.css
@@ -121,6 +121,10 @@ h1 {
     padding-left: 16px;
 }
 
+.mobile-users-list {
+    display:none;
+}
+
 .current-user {
     font-weight: bold;
 }
@@ -161,3 +165,36 @@ h1 {
 #error-message {
     color: red;
 }
+
+@media (max-width: 768px) {
+    .home-container {
+        width: 100vw;
+    }
+
+    .chat {
+        width: 100%;
+    }
+
+    .chat-container {
+        width: 80vw;
+        height: 90vh;
+        padding: 30px;
+    }
+
+    .users-list {
+        display:none;
+    }
+
+    .mobile-users-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr; /* Creates 3 equal-width columns */
+        gap: 4px; /* Optional: adds spacing between grid items */
+        margin-bottom: 4px;
+        border-bottom: 2px solid grey;
+        padding-bottom: 16px;
+    }
+
+    .user {
+        margin-right: 10px;
+    }
+}