From fe6203d4ec58384c0778f67b2ac0bf054b7d2ed9 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
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 236091072..66fcd65a3 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 31c23f964..3cf9a741f 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 56927d55b..075919ca7 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("<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>");
}
});
diff --git a/app/assets/javascripts/discourse/models/nav_item.js b/app/assets/javascripts/discourse/models/nav_item.js
index 41280548f..18571d2de 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 11a4f1f58..078b8b931 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 @@
-<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"}}
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 000000000..8f366864e
--- /dev/null
+++ b/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}}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 1210b069b..4a4ab4423 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;
+ }
}
}