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

UX: Minor profile page restructure

This commit is contained in:
Kris 2019-03-29 12:52:26 -04:00
parent 2c4b3c21a9
commit 814aee343b
4 changed files with 93 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
app/assets/javascripts/discourse/templates/user.hbs
View File

@ -1,8 +1,9 @@
<div class="container {{if viewingSelf 'viewing-self'}}">
{{#d-section class="user-main"}}
<section class="{{if collapsedInfo 'collapsed-info'}} about {{if hasProfileBackground 'has-background' 'no-background'}}" style={{model.profileBackground}}>
<section class="{{if collapsedInfo 'collapsed-info'}} about {{if hasProfileBackground 'has-background' 'no-background'}}" >
{{#unless collapsedInfo}}
<div class="user-profile-image" style={{model.profileBackground}}></div>
{{#if showStaffCounters}}
<div class='staff-counters'>
{{#if model.number_of_flags_given}}
@ -12,7 +13,7 @@
<div>
{{#link-to 'review' (query-params username=model.username status='all' type='ReviewableFlaggedPost')}}
<span class="flagged-posts">{{model.number_of_flagged_posts}}</span>{{i18n 'user.staff_counters.flagged_posts'}}
{{/link-to}}
{{/link-to}}
</div>
{{/if}}
{{#if model.number_of_deleted_posts}}
@ -55,7 +56,7 @@
{{/if}}
{{/if}}
{{#if currentUser.staff}}
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n 'admin.user.show_admin_profile'}}</a></li>
{{/if}}
{{plugin-outlet name="user-profile-controls"
tagName=""
@ -146,61 +147,61 @@
{{plugin-outlet name="user-profile-primary" args=(hash model=model)}}
</div>
</div>
<div style='clear: both'></div>
{{#unless collapsedInfo}}
<div class='secondary'>
<dl>
{{#if model.created_at}}
<div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>
{{/if}}
{{#if model.last_posted_at}}
<div><dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd></div>
{{/if}}
{{#if model.last_seen_at}}
<div><dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd></div>
{{/if}}
<div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
{{#if model.invited_by}}
<div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
{{/if}}
{{#if model.trust_level}}
<div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
{{/if}}
{{#if canCheckEmails}}
<div><dt>{{i18n 'user.email.title'}}</dt>
<dd title={{model.email}}>
{{#if model.email}}
{{model.email}}
{{else}}
{{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
{{/if}}
</dd>
</div>
{{/if}}
{{#if model.displayGroups}}
<div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
<dd class='groups'>
{{#each model.displayGroups as |group|}}
<span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
{{/each}}
{{#link-to "groups" (query-params username=model.username)}}
...
{{/link-to}}
</dd>
</div>
{{/if}}
{{#if canDeleteUser}}
<div>{{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
{{/if}}
</dl>
{{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
</div>
{{/unless}}
</div>
{{#unless collapsedInfo}}
<div class='secondary'>
<dl>
{{#if model.created_at}}
<div><dt>{{i18n 'user.created'}}</dt><dd>{{bound-date model.created_at}}</dd></div>
{{/if}}
{{#if model.last_posted_at}}
<div><dt>{{i18n 'user.last_posted'}}</dt><dd>{{bound-date model.last_posted_at}}</dd></div>
{{/if}}
{{#if model.last_seen_at}}
<div><dt>{{i18n 'user.last_seen'}}</dt><dd>{{bound-date model.last_seen_at}}</dd></div>
{{/if}}
<div><dt>{{i18n 'views'}}</dt><dd>{{model.profile_view_count}}</dd></div>
{{#if model.invited_by}}
<div><dt class="invited-by">{{i18n 'user.invited_by'}}</dt><dd class="invited-by">{{#link-to 'user' model.invited_by}}{{model.invited_by.username}}{{/link-to}}</dd></div>
{{/if}}
{{#if model.trust_level}}
<div><dt class="trust-level">{{i18n 'user.trust_level'}}</dt><dd class="trust-level">{{model.trustLevel.name}}</dd></div>
{{/if}}
{{#if canCheckEmails}}
<div><dt>{{i18n 'user.email.title'}}</dt>
<dd title={{model.email}}>
{{#if model.email}}
{{model.email}}
{{else}}
{{d-button action=(route-action "checkEmail") actionParam=model icon="far-envelope" label="admin.users.check_email.text" class="btn-primary"}}
{{/if}}
</dd>
</div>
{{/if}}
{{#if model.displayGroups}}
<div><dt class="groups">{{i18n 'groups.title' count=model.displayGroups.length}}</dt>
<dd class='groups'>
{{#each model.displayGroups as |group|}}
<span>{{#link-to 'group' group.name class="group-link"}}{{group.name}}{{/link-to}}</span>
{{/each}}
{{#link-to "groups" (query-params username=model.username)}}
...
{{/link-to}}
</dd>
</div>
{{/if}}
{{#if canDeleteUser}}
<div>{{d-button action=(action "adminDelete") icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}</div>
{{/if}}
</dl>
{{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
</div>
{{/unless}}
</section>
<div class='user-content-wrapper'>

6
app/assets/stylesheets/common/base/user.scss
View File

@ -101,9 +101,9 @@
margin-bottom: 15px;
.secondary {
background: $secondary;
display: inline-block;
width: 100%;
border-top: 1px solid $primary-low;
border-bottom: 1px solid $primary-low;
.btn {
padding: 4px 12px;
@ -155,6 +155,7 @@
.details {
background: rgba($secondary, 0.8);
border-bottom: 1px solid $primary-low;
h1 {
font-size: $font-up-5;
@ -196,7 +197,6 @@
.primary {
width: 100%;
position: relative;
float: left;
h1 {
font-weight: bold;

38
app/assets/stylesheets/desktop/user.scss
View File

@ -103,9 +103,6 @@
margin-bottom: 50px;
.about {
background-position: center center;
background-size: cover;
&.group {
.details {
padding: 15px 0;
@ -115,12 +112,8 @@
}
.details {
padding-bottom: s(2);
transition: margin 0.15s linear;
img.avatar {
margin: 0 20px 10px 0;
transition: all 0.1s linear;
}
.primary {
@ -149,12 +142,23 @@
}
}
}
.secondary {
margin-top: s(4);
}
}
&.has-background {
.user-profile-image {
height: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.details {
padding: 15px 15px 4px 15px;
margin-top: 240px;
box-sizing: border-box;
width: 100%;
padding: 15px 0 0 0;
bottom: 0;
}
}
@ -169,11 +173,14 @@
}
&.collapsed-info {
.user-profile-image {
display: none;
}
.controls {
width: auto;
ul {
li {
> ul {
> li {
display: inline;
}
@ -185,16 +192,11 @@
}
.details {
padding: 0 0 2px 0;
position: relative;
padding: 0;
margin-top: 0;
border-bottom: 1px solid $primary-low;
}
&.has-background {
.details {
padding: 12px 15px 2px 15px;
}
}
}
}

27
app/assets/stylesheets/mobile/user.scss
View File

@ -47,14 +47,13 @@
color: $secondary;
.secondary {
margin-bottom: s(3);
dl {
padding: s(2) 0;
}
}
.details {
background: $secondary;
margin-bottom: s(3);
h1 {
line-height: $line-height-small;
@ -131,16 +130,15 @@
}
&.has-background {
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
.user-profile-image {
height: 200px;
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
}
.user-profile-avatar {
margin-top: s(-24);
}
.details {
margin-top: 200px;
}
}
.controls {
@ -163,6 +161,13 @@
a {
width: 100%;
}
.select-kit.dropdown-select-box.user-notifications-dropdown {
width: 100%;
li {
flex: 1 1 100%;
margin-left: 0;
}
}
}
}
@ -210,10 +215,6 @@
.user-profile-names {
text-align: left;
}
.controls {
margin: s(2) 0 s(3);
border-bottom: 1px solid $primary-low;
}
}
.form-horizontal .control-group.category {