Tightening up Query editor

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

@@ -3,6 +3,9 @@
 @redash-orange: rgba(255, 120, 100, 1);
 @redash-black: rgba(0, 0, 0, 1);
 
+//Default spacing (between tiles)
+@redash-space: 10px;
+
 
 // General
 body {
@@ -34,6 +37,11 @@ page-header, .page-header--new {
   }
 }
 
+.rg-top span, .rg-bottom span {
+  height: 3px;
+  border-color: #b1c1ce; // TODO: variable
+}
+
 .popover {
   box-shadow: fade(@redash-gray, 25%) 0px 0px 15px 0px;
 }
@@ -137,6 +145,8 @@ page-header, .page-header--new {
   }
 }
 
+
+// Editor
 edit-in-place p {
   display: inline-block;
 }
@@ -146,6 +156,15 @@ edit-in-place p.editable:hover {
   display: inline-block;
 }
 
+.editor__control {
+  padding: 10px 10px 10px 0;
+}
+
+.schema-browser {
+  height: calc(75%);
+  border: none;
+}
+
 // Navigation
 .caret--nav {
   border-top: none;

client/app/components/parameters.html

@@ -1,8 +1,8 @@
-<div class="form-inline bg-white p-5"
+<div class="form-inline bg-white p-15"
      ng-if="parameters | notEmpty"
      ui-sortable="{ 'ui-floating': true, 'disabled': !editable }"
      ng-model="parameters">
-  <div class="form-group m-l-10 m-r-10"
+  <div class="form-group m-r-10"
        ng-repeat="param in parameters">
     <label class="parameter-label">{{param.title}}</label>
     <button class="btn btn-default btn-xs"

client/app/components/queries/schema-browser.html

@@ -1,5 +1,5 @@
 <div class="schema-container">
-  <div class="schema-control">
+  <div class="schema-control p-10">
     <input type="text" placeholder="Search schema..." class="form-control" ng-model="$ctrl.schemaFilter">
     <button class="btn btn-default"
             title="Refresh Schema"
@@ -8,7 +8,7 @@
     </button>
   </div>
 
-  <div class="schema-browser" vs-repeat vs-size="$ctrl.getSize(table)">
+  <div class="schema-browser p-10" vs-repeat vs-size="$ctrl.getSize(table)">
     <div ng-repeat="table in $ctrl.schema | filter:$ctrl.schemaFilter track by table.name">
       <div class="table-name" ng-click="$ctrl.showTable(table)">
         <i class="fa fa-table"></i>

client/app/pages/queries/query.html

@@ -78,15 +78,15 @@
 
   <!-- editor -->
   <div class="container">
-      <div class="row bg-white tiled p-b-5" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
-        <schema-browser class="col-md-3 hidden-sm hidden-xs schema-container"
+      <div class="row bg-white tiled p-b-0 m-b-10" ng-if="sourceMode" resizable r-directions="['bottom']" r-height="300" style="min-height:100px;">
+        <schema-browser class="col-md-3 p-0 hidden-sm hidden-xs schema-container"
                         schema="schema"
                         on-refresh="refreshSchema()"
                         ng-show="hasSchema">
         </schema-browser>
 
         <div ng-class="editorSize" style="height:100%;">
-            <div class="p-5">
+            <div class="editor__control">
               <button type="button" class="btn btn-primary btn-s" ng-disabled="queryExecuting || !canExecuteQuery()"
                       ng-click="executeQuery()">
                 <span class="zmdi zmdi-play"></span> Execute
@@ -125,7 +125,7 @@
                 </div>
               </div>
             </div>
-            <p style="height:calc(100% - 40px);">
+            <p style="height:calc(100% - 50px);">
               <query-editor query="query"
                             schema="schema"
                             syntax="dataSource.syntax"></query-editor>

client/app/pages/queries/view.js

@@ -46,7 +46,7 @@ function QueryViewCtrl(
 
   function toggleSchemaBrowser(hasSchema) {
     $scope.hasSchema = hasSchema;
-    $scope.editorSize = hasSchema ? 'col-md-9' : 'col-md-12';
+    $scope.editorSize = hasSchema ? 'col-md-9 p-0' : 'col-md-12';
   }
 
   function getSchema(refresh = undefined) {