Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Improve user directory on mobile

This commit is contained in:
Robin Ward 2015-05-07 16:41:25 -04:00
parent fa69d4cec5
commit e1f9f6d02a
6 changed files with 112 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/components/user-stat.js.es6 Normal file
View File

@ -0,0 +1,3 @@
export default Ember.Component.extend({
classNames: ['user-stat']
});

5
app/assets/javascripts/discourse/templates/components/user-stat.hbs Normal file
View File

@ -0,0 +1,5 @@
<span class='value'>
{{#if icon}}{{fa-icon icon}}{{/if}}
{{number value}}
</span>
<span class='label'>{{i18n label}}</span>

39
app/assets/javascripts/discourse/templates/mobile/users.hbs Normal file
View File

@ -0,0 +1,39 @@
<div class="container">
<div class='directory'>
<div class='clearfix user-controls'>
{{period-chooser period=period}}
{{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name"}}
</div>
{{#conditional-loading-spinner condition=model.loading}}
{{#if model.length}}
<div class='total-rows'>{{i18n "directory.total_rows" count=model.totalRows}}</div>
{{#each ic in model itemController="directory-item"}}
<div class="user {{if ic.me 'me'}}">
{{#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}}
<div class='time-read'>{{unbound it.time_read}}</div>
{{/if}}
{{/with}}
</div>
{{/each}}
{{conditional-loading-spinner condition=model.loadingMore}}
{{else}}
<div class='clearfix'></div>
<p>{{i18n "directory.no_results"}}</p>
{{/if}}
{{/conditional-loading-spinner}}
</div>
</div>

28
app/assets/javascripts/discourse/templates/users.hbs
View File

@ -25,19 +25,21 @@
{{/if}}
</thead>
<tbody>
{{#each item in model itemController="directory-item"}}
<tr {{bind-attr class="item.me"}}>
<td>{{user-small user=item.model.user}}</td>
<td>{{number item.model.likes_received}}</td>
<td>{{number item.model.likes_given}}</td>
<td>{{number item.model.topic_count}}</td>
<td>{{number item.model.post_count}}</td>
<td>{{number item.model.topics_entered}}</td>
<td>{{number item.model.posts_read}}</td>
<td>{{number item.model.days_visited}}</td>
{{#if showTimeRead}}
<td><span class='time-read'>{{unbound item.model.time_read}}</span></td>
{{/if}}
{{#each ic in model itemController="directory-item"}}
<tr class="{{if ic.me 'me'}}">
{{#with ic.model as |it|}}
<td>{{user-small user=it.user}}</td>
<td>{{number it.likes_received}}</td>
<td>{{number it.likes_given}}</td>
<td>{{number it.topic_count}}</td>
<td>{{number it.post_count}}</td>
<td>{{number it.topics_entered}}</td>
<td>{{number it.posts_read}}</td>
<td>{{number it.days_visited}}</td>
{{#if showTimeRead}}
<td><span class='time-read'>{{unbound it.time_read}}</span></td>
{{/if}}
{{/with}}
</tr>
{{/each}}
</tbody>

1
app/assets/stylesheets/mobile.scss
View File

@ -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. */

49
app/assets/stylesheets/mobile/directory.scss Normal file
View File

@ -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;
}