codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 17:46:05 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: improve user page styling

Browse source
This commit is contained in:
Sam Saffron 2016-01-11 22:40:59 +11:00
parent 98c0fac461
commit 7350b6c6e6
6 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
View file

@ -3,9 +3,9 @@ import Topic from 'discourse/models/topic';
export default Ember.Controller.extend({ export default Ember.Controller.extend({
needs: ["user-topics-list"], needs: ["user-topics-list", "user"],
pmView: false, pmView: false,
viewingSelf: Em.computed.alias("controllers.user.viewingSelf"),
isGroup: Em.computed.equal('pmView', 'groups'), isGroup: Em.computed.equal('pmView', 'groups'),
selected: Em.computed.alias('controllers.user-topics-list.selected'), selected: Em.computed.alias('controllers.user-topics-list.selected'),

2
app/assets/javascripts/discourse/templates/user/activity.hbs
View file

@ -1,5 +1,5 @@
<section class='user-navigation'> <section class='user-navigation'>
<ul class='action-list nav-stacked'> <ul class='action-list activity-list nav-stacked'>
<li class='no-glyph'> <li class='no-glyph'>
{{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}} {{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}

2
app/assets/javascripts/discourse/templates/user/notifications.hbs
View file

@ -1,6 +1,6 @@
<section class='user-navigation'> <section class='user-navigation'>
<ul class='action-list nav-stacked'> <ul class='notification-list action-list nav-stacked'>
{{#if model}} {{#if model}}
<li class='no-glyph'> <li class='no-glyph'>
{{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}} {{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}}

6
app/assets/javascripts/discourse/templates/user/user.hbs
View file

@ -172,7 +172,11 @@
{{/if}} {{/if}}
</ul> </ul>
{{outlet}} <div class='user-table'>
<div class='wrapper'>
{{outlet}}
</div>
</div>
</section> </section>
</div> </div>

2
app/assets/stylesheets/common/admin/admin_base.scss
View file

@ -1532,7 +1532,7 @@ button.ru {
@media all @media all
and (max-width : 850px) { and (max-width : 850px) {
html:not(.mobile-view) .nav-stacked { html:not(.mobile-view) .admin-content .nav-stacked {
.glyph {width: auto; position: relative;} .glyph {width: auto; position: relative;}
> li > a {padding: 13px} > li > a {padding: 13px}
} }

39
app/assets/stylesheets/desktop/user.scss
View file

@ -79,11 +79,26 @@
margin-top: 18px; margin-top: 18px;
} }
.user-table {
margin-top: 30px;
width: 100%;
display: table;
.wrapper {
display: table-row;
}
}
.user-navigation .nav-stacked .glyph {
float: right;
display: block;
position: static;
}
.user-navigation { .user-navigation {
width: 21.62%; display: table-cell;
margin-right: 1.8018%; vertical-align: top;
float: left; width: 170px;
margin-top: 20px; padding-right: 50px;
h3 { h3 {
color: $primary; color: $primary;
@ -161,9 +176,9 @@
} }
.user-right { .user-right {
width: 75%; max-width: 700px;
float: right;
margin-top: 20px; margin-top: 20px;
display: table-cell;
} }
.user-content { .user-content {
@ -654,13 +669,18 @@
} }
.user-main .nav-stacked { .user-main .nav-stacked {
&.notification-list {
padding-top: 40px;
}
&.activity-list {
padding-top: 20px;
}
background-color: transparent; background-color: transparent;
margin-top: 20px;
> li { > li {
border-bottom: none; border-bottom: none;
> a { > a {
padding: 8px 8px 8px 30px; padding: 8px 13px;
color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%)); color: dark-light-choose(scale-color($primary, $lightness: 40%), scale-color($secondary, $lightness: 40%));
} }
} }
@ -671,8 +691,9 @@
background-color: transparent; background-color: transparent;
} }
li > a.active:after { li > a.active:after {
border-left-color: none; display: none;
} }
} }