Added buttons to toggle sidebars

openflexure_microscope/api/static/style_v1.css

@@ -25,29 +25,55 @@ body {
 .left, .right {
   background-color: #f4f4f4;
   overflow-y: scroll;
+  flex: 0;
+  flex-shrink: 0;
+  flex-basis: 250px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }
 
 .left{
-    width: 220px;
     float: left;
 }
 
-.Right{
-    width: 280px;
+.right{
     float: right;
 }
 
+.hidden{
+    flex-basis: 0;
+    padding:0
+}
+
 .middle {
-  margin-left: 220px;
-  margin-right: 280px;
+  position: relative;
+  flex-grow: 1;
   background-color: #d3d3d3;
 }
 
+#left-sb-btn {
+    left: 20px;
+}
+
+#right-sb-btn {
+    right: 20px;
+}
+
+.sb-btn {
+    top: 20px;
+    position: absolute;
+}
+
+.sb-btn button{
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding:5px;  
+}
+
 /* Clear floats after the columns */
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
+.row{
+    display: flex;
 }
 
 /* Flexboxes */