Merge branch 'master' into kevin-prototype

website/styles/chat.css

@@ -1,44 +1,70 @@
+/* Overall chat-screen */
 .chat {
+    position: fixed;
+    top: 80px;
+    left: 256px;
     text-align: center;
+    padding: 15px 0;
+    width: calc(100% - 256px);
+    height: calc(100% - 120px);
+    display: inline-flex;
 }
 
-.chat-history {
-    /*border: solid #845663;*/
-    width: 80%;
-    height: 500px;
-    margin: 20px auto;
+.chat-left {
+    width: 256px;
+    height: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+    display: inline-flex;
+
+}
+.chat-recent, .chat-history {
+    border-radius: 20px;
+    width: 100%;
     background-color: white;
+}
+
+/* List of chats. */
+.chat-recent {
+    height: 600px;
+    overflow-y: auto;
+    padding: 10px;
+    text-align: left;
+}
+
+.chat-conversation {
+    margin: 5px;
+}
+
+.chat-right {
+    width: calc(100% - 256px - 40px);
+    height: calc(100% - 80px);
     vertical-align: bottom;
+    margin-right: 10px;
 }
 
-.chat-field input {
-    border-radius: 8px;
+/* Chat history. */
+.chat-history {
+    overflow-y: auto;
+    height: 100%;
+    padding-bottom: 10px;
 }
 
-.chat-field input[type="text"] {
-    width: calc(75% - 60px);
-
-}
-
-.chat-field input[type="submit"] {
-    width: 60px;
-
-}
 .chat-message {
     width: 100%;
-    height: 40px;
+    min-height: 40px;
     padding-top: 10px;
+    clear: both;
 }
 
 .chat-message-self, .chat-message-other {
+    text-align: left;
     border-radius: 20px;
     padding: 10px 12px;
-    min-width: 10%;
     max-width: 45%;
 }
 
 .chat-message-self {
-    text-align: right;
     float: right;
     margin-right: 10px;
     background-color: darkgreen;
@@ -46,8 +72,28 @@
 }
 
 .chat-message-other {
-    text-align: left;
     float: left;
     margin-left: 10px;
     background-color: aquamarine;
+}
+
+/* Chat reply field */
+
+.chat-field {
+    padding: 15px;
+}
+
+.chat-field input {
+    border-radius: 8px;
+}
+
+.chat-field input[type="text"] {
+    width: calc(100% - 80px);
+}
+
+.chat-field input[type="submit"] {
+    width: 60px;
+    background-color: #845663;
+    color: white;
+    padding: 5px;
 }

website/styles/main.css

@@ -58,11 +58,6 @@ body {
     border: 0;
 }
 
-input[type="submit"], button {
-    background-color: #845663;
-    color: white;
-    padding: 5px;
-}
 
 input[type="text"] {
     padding: 5px;