Responsive design baby!

Mobile responsive design with a very native feel, all in pure CSS (no
templating differences between versions — even though some things are
in very different positions.)

I’ve been working on this whole thing in my head for a while now,
planning out how certain components will be laid out on the mobile
version, and how to reason about them in the templates so that a
substantially different layout can still be achieved by only using CSS.
Today I finally wrote the CSS and it’s come together pretty damn
perfectly.

Still to come:
- Swiping left or right on discussions to reveal controls
- Tablet version

ember/app/views/application.js

@@ -30,6 +30,12 @@ export default Ember.View.extend(HasItemLists, {
     });
   }),
 
+  drawerShowingChanged: Ember.observer('controller.drawerShowing', function() {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      $('body').toggleClass('drawer-open', this.get('controller.drawerShowing'));
+    });
+  }),
+
   didInsertElement: function() {
     // Add a class to the body when the window is scrolled down.
   	$(window).scroll(function() {
@@ -38,9 +44,9 @@ export default Ember.View.extend(HasItemLists, {
 
     // Resize the main content area so that the footer sticks to the
     // bottom of the viewport.
-    $(window).resize(function() {
-      $('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
-    }).resize();
+    // $(window).resize(function() {
+    //   $('#main').css('min-height', $(window).height() - $('#header').outerHeight() - $('#footer').outerHeight(true));
+    // }).resize();
 
     var view = this;
     this.$('#modal').on('hide.bs.modal', function() {
@@ -50,6 +56,19 @@ export default Ember.View.extend(HasItemLists, {
     }).on('shown.bs.modal', function() {
       view.get('controller.modalController').send('focus');
     });
+
+    this.$().on('show.bs.dropdown', function() {
+      $('body').addClass('dropdown-open');
+    }).on('hide.bs.dropdown', function() {
+      $('body').removeClass('dropdown-open');
+    });
+
+    this.$('.global-content').click(function(e) {
+      if (view.get('controller.drawerShowing')) {
+        e.preventDefault();
+        view.set('controller.drawerShowing', false);
+      }
+    });
   },
 
   switchHeader: Ember.observer('controller.session.user', function() {