From e1f9f6d02a29dbc8fc767db485d7bcc39eba228a Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Thu, 7 May 2015 16:41:25 -0400 Subject: [PATCH] UX: Improve user directory on mobile --- .../discourse/components/user-stat.js.es6 | 3 ++ .../templates/components/user-stat.hbs | 5 ++ .../discourse/templates/mobile/users.hbs | 39 +++++++++++++++ .../javascripts/discourse/templates/users.hbs | 28 ++++++----- app/assets/stylesheets/mobile.scss | 1 + app/assets/stylesheets/mobile/directory.scss | 49 +++++++++++++++++++ 6 files changed, 112 insertions(+), 13 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/user-stat.js.es6 create mode 100644 app/assets/javascripts/discourse/templates/components/user-stat.hbs create mode 100644 app/assets/javascripts/discourse/templates/mobile/users.hbs create mode 100644 app/assets/stylesheets/mobile/directory.scss diff --git a/app/assets/javascripts/discourse/components/user-stat.js.es6 b/app/assets/javascripts/discourse/components/user-stat.js.es6 new file mode 100644 index 00000000000..290aae5a979 --- /dev/null +++ b/app/assets/javascripts/discourse/components/user-stat.js.es6 @@ -0,0 +1,3 @@ +export default Ember.Component.extend({ + classNames: ['user-stat'] +}); diff --git a/app/assets/javascripts/discourse/templates/components/user-stat.hbs b/app/assets/javascripts/discourse/templates/components/user-stat.hbs new file mode 100644 index 00000000000..e2e4561516c --- /dev/null +++ b/app/assets/javascripts/discourse/templates/components/user-stat.hbs @@ -0,0 +1,5 @@ + + {{#if icon}}{{fa-icon icon}}{{/if}} + {{number value}} + +{{i18n label}} diff --git a/app/assets/javascripts/discourse/templates/mobile/users.hbs b/app/assets/javascripts/discourse/templates/mobile/users.hbs new file mode 100644 index 00000000000..cea25c3a63a --- /dev/null +++ b/app/assets/javascripts/discourse/templates/mobile/users.hbs @@ -0,0 +1,39 @@ +
+
+ +
+ {{period-chooser period=period}} + {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name"}} +
+ + {{#conditional-loading-spinner condition=model.loading}} + {{#if model.length}} +
{{i18n "directory.total_rows" count=model.totalRows}}
+ + {{#each ic in model itemController="directory-item"}} +
+ {{#with ic.model as |it|}} + {{user-small user=it.user}} + {{user-stat value=it.likes_received label="directory.likes_received" icon="heart"}} + {{user-stat value=it.likes_given label="directory.likes_given" icon="heart"}} + {{user-stat value=it.topic_count label="directory.topic_count"}} + {{user-stat value=it.post_count label="directory.post_count"}} + {{user-stat value=it.topics_entered label="directory.topics_entered"}} + {{user-stat value=it.posts_read label="directory.posts_read"}} + {{user-stat value=it.days_visited label="directory.days_visited"}} + {{#if showTimeRead}} +
{{unbound it.time_read}}
+ {{/if}} + {{/with}} +
+ {{/each}} + + {{conditional-loading-spinner condition=model.loadingMore}} + {{else}} +
+

{{i18n "directory.no_results"}}

+ {{/if}} + {{/conditional-loading-spinner}} + +
+
diff --git a/app/assets/javascripts/discourse/templates/users.hbs b/app/assets/javascripts/discourse/templates/users.hbs index 45ea960e7cd..3d4ba100125 100644 --- a/app/assets/javascripts/discourse/templates/users.hbs +++ b/app/assets/javascripts/discourse/templates/users.hbs @@ -25,19 +25,21 @@ {{/if}} - {{#each item in model itemController="directory-item"}} - - {{user-small user=item.model.user}} - {{number item.model.likes_received}} - {{number item.model.likes_given}} - {{number item.model.topic_count}} - {{number item.model.post_count}} - {{number item.model.topics_entered}} - {{number item.model.posts_read}} - {{number item.model.days_visited}} - {{#if showTimeRead}} - {{unbound item.model.time_read}} - {{/if}} + {{#each ic in model itemController="directory-item"}} + + {{#with ic.model as |it|}} + {{user-small user=it.user}} + {{number it.likes_received}} + {{number it.likes_given}} + {{number it.topic_count}} + {{number it.post_count}} + {{number it.topics_entered}} + {{number it.posts_read}} + {{number it.days_visited}} + {{#if showTimeRead}} + {{unbound it.time_read}} + {{/if}} + {{/with}} {{/each}} diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss index 58636be4cfe..91bf389d175 100644 --- a/app/assets/stylesheets/mobile.scss +++ b/app/assets/stylesheets/mobile.scss @@ -17,6 +17,7 @@ @import "mobile/upload"; @import "mobile/user"; @import "mobile/history"; +@import "mobile/directory"; /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */ diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss new file mode 100644 index 00000000000..0442df9d3cf --- /dev/null +++ b/app/assets/stylesheets/mobile/directory.scss @@ -0,0 +1,49 @@ +.directory { + .period-chooser button { + margin: 0; + } + .period-chooser { + li { + text-align: left; + } + } +} + +.user-controls { + padding: 1em; +} + +.total-rows { + padding: 0.25em 0.5em; +} + +.user { + border-top: 1px solid dark-light-diff($primary, $secondary, 80%, -20%); + padding: 1em; + + + &.me { + background-color: dark-light-diff($highlight, $secondary, 70%, -80%); + + .username a, .name, .title, .number, .time-read, .user-stat .label { + color: scale-color($highlight, $lightness: -50%); + } + } + .user-stat { + margin-left: 55px; + font-size: 13px; + + .value { + font-weight: bold; + } + .label { + margin-left: 0.2em; + color: dark-light-diff($primary, $secondary, 50%, -50%); + } + + i.fa-heart { + color: $love; + } + } + margin-bottom: 1em; +}