UX: improve front page styling for mobile

app/assets/javascripts/discourse/components/bread-crumbs.js.es6

@@ -1,6 +1,6 @@
 //  A breadcrumb including category drop downs
 export default Ember.Component.extend({
-  classNames: ['category-breadcrumb'],
+  classNameBindings: ['hidden:hidden',':category-breadcrumb'],
   tagName: 'ol',
   parentCategory: Em.computed.alias('category.parentCategory'),
 
@@ -12,6 +12,10 @@ export default Ember.Component.extend({
     return !c.get('parentCategory');
   }),
 
+  hidden: function(){
+    return Discourse.Mobile.mobileView && !this.get('category');
+  }.property('category'),
+
   firstCategory: function() {
     return this.get('parentCategory') || this.get('category');
   }.property('parentCategory', 'category'),
@@ -29,6 +33,11 @@ export default Ember.Component.extend({
     return this.get('categories').filter(function (c) {
       return c.get('parentCategory') === firstCategory;
     });
-  }.property('firstCategory', 'hideSubcategories')
+  }.property('firstCategory', 'hideSubcategories'),
+
+  render: function(buffer) {
+    if (this.get('hidden')) { return; }
+    this._super(buffer);
+  }
 
 });

app/assets/javascripts/discourse/components/navigation-bar.js.es6

@@ -1,5 +1,56 @@
 export default Ember.Component.extend({
   tagName: 'ul',
   classNameBindings: [':nav', ':nav-pills'],
-  id: 'navigation-bar'
+  id: 'navigation-bar',
+  selectedNavItem: function(){
+    const filterMode = this.get('filterMode'),
+          navItems = this.get('navItems');
+
+    var item = navItems.find(function(item){
+      return item.get('filterMode').indexOf(filterMode) === 0;
+    });
+
+    return item || navItems[0];
+  }.property('filterMode'),
+
+  closedNav: function(){
+    if (!this.get('expanded')) {
+      this.ensureDropClosed();
+    }
+  }.observes('expanded'),
+
+  ensureDropClosed: function(){
+    if (!this.get('expanded')) {
+      this.set('expanded',false);
+    }
+    $(window).off('click.navigation-bar');
+    Discourse.URL.appEvents.off('dom:clean', this, this.ensureDropClosed);
+  },
+
+  actions: {
+    toggleDrop: function(){
+      this.set('expanded', !this.get('expanded'));
+      var self = this;
+      if (this.get('expanded')) {
+
+        Discourse.URL.appEvents.on('dom:clean', this, this.ensureDropClosed);
+
+        Em.run.next(function() {
+
+          if (!self.get('expanded')) { return; }
+
+          self.$('.drop a').on('click', function(){
+            self.$('.drop').hide();
+            self.set('expanded', false);
+            return true;
+          });
+
+          $(window).on('click.navigation-bar', function() {
+            self.set('expanded', false);
+            return true;
+          });
+        });
+      }
+    }
+  }
 });

app/assets/javascripts/discourse/components/navigation-item.js.es6

@@ -24,25 +24,13 @@ export default Ember.Component.extend(StringBuffer, {
            this.get('filterMode').indexOf(this.get('content.filterMode')) === 0;
   }.property('content.filterMode', 'filterMode'),
 
-  name: function() {
-    var categoryName = this.get('content.categoryName'),
-        name = this.get('content.name'),
-        extra = { count: this.get('content.count') || 0 };
-
-    if (categoryName) {
-      name = 'category';
-      extra.categoryName = Discourse.Formatter.toTitleCase(categoryName);
-    }
-    return I18n.t("filters." + name.replace("/", ".") + ".title", extra);
-  }.property('content.{categoryName,name,count}'),
-
   renderString(buffer) {
     const content = this.get('content');
     buffer.push("<a href='" + content.get('href') + "'>");
     if (content.get('hasIcon')) {
       buffer.push("<span class='" + content.get('name') + "'></span>");
     }
-    buffer.push(this.get('name'));
+    buffer.push(this.get('content.displayName'));
     buffer.push("</a>");
   }
 });

app/assets/javascripts/discourse/models/nav_item.js

@@ -9,6 +9,18 @@
 
 Discourse.NavItem = Discourse.Model.extend({
 
+  displayName: function() {
+    var categoryName = this.get('categoryName'),
+        name = this.get('name'),
+        extra = { count: this.get('count') || 0 };
+
+    if (categoryName) {
+      name = 'category';
+      extra.categoryName = Discourse.Formatter.toTitleCase(categoryName);
+    }
+    return I18n.t("filters." + name.replace("/", ".") + ".title", extra);
+  }.property('categoryName,name,count'),
+
   topicTrackingState: function() {
     return Discourse.TopicTrackingState.current();
   }.property(),

app/assets/javascripts/discourse/templates/components/navigation-bar.hbs

@@ -1,6 +1,4 @@
-<ul class="nav nav-pills" id='navigation-bar'>
-  {{#each navItem in navItems}}
-    {{navigation-item content=navItem filterMode=filterMode}}
-  {{/each}}
-  {{custom-html "extraNavItem"}}
-</ul>
+{{#each navItem in navItems}}
+  {{navigation-item content=navItem filterMode=filterMode}}
+{{/each}}
+{{custom-html "extraNavItem"}}

app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs

@@ -0,0 +1,13 @@
+<li>
+  <a {{action "toggleDrop"}}>
+  {{selectedNavItem.displayName}}
+  <i class='fa fa-caret-down'></i>
+  </a>
+</li>
+{{#if expanded}}
+<ul class='drop'>
+  {{#each navItem in navItems}}
+    {{navigation-item content=navItem filterMode=filterMode}}
+  {{/each}}
+</ul>
+{{/if}}

app/assets/stylesheets/mobile/topic-list.scss

@@ -6,6 +6,9 @@
 // --------------------------------------------------
 
 .list-controls {
+  .category-breadcrumb.hidden {
+    display: none;
+  }
   margin: 5px;
   .nav {
     float: left;
@@ -17,6 +20,37 @@
   .btn {
     float: right;
     margin-left: 8px;
+    margin-top: 5px;
+  }
+  .nav-pills {
+    position: relative;
+  }
+  .nav-pills .drop {
+    border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
+    position: absolute;
+    z-index: 1000;
+    background-color: $secondary;
+    padding: 0 10px 10px 10px;
+    width: 150px;
+    top: 100%;
+    margin: 0;
+    li {
+      list-style-type: none;
+      margin-left: 0;
+      margin-top: 5px;
+      padding-top: 10px;
+      a {
+        width: 100%;
+        display: inline-block;
+      }
+    }
+
+  }
+  .nav-pills > li {
+    background: dark-light-diff($primary, $secondary, 90%, -65%);
+    i.fa-caret-down {
+      margin-left: 8px;
+    }
   }
 }