From fe6203d4ec58384c0778f67b2ac0bf054b7d2ed9 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 22 Jun 2015 14:25:17 +1000 Subject: [PATCH] UX: improve front page styling for mobile --- .../discourse/components/bread-crumbs.js.es6 | 13 ++++- .../components/navigation-bar.js.es6 | 53 ++++++++++++++++++- .../components/navigation-item.js.es6 | 14 +---- .../javascripts/discourse/models/nav_item.js | 12 +++++ .../templates/components/navigation-bar.hbs | 10 ++-- .../mobile/components/navigation-bar.hbs | 13 +++++ app/assets/stylesheets/mobile/topic-list.scss | 34 ++++++++++++ 7 files changed, 127 insertions(+), 22 deletions(-) create mode 100644 app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs diff --git a/app/assets/javascripts/discourse/components/bread-crumbs.js.es6 b/app/assets/javascripts/discourse/components/bread-crumbs.js.es6 index 236091072b1..66fcd65a378 100644 --- a/app/assets/javascripts/discourse/components/bread-crumbs.js.es6 +++ b/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); + } }); diff --git a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 b/app/assets/javascripts/discourse/components/navigation-bar.js.es6 index 31c23f964a9..3cf9a741f10 100644 --- a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 +++ b/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; + }); + }); + } + } + } }); diff --git a/app/assets/javascripts/discourse/components/navigation-item.js.es6 b/app/assets/javascripts/discourse/components/navigation-item.js.es6 index 56927d55bb1..075919ca742 100644 --- a/app/assets/javascripts/discourse/components/navigation-item.js.es6 +++ b/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(""); if (content.get('hasIcon')) { buffer.push(""); } - buffer.push(this.get('name')); + buffer.push(this.get('content.displayName')); buffer.push(""); } }); diff --git a/app/assets/javascripts/discourse/models/nav_item.js b/app/assets/javascripts/discourse/models/nav_item.js index 41280548f76..18571d2debb 100644 --- a/app/assets/javascripts/discourse/models/nav_item.js +++ b/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(), diff --git a/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs b/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs index 11a4f1f58e3..078b8b9315a 100644 --- a/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs +++ b/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs @@ -1,6 +1,4 @@ - +{{#each navItem in navItems}} + {{navigation-item content=navItem filterMode=filterMode}} +{{/each}} +{{custom-html "extraNavItem"}} diff --git a/app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs b/app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs new file mode 100644 index 00000000000..8f366864e83 --- /dev/null +++ b/app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs @@ -0,0 +1,13 @@ +
  • + + {{selectedNavItem.displayName}} + + +
    • +{{#if expanded}} + +{{/if}} diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 1210b069ba1..4a4ab4423a9 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/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; + } } }