modified chatroom UI/UX

minhyeong-joe · Aug 12, 2020 · f4b3119 · f4b3119
1 parent 053dab3
commit f4b3119
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 11 deletions.
diff --git a/public/chatroom.html b/public/chatroom.html
@@ -63,7 +63,7 @@ <h3>Guess the code and Sabotage the mission!</h3>
                     <div class="card-body">
                         <div class="row no-gutters">
                             <!-- left panel -->
-                            <div class="col-12 col-md-3 order-1 order-md-0">
+                            <div class="col-12 col-md-3 order-1 order-md-0 d-flex flex-column">
                                 <!-- rooms and users container -->
                                 <div class="left-panel custom-scroll">
                                     <div class="users">
@@ -74,7 +74,7 @@ <h3><i class="fas fa-users"></i> Users</h3>
                                 </div>
                                 <!-- end of rooms and users container -->
                                 <!-- create new room button area -->
-                                <div class="card-footer">
+                                <div class="card-footer flex-grow-1">
                                     <a id="exit-room-btn" href="/public.html">Exit Room</a>
                                 </div>
                                 <!-- end of create new room button area -->
@@ -83,14 +83,14 @@ <h3><i class="fas fa-users"></i> Users</h3>
                             <!-- right panel of app -->
                             <div class="col-12 col-md-9 order-0 order-md-1">
                                 <!-- chat area -->
-                                <div class="chat-area custom-scroll">
+                                <div class="chat-area no-scroll">
 
                                 </div>
                                 <!-- end of chat area -->
                                 <!-- message input area -->
                                 <div class="card-footer">
                                     <form action="#" id="message-form">
-                                        <input type="text" id="messageInput" autocomplete="off">
+                                        <textarea id="messageInput" autocomplete="off" maxlength="100" rows="1"></textarea>
                                         <button type="submit" id="message-send-btn" disabled>SEND</button>
                                         <div class="alert alert-danger hide" id="spam-prevention">
                                         </div>
@@ -166,6 +166,7 @@ <h5>Choose the secret code to sabotage the mission</h5>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
     <script src="https://cdn.rawgit.com/h2non/jsHashes/master/hashes.js"></script>
+    <script src="scripts/autosize.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script src="scripts/chatroom.js"></script>
 </body>

diff --git a/public/public.html b/public/public.html
@@ -25,7 +25,7 @@
                     <div class="card-body">
                         <div class="row no-gutters">
                             <!-- left panel -->
-                            <div class="col-12 col-md-3 order-1 order-md-0">
+                            <div class="col-12 col-md-3 order-1 order-md-0 d-flex flex-column">
                                 <!-- rooms and users container -->
                                 <div class="left-panel custom-scroll">
                                     <div class="rooms">
@@ -42,7 +42,7 @@ <h3><i class="fas fa-users"></i> Users</h3>
                                 </div>
                                 <!-- end of rooms and users container -->
                                 <!-- create new room button area -->
-                                <div class="card-footer h-100">
+                                <div class="card-footer flex-grow-1">
                                     <button type="button" id="create-room-btn">Create Room</button>
                                 </div>
                                 <!-- end of create new room button area -->
@@ -58,7 +58,7 @@ <h3><i class="fas fa-users"></i> Users</h3>
                                 <!-- message input area -->
                                 <div class="card-footer">
                                     <form action="#" id="message-form">
-                                        <textarea type="text" id="messageInput" autocomplete="off" maxlength="100" rows="1"></textarea>
+                                        <textarea id="messageInput" autocomplete="off" maxlength="100" rows="1"></textarea>
                                         <button type="submit" id="message-send-btn" disabled>SEND</button>
                                         <div class="alert alert-danger hide" id="spam-prevention">
                                         </div>

diff --git a/public/scripts/chatroom.js b/public/scripts/chatroom.js
@@ -239,6 +239,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // sending message
     chatForm.addEventListener('submit', (e) => {
         e.preventDefault();
+        messageInput.style.height = "2.3125rem";
         const msg = e.target.elements.messageInput.value;
         if (msg == "") {
             return;
@@ -266,6 +267,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }, 2000);
     });
 
+    // character count and enable send button when there's input
     messageInput.addEventListener('input', e => {
         if (e.target.value == "") {
             messageSendBtn.setAttribute('disabled', true);
@@ -275,6 +277,16 @@ document.addEventListener('DOMContentLoaded', () => {
         charCount.innerText = e.target.value.length;
     });
 
+    // press enter to submit form (instead of new line in textarea)
+    messageInput.addEventListener('keypress', e => {
+        // press enter sends message
+        if (e.which == 13) {
+            e.preventDefault();
+            messageSendBtn.click();
+            messageInput.style.height = "2.3125rem";
+        }
+    });
+
     // send selected topic to everyone to see
     topicSelect.addEventListener('change', e => {
         if (!isHost) {
@@ -345,6 +357,8 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    // autogrow textarea
+    autosize(document.querySelector('textarea'));
 
     // generate chat messages
     const renderChatMessage = (sessionId, data) => {

diff --git a/public/styles/chatroom.css b/public/styles/chatroom.css
diff --git a/public/styles/chatroom.scss b/public/styles/chatroom.scss
@@ -29,6 +29,9 @@
     overflow-y: scroll;
     height: 38rem;
     padding: 0.5rem;
+    &.no-scroll {
+        overflow-y: hidden;
+    }
 }
 
 .custom-scroll::-webkit-scrollbar {

diff --git a/public/styles/game.css b/public/styles/game.css
diff --git a/public/styles/game.scss b/public/styles/game.scss
@@ -43,11 +43,16 @@
     }
 }
 
+.game-buttons {
+    position: absolute;
+    width: 100%;
+}
+
 @media screen and (max-width: 768px) {
     .card-body {
-        height: 72.5rem;
+        // height: 72.5rem;
         .row {
-            height: 72.5rem;
+            // height: 72.5rem;
         }
     }
 }