From b973e666dadf65055fccc7e0c79ffd644628f090 Mon Sep 17 00:00:00 2001
From: Marijn Jansen <marijn@jansen.onl>
Date: Tue, 10 Jan 2017 20:58:56 +0100
Subject: [PATCH] Fixed spacing on the chat page.

---
 website/chat.php        |  2 +-
 website/styles/chat.css | 25 +++++++++++++++++--------
 website/styles/main.css |  2 +-
 website/views/chat.php  | 15 ++++++++++++---
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/website/chat.php b/website/chat.php
index 2852594..b94e08c 100644
--- a/website/chat.php
+++ b/website/chat.php
@@ -9,7 +9,7 @@
              * This view adds the main layout over the screen.
              * Header, menu, footer.
              */
-            // include("views/main.php");
+             include("views/main.php");
 
             /* Add your view files here. */
             include("views/chat.php");
diff --git a/website/styles/chat.css b/website/styles/chat.css
index 73b860e..9b836cc 100644
--- a/website/styles/chat.css
+++ b/website/styles/chat.css
@@ -6,7 +6,7 @@
     /*border: solid #845663;*/
     width: 80%;
     height: 500px;
-    margin: 10px auto;
+    margin: 20px auto;
     background-color: white;
     vertical-align: bottom;
 }
@@ -24,21 +24,30 @@
     width: 60px;
 
 }
+.chat-message {
+    width: 100%;
+    height: 40px;
+    padding-top: 10px;
+}
+
+.chat-message-self, .chat-message-other {
+    border-radius: 20px;
+    padding: 10px 12px;
+    min-width: 10%;
+    max-width: 45%;
+}
 
 .chat-message-self {
     text-align: right;
     float: right;
-    margin: 10px;
-    background-color: aqua;
-    padding: 10px;
-    border-radius: 10px;
+    margin-right: 10px;
+    background-color: darkgreen;
+    color: white;
 }
 
 .chat-message-other {
     text-align: left;
     float: left;
-    margin: 10px;
+    margin-left: 10px;
     background-color: aquamarine;
-    padding: 10px;
-    border-radius: 10px;
 }
\ No newline at end of file
diff --git a/website/styles/main.css b/website/styles/main.css
index ac0c7ac..ed8f200 100644
--- a/website/styles/main.css
+++ b/website/styles/main.css
@@ -16,7 +16,7 @@ body {
 }
 
 .content {
-    margin-top: 80px;
+    margin-top: 95px;
 }
 
 ::selection {
diff --git a/website/views/chat.php b/website/views/chat.php
index 7aa55c1..29e643c 100644
--- a/website/views/chat.php
+++ b/website/views/chat.php
@@ -1,9 +1,18 @@
 <div class="content">
     <div class="chat">
         <div class="chat-history">
-            <div class="chat-message-self">Hi!</div><br>
-            <div class="chat-message-other">Hi!</div><br>
-            <div class="chat-message-self">Hi!</div><br>
+            <div class="chat-message">
+                <div class="chat-message-self">Hi!</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-other">Hi!</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-self">How it's going?</div>
+            </div>
+            <div class="chat-message">
+                <div class="chat-message-self">Hi!</div>
+            </div>
 
         </div>
         <form class="chat-field" method="post">