Layout changes

gevalo1 · Oct 30, 2016 · 86dbf26 · 86dbf26
1 parent 83a0f28
commit 86dbf26
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git 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
@@ -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>