From 86dbf26d1fc249a73ccb7b11bf954d2b627451a8 Mon Sep 17 00:00:00 2001
From: Thomas Buys <thomas.buys.v3911@student.hogent.be>
Date: Sun, 30 Oct 2016 18:07:49 +0100
Subject: [PATCH] Layout changes

---
 public/stylesheets/style.css | 41 +++++++++++++++++++++++++++---------
 views/index.ejs              | 11 ++++++----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 9a918bc..7a232b7 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -17,24 +17,31 @@ html, body, #fullheight {
     border: 1px solid red;
 }
 
-#cvContainer {
-    display: inline-block;
+#content {
+    max-width: 100%;
+    width: 100%;
+    max-height: 85%;
     height: 85%;
-    width: 94.6%;
+    float: left;
+    border: 1px solid green;
+}
+
+#cvContainer {
+    height: 100%;
+    width: 95%;
     float: left;
     border: 2px dashed yellow;
 }
 
 #sidebar {
-    display: inline-block;
-    height: 85%;
-    width: 5%;
-    float: left;
+    height: 100%;
+    width: auto;
     border: 1px solid aqua;
+    overflow: hidden;
+    text-align: center;
 }
 
 #canvas {
-
     border: 1px solid black;
 }
 
@@ -49,8 +56,22 @@ html, body, #fullheight {
     float: left;
 }
 
-#clearCv {
-    float: left;
+#clearCv, #changeBrushSize {
+	background:#ededed;
+	border-radius:12px;
+	border:2px solid #dcdcdc;
+	cursor:pointer;
+	color:#777777;
+	font-size:15px;
+	font-weight:bold;
+	text-decoration:none;
+        width: 65px;
+        white-space: normal;
+        text-align: center;
+        margin-top: 0.5em;
+}
+#clearCv:hover, #changeBrushSize:hover {
+	background:#dfdfdf;
 }
 
 select, option {
diff --git a/views/index.ejs b/views/index.ejs
index 10bcae1..47ea2a2 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -9,11 +9,14 @@
     <div id="wrapper">
         <div id="navbar">
             <select id="colorOptions"></select>
-            <input type ="button" id="clearCv" value="Clear the canvas"/>
-            <input type ="button" id="changeBrushSize" value="Change the brush size"/>
         </div>
-        <div id="cvContainer"><!-- our canvas will be inserted here--></div>
-        <div id="sidebar"></div>
+        <div id="content">
+            <div id="cvContainer"><!-- our canvas will be inserted here--></div>
+            <div id="sidebar">
+                <input type ="button" id="clearCv" value="Clear Canvas"/>
+                <input type ="button" id="changeBrushSize" value="Brush Size"/>
+            </div>
+        </div>
         <div id="footer"></div>
     </div>