removing table-cell layout from github-book editor

.gitignore

@@ -1,2 +1,3 @@
 bower_components/*
 node_modules/*
+.vagrant

Vagrantfile

@@ -0,0 +1,15 @@
+Vagrant.configure("2") do |config|
+    config.vm.box = "precise64"
+    config.vm.box_url = "http://files.vagrantup.com/precise32.box"
+    config.vm.provision :shell, :path => "node-bootstrap.sh"
+    config.vm.network :private_network, ip: '33.33.33.10'
+
+    config.vm.provider :virtualbox do |vb|
+        vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]
+        # vb.customize ["modifyvm", :id, "--memory", "2048"]
+        # vb.customize ["modifyvm", :id, "--cpus", "4"]
+    end
+
+    config.vm.synced_folder "./", "/vagrant/www/default"
+end
+

node-bootstrap.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+# Get root up in here
+sudo su
+
+# Just a simple way of checking if you we need to install everything
+if [ ! -d "/var/www" ]
+then
+    # Update and begin installing some utility tools
+    apt-get -y update
+    apt-get install -y python-software-properties
+    apt-get install -y vim git subversion curl
+    apt-get install -y memcached build-essential
+    apt-get install -y apache2
+
+    # Build latest node.js from source
+    cd /tmp
+    git clone -b v0.10.11-release https://github.com/joyent/node.git
+    cd node
+    ./configure
+    make
+    make install
+
+    # Symlink our host www to the guest /var/www folder
+    ln -s /vagrant/www /var/www
+fi
+
+

scripts/gh-book/app.coffee

@@ -215,14 +215,6 @@ define [
   App.on 'start', () ->
 
     # Update the width/height of main so we can have CSS that uses `bottom: 0` or `right: 0`
-    $window = $(window)
-    onWindowResize = () =>
-      $('#main').css  # For some reason App.main.$el is not instantiated yet
-        width: $window.width()
-        height: $window.height()
-
-    $window.resize onWindowResize
-    onWindowResize()
 
     startRouting = () ->
       # Remove cyclic dependency. Controller depends on `App.main` region

scripts/views/layouts/workspace/sidebar.coffee

@@ -38,10 +38,6 @@ define [
       @toc.show(new TocView {model:model, collection:collection})
 
     onWindowResize: () ->
-      $window = $(window)
-      $scrollable = @$el.find('> .boxed-group > .boxed-group-inner')
-      height = $window.height() - $scrollable.offset().top
-      $scrollable.css {height:height}
 
     onRender: () ->
       # Update the width/height of main so we can have Scrollable boxes that vertically stretch the entire page

scripts/views/workspace/content/layouts/editor.coffee

@@ -12,10 +12,6 @@ define [
       edit: '#layout-body'
 
     onWindowResize: () ->
-      $window = $(window)
-      $scrollable = @$el
-      height = $window.height() - $scrollable.offset().top
-      $scrollable.css {height:height}
 
     onRender: () ->
       @edit.show(new ContentEditView({model: @model}))

styles/workspace/sidebar.less

@@ -7,18 +7,38 @@
 @color-green: @green; // Bootstrap green
 @color-blue: @blue; // Bootstrap blue
 
-.sidebar-container.sidebar-workspace aside > div {
-  background-color: @color-green;
-  > .handle > .handle-text::before          { content: 'Book Picker'; }
-  > .boxed-group > h3 > .title-text::before { content: 'Book Picker'; }
-}
-.sidebar-container.sidebar-toc aside > div {
-  background-color: @color-blue;
-  > .handle > .handle-text::before          { content: 'Table of Contents'; }
-  > .boxed-group > h3 > .title-text::before { content: 'Table of Contents'; }
-}
+.sidebar-container {
+  // When .minimized, the bar is moved left (negative number) so it "appears" to slide left
+  // Other sidebars may actually be to the left so clip to the left
+  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;
+
+  &.sidebar-workspace {
+    left: -620px;
+
+    aside > div {
+      background-color: @color-green;
+      > .handle > .handle-text::before          { content: 'Book Picker'; }
+      > .boxed-group > h3 > .title-text::before { content: 'Book Picker'; }
+    }
+  }
 
+  &.sidebar-toc { 
+    left: -310px;
+
+    aside > div {
+      background-color: @color-blue;
+      > .handle > .handle-text::before          { content: 'Table of Contents'; }
+      > .boxed-group > h3 > .title-text::before { content: 'Table of Contents'; }
+    }
+  }
+}
 
 .x-filter-gradient(@orient, @start-color, @end-color) {
   background-color: @end-color;
@@ -55,33 +75,20 @@
 }
 
 #workspace-container {
-  display: table-row;
+  padding-left: 620px;
   width: 100%;
+  box-sizing: border-box;
 
   #menu-and-content,
   > .sidebar-container {
-    display: table-cell;
     vertical-align: top;
   }
 
   #menu-and-content {
-    width: 100%;
     min-width: 810px;
   }
 }
 
-.sidebar-container {
-  // When .minimized, the bar is moved left (negative number) so it "appears" to slide left
-  // Other sidebars may actually be to the left so clip to the left
-  overflow-x: hidden;
-
-  // Add a little spacing between the sidebars so they appear to float
-  margin-left:  10px;
-  margin-right: 10px;
-
-  max-width: 310px;
-}
-
 // All the height:inherit to be able to scroll inside the ToC
 #main {
   height: inherit;
@@ -154,7 +161,7 @@
 
 
 
-@aside-width: 320px;
+@aside-width: 310px;
 @aside-handle-width: 20px;
 @aside-handle-width-expanded: 25px;
 @boxed-group-header-height: 42px;
@@ -169,8 +176,6 @@ aside > div {
   // Animate the sidebar to slide right (open) when minimized handle is clicked
   .x-slide-sidebar(@aside-width);
 
-  display: table-row;
-
   // Round the corners so the handle looks nice
   -webkit-border-top-right-radius:  20px;
   -moz-border-radius-topright:      20px;
@@ -184,11 +189,9 @@ aside > div {
 
   .boxed-group {
     //So the vertical bar shows up to the right of this box
-    display: table-cell;
 
     background-color: inherit; // GitHub makes this gray by default.
-    width:      (@aside-width - @aside-handle-width-expanded - 6);
-    max-width:  (@aside-width - @aside-handle-width-expanded - 6);
+    width:      (@aside-width - @aside-handle-width-expanded - 8);
 
     // Make the Add button float right
     > h3 .add-content {
@@ -215,23 +218,23 @@ aside > div {
       position: relative;
     }
   }
+
   // The vertical bar to pull-in/out the sidebar
   > .handle {
     width: @aside-handle-width;
     white-space: nowrap;
     cursor: pointer;
-    position: relative;
+    position: absolute;
+    top: 0px;
+    right: 5px;
 
     // So it shows up to the left of the .boxed-group
-    display: table-cell;
     vertical-align: top;
 
     font-size: (@aside-handle-width - 2px);
-    position: relative;
     font-weight: normal;
     color: white;
 
-
     > .handle-text {
 
       .x-rotate(90deg, left);
@@ -305,7 +308,8 @@ aside > div {
   padding: 3px;
   border-radius: 3px;
   margin: 0 0 15px 0;
-
+  height: 100%;
+  box-sizing: border-box;
 
   >h3 { line-height: 20px; }
 
@@ -326,6 +330,8 @@ aside > div {
   }
 
   .boxed-group-inner {
+    overflow: auto;
+    height: 100%;
     padding: 1px 10px;
     background: #fff;
     border: 1px solid #d8d8d8;

styles/workspace/workspace.less

@@ -27,14 +27,12 @@
 .x-media-type-icon('application/vnd.org.cnx.folder';     "Folder";    #999; "\f07c"); /* icon-folder-open */
 .x-media-type-icon('application/vnd.org.cnx.container';  "Container"; #999; "\f114"); /* icon-folder-close-alt */
 
+html, body {
+  height: 100%;
+  min-height: 100%;
+}
+
 #container {
-  display: -webkit-flex;
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   -webkit-box-orient: horizontal;
   box-orient: horizontal;
   overflow: hidden;
@@ -43,12 +41,15 @@
 // Hide the floating toolbar
 .aloha-toolbar { display: none !important; }
 
-
 #menu-and-content {
+  float: left;
+  width: 100%;
+  height: 100%;
+
   .content-panel {
+    height: 100%;
     background-color: @orange;
 
-
     // Round the corners so the handle looks nice
     -webkit-border-top-left-radius: 20px;
     -moz-border-radius-topleft:     20px;
@@ -68,5 +69,3 @@
     > .boxed-group { background-color: inherit; }
   }
 }
-
-