IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 02:40:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Minor profile page restructure

Browse Source
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

9
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}}
@ -146,9 +147,6 @@
{{plugin-outlet name="user-profile-primary" args=(hash model=model)}}
</div>
</div>
<div style='clear: both'></div>
</div>
{{#unless collapsedInfo}}
<div class='secondary'>
<dl>
@ -201,6 +199,9 @@
{{plugin-outlet name="user-profile-secondary" args=(hash model=model)}}
</div>
{{/unless}}
</div>
</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;
}
}
}
}

21
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 {
.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 {