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

REFACTOR: Stop mixing users page and groups page CSS.

This commit is contained in:
Guo Xiang Tan 2016-11-30 16:11:02 +08:00
parent 31acd311e5
commit e0c28d6fd5
10 changed files with 201 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/templates/group-index.hbs
View File

@ -1,27 +1,27 @@
{{#if model}}
{{#if isOwner}}
<div class='clearfix'>
<form id='add-user-to-group' autocomplete="off">
{{user-selector usernames=usernames placeholderKey="groups.selector_placeholder" id="user-search-selector" name="usernames"}}
{{d-button action="addMembers" class="add" icon="plus" label="groups.add"}}
</form>
</div>
{{/if}}
{{#load-more selector=".group-members tr" action="loadMore"}}
<table class='group-members'>
<tr>
<th colspan="2">{{i18n 'last_post'}}</th>
<th>{{i18n 'last_seen'}}</th>
{{#if isOwner}}
<thead>
<th></th>
{{/if}}
</tr>
<th>{{i18n 'last_post'}}</th>
<th>{{i18n 'last_seen'}}</th>
<th></th>
</thead>
<tbody>
{{#each model.members as |m|}}
<tr>
<td class='avatar'>
{{user-info user=m}}
{{#if m.owner}}<span class='is-owner'>{{i18n "groups.owner"}}</span>{{/if}}
{{#user-info user=m skipName=skipName}}
{{#if m.owner}}<strong class="group-owner-label">{{i18n "groups.owner"}}</strong>{{/if}}
{{/user-info}}
</td>
<td>
<span class="text">{{bound-date m.last_posted_at}}</span>
@ -29,15 +29,16 @@
<td>
<span class="text">{{bound-date m.last_seen_at}}</span>
</td>
{{#if isOwner}}
<td class='remove-user'>
{{#if isOwner}}
{{#unless m.owner}}
<a class="remove-link" {{action "removeMember" m}}><i class="fa fa-times"></i></a>
{{/unless}}
</td>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/load-more}}
{{else}}

21
app/assets/javascripts/discourse/templates/group.hbs
View File

@ -1,7 +1,6 @@
<div class="container user-table">
<div class="wrapper">
<section class='user-navigation'>
<ul class='action-list nav-stacked'>
<div class="container group">
<div class='pull-left group-nav'>
<ul class='nav-stacked'>
{{#each getTabs as |tab|}}
<li class="{{if tab.active 'active'}}">
{{#link-to tab.location model title=tab.message}}
@ -11,12 +10,10 @@
</li>
{{/each}}
</ul>
</section>
</div>
<section class='user-main'>
<section class='user-right groups'>
<section class='about group'>
<div class='details group-details'>
<div class='pull-left group-outlet'>
<div class='group-details'>
<span>
<h1 class='group-header'>
{{#if model.flair_url}}
@ -38,9 +35,9 @@
</span>
{{/if}}
</div>
</section>
<div class='user-main'>
{{outlet}}
</section>
</section>
</div>
</div>
</div>

101
app/assets/stylesheets/common/base/group.scss Normal file
View File

@ -0,0 +1,101 @@
.group-header {
font-size: 2.142em;
font-weight: normal;
}
table.group-members {
width: 100%;
th, tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}
th {
text-align: left;
}
tr {
.user-info {
display: block;
}
td {
color: dark-light-diff($primary, $secondary, 50%, -50%);
padding: 0.8em 0;
}
}
}
.group-owner-label {
color: $primary;
}
.group-header, .group-details {
display: table;
span {
display: table-cell;
vertical-align: middle;
}
.avatar-flair {
$size: 40px;
background-size: $size;
height: $size;
width: $size;
i {
font-size: $size !important;
}
}
}
.group-edit-btn {
margin-left: 5px;
}
.form-horizontal {
label {
font-weight: bold;
}
input[type="text"] {
width: 80% !important;
margin-bottom: 10px;
}
.group-flair-inputs {
display: inline-block;
margin-top: 30px;
margin-bottom: 30px;
.group-flair-left {
float: left;
}
.group-flair-right {
float: left;
margin-left: 30px;
}
}
.avatar-flair-preview {
position: relative;
width: 45px;
.avatar-wrapper {
background-color: #f4f4f4;
}
}
}
#add-user-to-group {
.ac-wrap {
width: 100% !important;
}
.add {
margin-top: 10px;
}
}

62
app/assets/stylesheets/common/base/groups.scss
View File

@ -1,62 +0,0 @@
.groups {
.group-header, .group-details {
display: table;
span {
display: table-cell;
vertical-align: middle;
}
.avatar-flair {
$size: 40px;
background-size: $size;
height: $size;
width: $size;
i {
font-size: $size !important;
}
}
}
.group-edit-btn {
margin-left: 5px;
}
.form-horizontal {
label {
font-weight: bold;
}
input[type="text"] {
width: 80% !important;
margin-bottom: 10px;
}
.group-flair-inputs {
display: inline-block;
margin-top: 30px;
margin-bottom: 30px;
.group-flair-left {
float: left;
}
.group-flair-right {
float: left;
margin-left: 30px;
}
}
.avatar-flair-preview {
position: relative;
width: 45px;
.avatar-wrapper {
background-color: #f4f4f4;
}
}
}
}

1
app/assets/stylesheets/desktop.scss
View File

@ -19,6 +19,7 @@
@import "desktop/history";
@import "desktop/queued-posts";
@import "desktop/menu-panel";
@import "desktop/group";
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */

12
app/assets/stylesheets/desktop/group.scss Normal file
View File

@ -0,0 +1,12 @@
.group-outlet {
width: 75%;
}
.group-nav {
width: 20%;
margin-right: 30px;
}
.group-details {
margin-bottom: 20px;
}

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

@ -133,50 +133,6 @@
}
}
table.group-members {
width: 100%;
p {
max-width: 600px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
th {
padding: 0.5em;
text-align: right;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}
td.avatar {
width: 60px;
position: relative;
.is-owner {
position: absolute;
right: 0;
top: 20px;
color: dark-light-diff($primary, $secondary, 50%, -50%);
}
}
td.remove-user {
text-align: right;
}
td {
padding: 0.5em;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
img {
margin-right: 10px;
}
span.text {
float: right;
font-size: 1.2em;
color: dark-light-diff($primary, $secondary, 50%, -50%);
}
}
}
.user-right.groups {
margin-top: 0;
}
.user-right {
width: 900px;
margin-top: 20px;

1
app/assets/stylesheets/mobile.scss
View File

@ -22,6 +22,7 @@
@import "mobile/search";
@import "mobile/emoji";
@import "mobile/ring";
@import "mobile/group";
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */

23
app/assets/stylesheets/mobile/group.scss Normal file
View File

@ -0,0 +1,23 @@
.group {
margin-top: 15px;
}
.group-nav, .group-outlet {
width: 100%;
}
table.group-members {
th {
text-align: center;
}
tr {
.user-info {
width: 130px;
}
td {
padding-left: 0.5em;
}
}
}

4
test/javascripts/acceptance/groups-test.js.es6
View File

@ -27,7 +27,7 @@ test("Browsing Groups", () => {
visit("/groups/discourse/messages");
andThen(() => {
ok($('.action-list li').length === 4, 'it should not show messages tab');
ok($('.nav-stacked li').length === 4, 'it should not show messages tab');
ok(count('.user-stream .item') > 0, "it lists stream items");
});
});
@ -39,7 +39,7 @@ test("Admin Browsing Groups", () => {
visit("/groups/discourse");
andThen(() => {
ok($('.action-list li').length === 5, 'it should show messages tab if user is admin');
ok($('.nav-stacked li').length === 5, 'it should show messages tab if user is admin');
});
click('.group-edit-btn');