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/components/application/back-button.js

@@ -5,7 +5,7 @@ import Ember from 'ember';
  */
 export default Ember.Component.extend({
   classNames: ['back-button'],
-  classNameBindings: ['active'],
+  classNameBindings: ['active', 'className'],
 
   active: Ember.computed.or('target.paneIsShowing', 'target.paneIsPinned'),
 
@@ -25,6 +25,10 @@ export default Ember.Component.extend({
 
     togglePinned: function() {
       this.get('target').send('togglePinned');
+    },
+
+    toggleDrawer: function() {
+      this.sendAction('toggleDrawer');
     }
   }
 });

ember/app/components/discussion/post-header/meta.js

@@ -28,8 +28,8 @@ export default Ember.Component.extend({
       setTimeout(function() { component.$('.permalink').select(); }, 1);
     });
 
-    // Prevent clicking on the dropdown menu from closing it.
-    this.$('.dropdown-menu').click(function(e) {
+    // Prevent clicking on the input from closing it.
+    this.$('.permalink').click(function(e) {
       e.stopPropagation();
     });
   }

ember/app/components/discussion/stream-scrubber.js

@@ -8,7 +8,7 @@ var $ = Ember.$;
  */
 export default Ember.Component.extend({
   layoutName: 'components/discussion/stream-scrubber',
-  classNames: ['scrubber', 'stream-scrubber'],
+  classNames: ['stream-scrubber', 'dropdown'],
   classNameBindings: ['disabled'],
 
   // The stream-content component to which this scrubber is linked.

ember/app/components/ui/dropdown-select.js

@@ -7,7 +7,7 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   layoutName: 'components/ui/dropdown-select',
   classNames: ['dropdown', 'dropdown-select', 'btn-group'],
-  classNameBindings: ['itemCountClass', 'class'],
+  classNameBindings: ['itemCountClass', 'className'],
 
   buttonClass: 'btn btn-default',
   menuClass: '',

ember/app/components/ui/item-list.js

@@ -14,7 +14,10 @@ export default Ember.Component.extend({
       return [];
     }
     items.forEach(function(item) {
-      item.reopenClass({isListItem: item.proto().tagName === 'li'});
+      item.reopenClass({
+        isListItem: item.proto().tagName === 'li',
+        listItemClass: item.proto().listItemClass
+      });
     });
     return items;
   })

ember/app/components/ui/text-editor.js

@@ -22,7 +22,7 @@ export default Ember.Component.extend(HasItemLists, {
   },
 
   populateControls: function(items) {
-    this.addActionItem(items, 'submit', this.get('submitLabel')).reopen({className: 'btn btn-primary'});
+    this.addActionItem(items, 'submit', this.get('submitLabel'), 'check').reopen({className: 'btn btn-primary', listItemClass: 'primary-control'});
   },
 
   actions: {