Initial commit

4dd05c9e · Caleb C. Sander · 4dd05c9e · 4dd05c9e · 4dd05c9e · 4dd05c9e
Commit 4dd05c9e authored 5 years ago by Caleb C. Sander
Hide whitespace changes
Inline Side-by-side

Showing

with 79 additions and 0 deletions
+79 -0
--- a/README.md
+++ b/README.md
+# Project 5 - Chat client
+The spec for this project can be found at [`specs/chat/client.md`](https://gitlab.caltech.edu/cs11-async/documents/blob/master/specs/chat/client.md).
--- a/client.js
+++ b/client.js
--- a/index.html
+++ b/index.html
+<html>
+  <head>
+    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' />
+    <link rel='stylesheet' href='style.css' />
+    <script src='client.js'></script>
+  </head>
+  <body>
+    <!-- This div is shown at startup and asks the user to enter their username -->
+    <div class='container' id='login-page'>
+      <div class='row no-gutters'>
+        <div class='col-12'>
+          <div class='card'>
+            <h3 class='card-header'>Login</h3>
+            <div class='card-body'>
+              <div class='input-group'>
+                <input class='form-control' id='user' placeholder='Username' autofocus />
+                <div class='input-group-append'>
+                  <button class='btn btn-primary' id='login'>Join</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Once the user logs in, this div should be shown instead -->
+    <div class='container hidden' id='chat-page'>
+      <div class='row no-gutters'>
+        <!-- The column on the left shows the users available to chat with -->
+        <div class='col-3'>
+          <div class='card'>
+            <h3 class='card-header'>Users</h3>
+            <ul class='list-group list-group-flush' id='users'></ul>
+          </div>
+        </div>
+        <!-- The column on the right shows the messages to and from the selected user -->
+        <div class='col-9'>
+          <div class='card'>
+            <h3 class='card-header'>Messages</h3>
+            <div class='card-body'>
+              <h5 class='card-title' id='chat-title'></h5>
+            </div>
+            <ul class='list-group list-group-flush' id='messages'></ul>
+            <div class='card-footer'>
+              <div class='input-group'>
+                <input class='form-control' id='message' placeholder='Message' />
+                <div class='input-group-append'>
+                  <button class='btn btn-primary' id='send'>Send</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
+/* If the "Users" or "Messages" panes get too tall, make them scrollable */
+.card {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+.card .list-group {
+  overflow-y: auto;
+}
+/* Add spacing between usernames and unread bubbles */
+.badge {
+  margin-left: 5px;
+}
+/* A class used to hide an element */
+.hidden {
+  display: none;
+}