mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 01:22:36 +08:00
UX: Minor profile page restructure
This commit is contained in:
Kris
parent
2c4b3c21a9
commit
814aee343b
|
|
@ -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}}
|
||||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user