fixing height of menu-and-content, slight organizational tweaks

oerpub · Sep 24, 2013 · ef9bc40 · ef9bc40
1 parent 11e2818
commit ef9bc40
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 71 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 bower_components/*
 node_modules/*
 .vagrant
+*.swo
+*.swp
diff --git a/styles/workspace/sidebar.less b/styles/workspace/sidebar.less
@@ -13,12 +13,19 @@
   overflow-x: hidden;
   float: left;
   position: relative;
-  margin-right: -310px;
 
   // Add a little spacing between the sidebars so they appear to float
 
   max-width: 310px;
 
+  .handle {
+    > i.expand-collapse { left: 3px; }
+    &:hover > i.expand-collapse {
+      left: 2px;
+    }
+    > i.expand-collapse::before { content: "\f137"; /* icon-chevron-sign-left */ }
+  }
+
   &.sidebar-workspace aside > div {
     background-color: @color-green;
     > .handle > .handle-text::before          { content: 'Book Picker'; }
@@ -70,85 +77,51 @@
 
 #workspace-container {
   width: 100%;
-  box-sizing: border-box;
-
-  // all panels open
-  padding-left: 620px;
-
-  .sidebar-workspace {
-    width: 310px;
-    left: -620px;
-  }
-  .sidebar-toc {
-    width: 310px;
-    left: -310px;
-  }
-  .sidebar-workspace .handle,
-  .sidebar-toc .handle {
-    > i.expand-collapse { left: 5px; }
-    &:hover > i.expand-collapse {
-      left: 0px;
-    }
-    > i.expand-collapse::before { content: "\f137"; /* icon-chevron-sign-left */ }
-  }
-
-  #menu-and-content {
-    min-width: 810px;
-  }
 
   // workspace minimized
   &.workspace-minimized {
-    padding-left: 350px;
+    #menu-and-content {
+      width: calc(~"100% - 350px");
+    }
 
     .sidebar-workspace {
       width: 40px;
-      left: -350px;
       .boxed-group {
         max-width: 0;
         visibility: hidden;
         overflow-x: hidden;
       }
       .handle {
-        > i.expand-collapse { left: 5px; }
-        &:hover > i.expand-collapse {
-          left: 10px;
-        }
         > i.expand-collapse::before { content: "\f138"; /* icon-chevron-sign-right */ }
       }
     }
-    .sidebar-toc {
-      left: -310px;
-    }
   }
 
   // sidebar minimized (#sidebar is the table of contents
   &.sidebar-minimized {
-    padding-left: 350px;
-
-    .sidebar-workspace {
-      left: -350px;
+    #menu-and-content {
+      width: calc(~"100% - 350px");
     }
+
     .sidebar-toc {
       width: 40px;
-      left: -40px;
       .boxed-group {
         max-width: 0;
         visibility: hidden;
         overflow-x: hidden;
       }
+
       .handle {
-        > i.expand-collapse { left: 5px; }
-        &:hover > i.expand-collapse {
-          left: 10px;
-        }
         > i.expand-collapse::before { content: "\f138"; /* icon-chevron-sign-right */ }
       }
     }
   }
 
   // workspace minimized
   &.workspace-minimized.sidebar-minimized {
-    padding-left: 80px;
+    #menu-and-content {
+      width: calc(~"100% - 80px");
+    }
 
     .sidebar-workspace,
     .sidebar-toc {
@@ -158,19 +131,6 @@
         visibility: hidden;
         overflow-x: hidden;
       }
-      .handle {
-        > i.expand-collapse { left: 5px; }
-        &:hover > i.expand-collapse {
-          left: 10px;
-        }
-        > i.expand-collapse::before { content: "\f138"; /* icon-chevron-sign-right */ }
-      }
-    }
-    .sidebar-workspace {
-      left: -80px;
-    }
-    .sidebar-toc {
-      left: -40px;
     }
   }
 }
@@ -256,11 +216,6 @@ aside > div {
         right: 0;
       }
     }
-
-    > .boxed-group-inner {
-      // So boxed-group-inner is scrollable, set the overflow-y
-      overflow-y: auto;
-    }
   }
 
   // Change the expand/collapse icon for the handle
@@ -384,7 +339,7 @@ aside > div {
 
   .boxed-group-inner {
     overflow: auto;
-    height: 100%;
+    height: calc(~"100% - 82px");
     padding: 1px 10px;
     background: #fff;
     border: 1px solid #d8d8d8;
@@ -437,10 +392,7 @@ aside > div {
   nav li .btn-mini.pull-right,
   .context-button {
     position: relative;
-    //width: 12px;
-    //height: 22px;
     line-height: 23px;
-    //font: normal normal 16px "octicons";
     line-height: 1;
     display: inline-block;
     text-decoration: none;

diff --git a/styles/workspace/workspace.less b/styles/workspace/workspace.less
@@ -43,11 +43,12 @@ html, body {
 
 #menu-and-content {
   float: left;
-  width: 100%;
+  width: calc(~"100% - 620px");
   height: 100%;
+  min-width: 810px;
 
   .content-panel {
-    height: 100%;
+    height: calc(~"100% - 75px");
     background-color: @orange;
 
     // Round the corners so the handle looks nice
@@ -58,14 +59,23 @@ html, body {
     -moz-border-radius-topright:      20px;
     border-top-right-radius:          20px;
 
-    > .content-title {
+    .content-title {
       color: white;
       // same as sidebar handle
       font-size: 18px;
       text-shadow: 2px 2px 4px black;
     }
 
     // By default, boxed-group is grey
-    > .boxed-group { background-color: inherit; }
+    .boxed-group {
+      background-color: inherit;
+      height: 100%;
+
+      .boxed-group-inner {
+        // So boxed-group-inner is scrollable, set the overflow-y
+        overflow-y: auto;
+      }
+    }
+
   }
 }