Trying to position at the bottom. We need a better flexbox impl

spec/app/status-bar-spec.coffee

@@ -2,13 +2,13 @@ $ = require 'jquery'
 RootView = require 'root-view'
 StatusBar = require 'status-bar'
 
-describe "StatusBar", ->
+fdescribe "StatusBar", ->
   [rootView, statusBar] = []
 
   beforeEach ->
     rootView = new RootView(pathToOpen: require.resolve('fixtures/sample.js'))
     rootView.simulateDomAttachment()
-    StatusBar.initialize(rootView)
+    # StatusBar.initialize(rootView)
     statusBar = rootView.find('.status-bar').view()
 
   describe "@initialize", ->
@@ -28,7 +28,7 @@ describe "StatusBar", ->
       it "displays 'untitled' instead of the buffer's path, but still displays the buffer position", ->
         rootView = new RootView
         rootView.simulateDomAttachment()
-        StatusBar.initialize(rootView)
+        # StatusBar.initialize(rootView)
         statusBar = rootView.find('.status-bar').view()
         expect(statusBar.currentPath.text()).toBe 'untitled'
         expect(statusBar.cursorPosition.text()).toBe '0,0'

src/app/root-view.coffee

@@ -13,6 +13,7 @@ CommandPanel = require 'command-panel'
 Pane = require 'pane'
 PaneColumn = require 'pane-column'
 PaneRow = require 'pane-row'
+StatusBar = require 'status-bar'
 
 module.exports =
 class RootView extends View
@@ -46,6 +47,8 @@ class RootView extends View
 
     @deserializePanes(panesViewState) if panesViewState
 
+    StatusBar.initialize(this)
+
   serialize: ->
     projectPath: @project?.path
     panesViewState: @serializePanes()

src/app/status-bar.coffee

@@ -3,8 +3,10 @@
 module.exports =
 class StatusBar extends View
   @initialize: (rootView) ->
+    requireStylesheet 'status-bar.css'
+
     for editor in rootView.editors()
-      @appendToEditorPane(rootView, editor)
+      @appendToEditorPane(rootView, editor) if rootView.parents('html').length
 
     rootView.on 'editor-open', (e, editor) =>
       @appendToEditorPane(rootView, editor)
@@ -27,3 +29,8 @@ class StatusBar extends View
 
     position = @editor.getCursorBufferPosition()
     @cursorPosition.text("#{position.row},#{position.column}")
+
+    @height(@editor.lineHeight)
+    console.log "HELLO"
+    console.log height: "-webkit-calc(100% - #{@editor.lineHeight}px)"
+    @editor.css(height: "-webkit-calc(100% - #{@editor.lineHeight}px)")

static/atom.css

@@ -43,10 +43,11 @@ body {
   -webkit-box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 0, .1);
 }
 
-.row > * + * {
+#root-view #panes .row > * + * {
   border-left: 5px solid #515151;
 }
 
-.column > * + * {
+#root-view #panes .column > * + * {
   border-top: 5px solid #515151;
 }
+

static/status-bar.css

@@ -0,0 +1,15 @@
+.status-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: black;
+  color: white;
+  padding: 5px;
+}
+
+.status-bar .cursor-position {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}