UX: Improve user directory on mobile
This commit is contained in:
Robin Ward
parent
fa69d4cec5
commit
e1f9f6d02a
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default Ember.Component.extend({
|
||||||
|
classNames: ['user-stat']
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<span class='value'>
|
||||||
|
{{#if icon}}{{fa-icon icon}}{{/if}}
|
||||||
|
{{number value}}
|
||||||
|
</span>
|
||||||
|
<span class='label'>{{i18n label}}</span>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -25,19 +25,21 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{{#each item in model itemController="directory-item"}}
|
{{#each ic in model itemController="directory-item"}}
|
||||||
<tr {{bind-attr class="item.me"}}>
|
<tr class="{{if ic.me 'me'}}">
|
||||||
<td>{{user-small user=item.model.user}}</td>
|
{{#with ic.model as |it|}}
|
||||||
<td>{{number item.model.likes_received}}</td>
|
<td>{{user-small user=it.user}}</td>
|
||||||
<td>{{number item.model.likes_given}}</td>
|
<td>{{number it.likes_received}}</td>
|
||||||
<td>{{number item.model.topic_count}}</td>
|
<td>{{number it.likes_given}}</td>
|
||||||
<td>{{number item.model.post_count}}</td>
|
<td>{{number it.topic_count}}</td>
|
||||||
<td>{{number item.model.topics_entered}}</td>
|
<td>{{number it.post_count}}</td>
|
||||||
<td>{{number item.model.posts_read}}</td>
|
<td>{{number it.topics_entered}}</td>
|
||||||
<td>{{number item.model.days_visited}}</td>
|
<td>{{number it.posts_read}}</td>
|
||||||
{{#if showTimeRead}}
|
<td>{{number it.days_visited}}</td>
|
||||||
<td><span class='time-read'>{{unbound item.model.time_read}}</span></td>
|
{{#if showTimeRead}}
|
||||||
{{/if}}
|
<td><span class='time-read'>{{unbound it.time_read}}</span></td>
|
||||||
|
{{/if}}
|
||||||
|
{{/with}}
|
||||||
</tr>
|
</tr>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
@import "mobile/upload";
|
@import "mobile/upload";
|
||||||
@import "mobile/user";
|
@import "mobile/user";
|
||||||
@import "mobile/history";
|
@import "mobile/history";
|
||||||
|
@import "mobile/directory";
|
||||||
|
|
||||||
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue