From 8c1bacf8945c326eb50098bd8b984da5448dd5aa Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Fri, 13 Jan 2017 12:01:12 +0100
Subject: [PATCH] Styled and rearranged chat-view

---
 website/styles/chat.css     | 37 ++++++++-----------------------------
 website/views/chat-view.php | 25 ++++++++++---------------
 2 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/website/styles/chat.css b/website/styles/chat.css
index 7df2169..8f486bb 100644
--- a/website/styles/chat.css
+++ b/website/styles/chat.css
@@ -3,7 +3,6 @@
     position: fixed;
     top: 80px;
     left: 256px;
-    text-align: center;
     padding: 15px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
@@ -12,32 +11,14 @@
 
 .chat-left {
     width: 256px;
-    height: 100%;
-    margin-left: 10px;
-    margin-right: 10px;
-    display: inline-flex;
-
-}
-.chat-recent, .chat-history {
-    width: 100%;
-}
-
-/* List of chats. */
-.chat-recent {
-    height: 600px;
+    height: calc(100% - 100px);
+    margin: 0 10px;
     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;
 }
 
@@ -45,9 +26,10 @@
 .chat-history {
     overflow-y: auto;
     height: 100%;
-    padding: 0 0 10px 0;
+    padding: 10px;
 }
 
+/* Chat-message takes the whole width of the chat area */
 .chat-message {
     width: 100%;
     min-height: 40px;
@@ -56,9 +38,8 @@
 }
 
 .chat-message-self, .chat-message-other {
-    text-align: left;
     border-radius: 20px;
-    padding: 10px 12px;
+    padding: 10px;
     max-width: 45%;
 }
 
@@ -79,7 +60,6 @@
 
 .chat-field {
     width: 100%;
-    padding: 15px 0;
     display: table;
 }
 
@@ -95,8 +75,8 @@
 
 .chat-field input[type="text"] {
     width: 100%;
-    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
+    border: none;
+    border-radius: 10px 0 0 10px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
@@ -106,7 +86,6 @@
     background-color: #845663;
     color: white;
     padding: 5px 10px;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
+    border-radius: 0 10px 10px 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
\ No newline at end of file
diff --git a/website/views/chat-view.php b/website/views/chat-view.php
index 99a64fc..a23a1c5 100644
--- a/website/views/chat-view.php
+++ b/website/views/chat-view.php
@@ -1,20 +1,15 @@
 <div class="content">
     <div class="chat">
-        <div class="chat-left">
-            <nav class="chat-recent platform">
-                <h5>Chats</h5>
-                <a href="#"><div class="chat-conversation">
-                        <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
-                        Rudolf Leslo
-                    </div></a>
-                <a href="#"><div class="chat-conversation">
-                        <img class="profile-picture" src=http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
-                        Henk de Boer
-                    </div></a>
-            </nav>
-        </div>
-
-        <div class="chat-right">
+        <nav class="chat-left left platform chat-recent">
+            <h5>Chats</h5>
+            <a href="#">
+                <div class="chat-conversation">
+                    <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
+                    Rudolf Leslo
+                </div>
+            </a>
+        </nav>
+        <div class="chat-right right">
             <div class="chat-history platform">
                 <div class="chat-message">
                     <div class="chat-message-self">Hi!</div>