UX: Restyle group pages a little.

This commit is contained in:
Guo Xiang Tan 2016-12-05 16:53:58 +08:00
parent adb7fcb6b3
commit 248c5af556
2 changed files with 40 additions and 32 deletions

View File

@ -1,4 +1,35 @@
<div class="container group">
<div class='group-details-container'>
<div class='group-details'>
<span>
<h1 class='group-header'>
{{#if model.flair_url}}
<span class='group-avatar-flair'>
{{avatar-flair
flairURL=model.flair_url
flairBgColor=model.flair_bg_color
flairColor=model.flair_color
groupName=model.name}}
</span>
{{/if}}
<span class='group-name'>{{groupName}}</span>
</h1>
</span>
{{#if canEditGroup}}
<span>
{{d-button action="showGroupEditor" label="group.edit.title" class="group-edit-btn" icon="pencil"}}
</span>
{{/if}}
</div>
{{#if model.bio_cooked}}
<div class='group-bio'>
<p>{{{model.bio_cooked}}}</p>
</div>
{{/if}}
</div>
<div class='pull-left group-nav'>
<ul class='nav-stacked'>
{{#each getTabs as |tab|}}
@ -13,37 +44,6 @@
</div>
<div class='pull-left group-outlet'>
<div class='group-details-container'>
<div class='group-details'>
<span>
<h1 class='group-header'>
{{#if model.flair_url}}
<span class='group-avatar-flair'>
{{avatar-flair
flairURL=model.flair_url
flairBgColor=model.flair_bg_color
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>
{{/if}}
</div>
{{#if model.bio_cooked}}
<div class='group-bio'>
<p>{{{model.bio_cooked}}}</p>
</div>
{{/if}}
</div>
<div class='user-main'>
{{outlet}}
</div>

View File

@ -4,8 +4,9 @@
}
.group-details-container {
background: rgba(204, 204, 204, 0.2);
background: rgba(230, 230, 230, 0.3);
padding: 20px;
margin-bottom: 30px;
}
table.group-members {
@ -35,6 +36,10 @@ table.group-members {
color: $primary;
}
.group-details {
width: 100%;
}
.group-header, .group-details {
display: table;
@ -58,6 +63,7 @@ table.group-members {
.group-edit-btn {
margin-left: 5px;
float: right;
}
.groups.edit-group .form-horizontal {
@ -100,6 +106,8 @@ table.group-members {
}
#add-user-to-group {
margin: 0px;
.ac-wrap {
width: 100% !important;
}