From 0a8301c9132bf860b040fbcf53d6cf3ecfa9b4ef Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 5 Apr 2016 13:49:28 -0700
Subject: [PATCH] Almost fixed grid

---
 app/components/Sidebar.js                     |  8 +--
 app/components/dropdowns/WorkspaceDropdown.js |  8 +--
 app/containers/App.js                         | 62 ++++++++++---------
 app/css/components/editor.scss                | 15 ++---
 app/css/components/grid.scss                  | 54 +++++++---------
 app/css/components/header.scss                | 15 +++++
 app/css/components/pane.scss                  | 23 -------
 app/css/index.scss                            |  4 +-
 app/css/layout/base.scss                      |  5 +-
 app/css/layout/request.scss                   |  4 --
 app/css/layout/response.scss                  |  7 ---
 app/css/layout/sidebar.scss                   | 13 +---
 12 files changed, 88 insertions(+), 130 deletions(-)
 create mode 100644 app/css/components/header.scss
 delete mode 100644 app/css/components/pane.scss
 delete mode 100644 app/css/layout/request.scss
 delete mode 100644 app/css/layout/response.scss

diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 3c4763ec60..54238d6c9b 100644
--- a/app/components/Sidebar.js
+++ b/app/components/Sidebar.js
@@ -128,12 +128,12 @@ class Sidebar extends Component {
     const {activeFilter, requestGroups} = this.props;
 
     return (
-      <aside className="sidebar pane bg-dark">
-        <div className="grid-v">
-          <header className="pane__header">
+      <aside className="sidebar bg-dark">
+        <div className="grid--v">
+          <header className="header">
             <h1><WorkspaceDropdown /></h1>
           </header>
-          <div className="pane__body grid-v">
+          <div className="grid--v">
             <div className="stock-height form-control form-control--outlined">
               <DebouncingInput
                 type="text"
diff --git a/app/components/dropdowns/WorkspaceDropdown.js b/app/components/dropdowns/WorkspaceDropdown.js
index 31b5d2e6c0..c7390ab778 100644
--- a/app/components/dropdowns/WorkspaceDropdown.js
+++ b/app/components/dropdowns/WorkspaceDropdown.js
@@ -11,11 +11,9 @@ class WorkspaceDropdown extends Component {
 
     return (
       <Dropdown right={true} {...other} className="block">
-        <button className="pane__header__content">
-          <div className="grid">
-            <div className="col">
-              Insomnia
-            </div>
+        <button className="header__content">
+          <div className="grid grid--center">
+            <div className="grid__cell">Insomnia</div>
             <div className="no-wrap">
               {loading ? <i className="fa fa-refresh fa-spin txt-lg"></i> : ''}&nbsp;
               <i className="fa fa-caret-down txt-lg"></i>
diff --git a/app/containers/App.js b/app/containers/App.js
index 649edc0a3b..495e70f830 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -28,71 +28,72 @@ class App extends Component {
 
     return (
       <div className="grid grid-collapse">
-        <section id="request-pane" className="pane col tall">
-          <div className="grid-v">
-            <header className="pane__header">
-              <RequestUrlBar
-                onUrlChange={updateRequestUrl}
-                onMethodChange={updateRequestMethod}
-                request={activeRequest}/>
+        <section className="grid__cell">
+          <div className="grid--v">
+            <header className="header">
+              <div className="grid__cell">
+                <RequestUrlBar
+                  onUrlChange={updateRequestUrl}
+                  onMethodChange={updateRequestMethod}
+                  request={activeRequest}/>
+              </div>
             </header>
-            <div className="pane__body grid-v bg-super-dark">
-              <Tabs selectedIndex={0} className="grid-v">
+            <div className="grid__cell grid--v bg-super-dark">
+              <Tabs selectedIndex={0} className="grid--v">
                 <TabList className="grid grid--left">
                   <Tab><button className="btn">Body</button></Tab>
                   <Tab><button className="btn">Params</button></Tab>
                   <Tab><button className="btn">Auth</button></Tab>
                   <Tab><button className="btn">Headers</button></Tab>
                 </TabList>
-                <TabPanel className="grid-v">
+                <TabPanel>
                   <RequestBodyEditor
                     className="grid-v"
                     onChange={updateRequestBody}
                     request={activeRequest}/>
                 </TabPanel>
-                <TabPanel className="grid-v pad">Params</TabPanel>
-                <TabPanel className="grid-v pad">Basic Auth</TabPanel>
-                <TabPanel className="grid-v pad">Headers</TabPanel>
+                <TabPanel className="pad">Params</TabPanel>
+                <TabPanel className="pad">Basic Auth</TabPanel>
+                <TabPanel className="pad">Headers</TabPanel>
               </Tabs>
             </div>
           </div>
         </section>
-        <section id="response-pane" className="pane col tall">
-          <div className="grid-v">
-            <header className="pane__header text-center">
-              <div className="grid">
+        <section className="grid__cell">
+          <div className="grid--v">
+            <header className="header text-center">
+              <div className="grid grid--center">
                 <div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
                 <div className="tag">TIME&nbsp;<strong>143ms</strong></div>
               </div>
             </header>
-            <div className="pane__body grid-v">
-              <Tabs selectedIndex={0} className="grid-v bg-super-dark">
+            <div className="grid--v">
+              <Tabs selectedIndex={0} className="grid--v bg-super-dark">
                 <TabList className="grid grid--left">
                   <Tab><button className="btn">Response</button></Tab>
                   <Tab><button className="btn">Raw</button></Tab>
                   <Tab><button className="btn">Headers</button></Tab>
                   <Tab><button className="btn">Cookies</button></Tab>
                 </TabList>
-                <TabPanel className="grid-v">
+                <TabPanel className="grid--v">
                   <Editor
-                    className="grid-v"
+                    className="grid--v"
                     options={{
                       mode: 'application/json',
                       readOnly: true,
                       placeholder: 'nothing yet...'
                     }}/>
                 </TabPanel>
-                <TabPanel className="grid-v">
+                <TabPanel>
                   <Editor
-                    className="grid-v"
                     options={{
                       mode: 'application/json',
                       readOnly: true,
                       placeholder: 'nothing yet...'
                     }}/>
                 </TabPanel>
-                <TabPanel className="grid-v pad">Headers</TabPanel>
-                <TabPanel className="grid-v pad">Cookies</TabPanel>
+                <TabPanel className="pad">Headers</TabPanel>
+                <TabPanel className="pad">Cookies</TabPanel>
               </Tabs>
             </div>
           </div>
@@ -106,7 +107,7 @@ class App extends Component {
     const activeRequest = requests.all.find(r => r.id === requests.active);
 
     return (
-      <div className="grid bg-super-dark">
+      <div className="grid bg-super-dark tall">
         <Sidebar
           activateRequest={actions.activateRequest}
           changeFilter={actions.changeFilter}
@@ -117,8 +118,13 @@ class App extends Component {
           loading={loading}
           requestGroups={requestGroups.all}
           requests={requests.all}/>
-        <div className="col tall">
-          {this.renderPageBody(actions, activeRequest)}
+        <div className="grid__cell grid--v">
+          <header className="header">
+            <div className="header__content"><h1>Hi World</h1></div>
+          </header>
+          <div className="grid__cell">
+            {this.renderPageBody(actions, activeRequest)}
+          </div>
         </div>
       </div>
     )
diff --git a/app/css/components/editor.scss b/app/css/components/editor.scss
index 54202c854f..a2826ddb7f 100644
--- a/app/css/components/editor.scss
+++ b/app/css/components/editor.scss
@@ -2,12 +2,13 @@
 @import '../constants/dimensions';
 
 .editor {
-  height: 100%;
   width: 100%;
+  min-width: 100%;
+  //height: 100%;
+  min-height: 100%;
 
   .CodeMirror {
-    height: 100% !important;
-    width: 100%;
+    //height: 100%;
     font-family: "Source Code Pro", monospace;
     box-sizing: border-box;
     font-size: $font-size-md;
@@ -28,14 +29,6 @@
   }
 
   .CodeMirror-scroll {
-    /*
-     * Not sure why but this fixes vertical sizing of scroll
-     * area in flexbox grid
-     */
-    box-sizing: border-box;
-    margin-bottom: 0;
-    padding-bottom: 0;
-
     /* Normal Overrides */
     cursor: text; // Show text cursor everywhere (not just in .Codemirror-lines)
   }
diff --git a/app/css/components/grid.scss b/app/css/components/grid.scss
index 0f36d678b2..9bf6ad2eb7 100644
--- a/app/css/components/grid.scss
+++ b/app/css/components/grid.scss
@@ -1,54 +1,42 @@
 @import '../constants/dimensions';
 
-.grid {
+.grid,
+.grid--v {
   display: flex;
-  flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
-  align-items: center;
-  align-content: flex-start;
-  height: 100%;
-  width: 100%;
+  align-items: stretch;
+  align-content: stretch;
+  overflow: auto;
   box-sizing: border-box;
 
-  &.grid--left {
+  &.grid--center {
+    align-items: center;
+  }
+
+  &.grid--start {
     justify-content: flex-start;
   }
 
-  &.grid--right {
+  &.grid--end {
     justify-content: flex-end;
   }
 
-  & > .col {
-    display: block;
-    flex: 1 1 auto;
-    width: 100%;
-    overflow: hidden;
+  & > .grid__cell {
+    overflow: auto;
+    flex: 1 1 100%;
     box-sizing: border-box;
   }
-
-  .pull-right {
-    align-self: flex-end;
-  }
 }
 
-.grid-v {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  align-content: flex-start;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
+.grid {
+  max-width: 100%;
+  flex-direction: row;
+}
 
-  & > .row {
-    display: block;
-    flex: 1 1 auto;
-    height: 100%;
-    box-sizing: border-box;
-  }
+.grid--v {
+  max-height: 100%;
+  flex-direction: column;
 }
 
 @media (max-width: $breakpoint-md) {
diff --git a/app/css/components/header.scss b/app/css/components/header.scss
new file mode 100644
index 0000000000..10d2d2349a
--- /dev/null
+++ b/app/css/components/header.scss
@@ -0,0 +1,15 @@
+@import '../constants/dimensions';
+
+.header {
+  height: $line-height-md;
+  line-height: $line-height-md;
+  flex-shrink: 0;
+
+  .header__content {
+    width: 100%;
+    display: block;
+    height: $line-height-md;
+    box-sizing: border-box;
+    padding: 0 $padding-md;
+  }
+}
diff --git a/app/css/components/pane.scss b/app/css/components/pane.scss
deleted file mode 100644
index 35ca2f3dea..0000000000
--- a/app/css/components/pane.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import '../constants/colors';
-@import '../constants/dimensions';
-
-.pane {
-  .pane__body, .pane__header {
-    border-right: 1px solid $hl-sm;
-    //border-left: 2px solid rgba(0, 0, 0, 0.2);
-  }
-
-  .pane__header {
-    //border-color: transparent;
-    height: $line-height-md;
-    line-height: $line-height-md;
-
-    .pane__header__content {
-      width: 100%;
-      display: block;
-      height: $line-height-md;
-      box-sizing: border-box;
-      padding: 0 $padding-md;
-    }
-  }
-}
diff --git a/app/css/index.scss b/app/css/index.scss
index 7c42aebc84..caad6be9c9 100644
--- a/app/css/index.scss
+++ b/app/css/index.scss
@@ -11,13 +11,11 @@
 @import 'components/links';
 
 /* Layout */
-@import 'components/pane';
 @import 'components/forms';
+@import 'components/header';
 
 /* Components */
 @import 'layout/sidebar';
-@import 'layout/request';
-@import 'layout/response';
 @import 'components/tag';
 @import 'components/tabs';
 @import 'components/scrollbars';
diff --git a/app/css/layout/base.scss b/app/css/layout/base.scss
index 0eb7643754..29c45fd6af 100644
--- a/app/css/layout/base.scss
+++ b/app/css/layout/base.scss
@@ -34,7 +34,6 @@ h2 {
 
 .tall {
   height: 100%;
-  display: block;
   box-sizing: border-box;
 }
 
@@ -70,6 +69,10 @@ i.fa {
   }
 }
 
+.scrollable {
+  overflow: scroll;
+}
+
 .hover-scrollbars {
   &::-webkit-scrollbar {
     display: none;
diff --git a/app/css/layout/request.scss b/app/css/layout/request.scss
deleted file mode 100644
index 23f2b09655..0000000000
--- a/app/css/layout/request.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../constants/dimensions';
-
-#request-pane {
-}
diff --git a/app/css/layout/response.scss b/app/css/layout/response.scss
deleted file mode 100644
index 51f3b93caa..0000000000
--- a/app/css/layout/response.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../constants/colors';
-
-#response-pane {
-  .pane__header, .pane__body {
-    border-right: 0;
-  }
-}
diff --git a/app/css/layout/sidebar.scss b/app/css/layout/sidebar.scss
index 08cdfd5dd9..e3d9bbfd19 100644
--- a/app/css/layout/sidebar.scss
+++ b/app/css/layout/sidebar.scss
@@ -3,20 +3,11 @@
 
 .sidebar {
   height: 100%;
-
-  .pane__body {
-    width: $sidebar-width;
-    height: 100%;
-  }
+  width: $sidebar-width;
+  flex-shrink: 0;
 
   .sidebar__scroll {
     overflow-y: auto;
-    height: 100%;
-  }
-
-  .pane__header,
-  .pane__body {
-    border-left: 0;
   }
 
   .sidebar__item__row {