Flexible query editor

client/app/assets/less/redash/redash-newstyle.less

@@ -648,27 +648,63 @@ text.slicetext {
 //  }
 //}
 
+.page-header--query {
+  h3 {
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  .btn--showhide {
+    margin-bottom: 5px;
+  }
+}
+
 .schema-browser {
   min-height: 150px;
   overflow-y: auto;
-  max-height: 250px;
+  max-height: 275px;
 }
 
-.query-fullscreen-container {
-
-}
 @spacing: 14px;
 
 .query-fullscreen {
-  height: calc(~'100% - 137px');
+  //height: calc(~'100% - 137px');
+  background: #fff;
+  padding: 0;
+  box-shadow: rgba(102, 136, 153, 0.15) 0px 4px 9px -3px;
+
+  .tile, .tiled {
+    box-shadow: none;
+    padding: 15px 0 !important;
+  }
 
   nav {
     position: relative;
+    display: flex;
+    flex-flow: column;
+    border-right: 1px solid #efefef;
+    margin-rigth: 10px;
     z-index: 1;
-    padding: 0 15px;
     width: 340px;
     max-width: 600px;
     min-width: 250px;
+
+    .schema-browser {
+      height: 100%;
+      max-height: 750px;
+    }
+
+    .editor__left__query-metadata {
+      border-top: 1px solid #efefef;
+    }
+
+    .editor__left__query-metadata, .editor__left__schema, .editor__left__data-source {
+      padding: 15px;
+    }
+
+    .editor__left__schema {
+      padding-top: 0 !important;
+    }
   }
   main {
     display: flex;
@@ -680,7 +716,7 @@ text.slicetext {
     flex-flow: column nowrap;
     justify-content: space-around;
     align-content: space-around;
-    padding: 0 15px;
+    padding: 0 15px 0 0;
     height: calc(~'100% - 137px');
   }
   .row {
@@ -720,8 +756,9 @@ text.slicetext {
   }
   .rg-right, .rg-left, .rg-top, .rg-bottom {
     display: block;
-    width: @spacing;
-    height: @spacing; line-height: @spacing;
+    width: 8px;
+    height: 8px;
+    line-height: @spacing;
     position: absolute;
     z-index: 1;
 
@@ -763,13 +800,21 @@ text.slicetext {
     right: 0;
     top: 0;
     margin-right: 0px;
+
+    &:hover {
+      background: rgba(0,0,0,0.025);
+    }
   }
   .rg-bottom  {
     cursor: row-resize;
     width: 100%;
     bottom: 0;
     left: 0;
-    margin-bottom: -@spacing/2;
+    margin-bottom: 0;
+
+    &:hover {
+      background: #fbfbfb;
+    }
   }
   .rg-left    {
     cursor: col-resize;