UX: Align group members button/dropdown to the right.

This commit is contained in:
Guo Xiang Tan 2018-04-13 09:16:51 +08:00
parent 90dd12611c
commit 501d4ca564
4 changed files with 59 additions and 20 deletions

View File

@ -1,12 +1,20 @@
{{text-field value=filterInput <div class="group-members-actions">
placeholderKey=filterPlaceholder {{text-field value=filterInput
class="group-username-filter no-blur"}} placeholderKey=filterPlaceholder
class="group-username-filter no-blur"}}
{{#if canManageGroup}} {{#if canManageGroup}}
{{group-members-dropdown {{#if currentUser.admin}}
showAddMembersModal="showAddMembersModal" {{group-members-dropdown
showBulkAddModal="showBulkAddModal"}} showAddMembersModal="showAddMembersModal"
{{/if}} showBulkAddModal="showBulkAddModal"}}
{{else}}
{{d-button icon="plus"
label="groups.add_members.title"
class="group-members-add"}}
{{/if}}
{{/if}}
</div>
{{#if hasMembers}} {{#if hasMembers}}
{{#load-more selector=".group-members tr" action="loadMore"}} {{#load-more selector=".group-members tr" action="loadMore"}}

View File

@ -2,12 +2,19 @@
placeholderKey=filterPlaceholder placeholderKey=filterPlaceholder
class="group-username-filter no-blur"}} class="group-username-filter no-blur"}}
{{#if canManageGroup}} <div class="group-members-manage">
{{d-button action='showAddMembersModal' {{#if canManageGroup}}
icon="plus" {{#if currentUser.admin}}
label="groups.add_members.title" {{group-members-dropdown
class="group-add-members-btn btn btn-primary"}} showAddMembersModal="showAddMembersModal"
{{/if}} showBulkAddModal="showBulkAddModal"}}
{{else}}
{{d-button icon="plus"
label="groups.add_members.title"
class="group-members-add"}}
{{/if}}
{{/if}}
</div>
{{#if hasMembers}} {{#if hasMembers}}
{{#load-more selector=".group-members .user-info" action="loadMore"}} {{#load-more selector=".group-members .user-info" action="loadMore"}}

View File

@ -9,10 +9,19 @@
position: relative; position: relative;
} }
.group-username-filter { .group-members-actions {
position: absolute; position: absolute;
right: 0;
top: -49px; top: -49px;
right: 0px;
.group-username-filter {
margin: 0px;
vertical-align: middle;
}
.group-members-dropdown, .group-members-add {
vertical-align: middle;
}
} }
.group-post { .group-post {

View File

@ -19,7 +19,6 @@
} }
.group-nav.mobile-nav { .group-nav.mobile-nav {
margin-bottom: 10px;
float: left; float: left;
} }
@ -81,11 +80,27 @@ table.group-manage-logs {
} }
} }
.group-username-filter { .group-outlet {
top: -52px; .group-username-filter {
height: 27px; position: absolute;
right: 0px;
top: -42px;
height: 27px;
margin-bottom: 0px;
}
.group-members-manage {
width: 100%;
text-align: right;
}
.group-members-dropdown,
.group-members-add {
margin: 5px 0px;
}
} }
.group-add-members-btn { .group-add-members-btn {
margin-bottom: 10px; margin-bottom: 10px;
} }