REFACTOR: Stop mixing users page and groups page CSS.
This commit is contained in:
Guo Xiang Tan
parent
31acd311e5
commit
e0c28d6fd5
|
|
@ -1,43 +1,44 @@
|
||||||
{{#if model}}
|
{{#if model}}
|
||||||
{{#if isOwner}}
|
{{#if isOwner}}
|
||||||
<div class='clearfix'>
|
<form id='add-user-to-group' autocomplete="off">
|
||||||
<form id='add-user-to-group' autocomplete="off">
|
{{user-selector usernames=usernames placeholderKey="groups.selector_placeholder" id="user-search-selector" name="usernames"}}
|
||||||
{{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"}}
|
||||||
{{d-button action="addMembers" class="add" icon="plus" label="groups.add"}}
|
</form>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#load-more selector=".group-members tr" action="loadMore"}}
|
{{#load-more selector=".group-members tr" action="loadMore"}}
|
||||||
<table class='group-members'>
|
<table class='group-members'>
|
||||||
<tr>
|
<thead>
|
||||||
<th colspan="2">{{i18n 'last_post'}}</th>
|
|
||||||
<th>{{i18n 'last_seen'}}</th>
|
|
||||||
{{#if isOwner}}
|
|
||||||
<th></th>
|
<th></th>
|
||||||
{{/if}}
|
<th>{{i18n 'last_post'}}</th>
|
||||||
</tr>
|
<th>{{i18n 'last_seen'}}</th>
|
||||||
{{#each model.members as |m|}}
|
<th></th>
|
||||||
<tr>
|
</thead>
|
||||||
<td class='avatar'>
|
|
||||||
{{user-info user=m}}
|
<tbody>
|
||||||
{{#if m.owner}}<span class='is-owner'>{{i18n "groups.owner"}}</span>{{/if}}
|
{{#each model.members as |m|}}
|
||||||
</td>
|
<tr>
|
||||||
<td>
|
<td class='avatar'>
|
||||||
<span class="text">{{bound-date m.last_posted_at}}</span>
|
{{#user-info user=m skipName=skipName}}
|
||||||
</td>
|
{{#if m.owner}}<strong class="group-owner-label">{{i18n "groups.owner"}}</strong>{{/if}}
|
||||||
<td>
|
{{/user-info}}
|
||||||
<span class="text">{{bound-date m.last_seen_at}}</span>
|
|
||||||
</td>
|
|
||||||
{{#if isOwner}}
|
|
||||||
<td class='remove-user'>
|
|
||||||
{{#unless m.owner}}
|
|
||||||
<a class="remove-link" {{action "removeMember" m}}><i class="fa fa-times"></i></a>
|
|
||||||
{{/unless}}
|
|
||||||
</td>
|
</td>
|
||||||
{{/if}}
|
<td>
|
||||||
</tr>
|
<span class="text">{{bound-date m.last_posted_at}}</span>
|
||||||
{{/each}}
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="text">{{bound-date m.last_seen_at}}</span>
|
||||||
|
</td>
|
||||||
|
<td class='remove-user'>
|
||||||
|
{{#if isOwner}}
|
||||||
|
{{#unless m.owner}}
|
||||||
|
<a class="remove-link" {{action "removeMember" m}}><i class="fa fa-times"></i></a>
|
||||||
|
{{/unless}}
|
||||||
|
{{/if}}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{{/each}}
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{{/load-more}}
|
{{/load-more}}
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<div class="container user-table">
|
<div class="container group">
|
||||||
<div class="wrapper">
|
<div class='pull-left group-nav'>
|
||||||
<section class='user-navigation'>
|
<ul class='nav-stacked'>
|
||||||
<ul class='action-list nav-stacked'>
|
|
||||||
{{#each getTabs as |tab|}}
|
{{#each getTabs as |tab|}}
|
||||||
<li class="{{if tab.active 'active'}}">
|
<li class="{{if tab.active 'active'}}">
|
||||||
{{#link-to tab.location model title=tab.message}}
|
{{#link-to tab.location model title=tab.message}}
|
||||||
|
|
@ -11,36 +10,34 @@
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section class='user-main'>
|
<div class='pull-left group-outlet'>
|
||||||
<section class='user-right groups'>
|
<div class='group-details'>
|
||||||
<section class='about group'>
|
<span>
|
||||||
<div class='details group-details'>
|
<h1 class='group-header'>
|
||||||
<span>
|
{{#if model.flair_url}}
|
||||||
<h1 class='group-header'>
|
<span class='group-avatar-flair'>
|
||||||
{{#if model.flair_url}}
|
{{avatar-flair
|
||||||
<span class='group-avatar-flair'>
|
flairURL=model.flair_url
|
||||||
{{avatar-flair
|
flairBgColor=model.flair_bg_color
|
||||||
flairURL=model.flair_url
|
flairColor=model.flair_color
|
||||||
flairBgColor=model.flair_bg_color
|
groupName=model.name}}
|
||||||
flairColor=model.flair_color
|
|
||||||
groupName=model.name}}
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
<span class='group-name'>{{groupName}}</span>
|
|
||||||
</h1>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{{#if canEditGroup}}
|
|
||||||
<span>
|
|
||||||
{{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}}
|
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
<span class='group-name'>{{groupName}}</span>
|
||||||
</section>
|
</h1>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{{#if canEditGroup}}
|
||||||
|
<span>
|
||||||
|
{{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}}
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class='user-main'>
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
</section>
|
</div>
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
@import "desktop/history";
|
@import "desktop/history";
|
||||||
@import "desktop/queued-posts";
|
@import "desktop/queued-posts";
|
||||||
@import "desktop/menu-panel";
|
@import "desktop/menu-panel";
|
||||||
|
@import "desktop/group";
|
||||||
|
|
||||||
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
.group-outlet {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-nav {
|
||||||
|
width: 20%;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-details {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
@ -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 {
|
.user-right {
|
||||||
width: 900px;
|
width: 900px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
@import "mobile/search";
|
@import "mobile/search";
|
||||||
@import "mobile/emoji";
|
@import "mobile/emoji";
|
||||||
@import "mobile/ring";
|
@import "mobile/ring";
|
||||||
|
@import "mobile/group";
|
||||||
|
|
||||||
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
/* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -27,7 +27,7 @@ test("Browsing Groups", () => {
|
||||||
|
|
||||||
visit("/groups/discourse/messages");
|
visit("/groups/discourse/messages");
|
||||||
andThen(() => {
|
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");
|
ok(count('.user-stream .item') > 0, "it lists stream items");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -39,7 +39,7 @@ test("Admin Browsing Groups", () => {
|
||||||
visit("/groups/discourse");
|
visit("/groups/discourse");
|
||||||
|
|
||||||
andThen(() => {
|
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');
|
click('.group-edit-btn');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue