diff --git a/app/assets/javascripts/discourse/templates/group-index.hbs b/app/assets/javascripts/discourse/templates/group-index.hbs index 41ad1fd9226..bbfe6334d2b 100644 --- a/app/assets/javascripts/discourse/templates/group-index.hbs +++ b/app/assets/javascripts/discourse/templates/group-index.hbs @@ -1,43 +1,44 @@ {{#if model}} {{#if isOwner}} -
-
- {{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"}} -
-
+
+ {{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"}} +
{{/if}} {{#load-more selector=".group-members tr" action="loadMore"}} - - - - {{#if isOwner}} + - {{/if}} - - {{#each model.members as |m|}} - - - - - {{#if isOwner}} - + + + + + + {{#each model.members as |m|}} + + - {{/if}} - - {{/each}} + + + + + {{/each}} +
{{i18n 'last_post'}}{{i18n 'last_seen'}}
- {{user-info user=m}} - {{#if m.owner}}{{i18n "groups.owner"}}{{/if}} - - {{bound-date m.last_posted_at}} - - {{bound-date m.last_seen_at}} - - {{#unless m.owner}} - - {{/unless}} + {{i18n 'last_post'}}{{i18n 'last_seen'}}
+ {{#user-info user=m skipName=skipName}} + {{#if m.owner}}{{i18n "groups.owner"}}{{/if}} + {{/user-info}}
+ {{bound-date m.last_posted_at}} + + {{bound-date m.last_seen_at}} + + {{#if isOwner}} + {{#unless m.owner}} + + {{/unless}} + {{/if}} +
{{/load-more}} {{else}} diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs index c7be3e1fef2..d12de33ef2a 100644 --- a/app/assets/javascripts/discourse/templates/group.hbs +++ b/app/assets/javascripts/discourse/templates/group.hbs @@ -1,7 +1,6 @@ -
-
-
-
+
-
-
-
-
- -

- {{#if model.flair_url}} - - {{avatar-flair - flairURL=model.flair_url - flairBgColor=model.flair_bg_color - flairColor=model.flair_color - groupName=model.name}} - - {{/if}} - {{groupName}} -

-
- - {{#if canEditGroup}} - - {{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}} +
+
+ +

+ {{#if model.flair_url}} + + {{avatar-flair + flairURL=model.flair_url + flairBgColor=model.flair_bg_color + flairColor=model.flair_color + groupName=model.name}} {{/if}} -

-
+ {{groupName}} + + + + {{#if canEditGroup}} + + {{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}} + + {{/if}} +
+ +
{{outlet}} - - +
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss new file mode 100644 index 00000000000..c948ab5da2a --- /dev/null +++ b/app/assets/stylesheets/common/base/group.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss deleted file mode 100644 index 82b79388ac5..00000000000 --- a/app/assets/stylesheets/common/base/groups.scss +++ /dev/null @@ -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; - } - } - } -} - diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss index 989d6cb2864..807b43c7260 100644 --- a/app/assets/stylesheets/desktop.scss +++ b/app/assets/stylesheets/desktop.scss @@ -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. */ diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss new file mode 100644 index 00000000000..e368da25fd8 --- /dev/null +++ b/app/assets/stylesheets/desktop/group.scss @@ -0,0 +1,12 @@ +.group-outlet { + width: 75%; +} + +.group-nav { + width: 20%; + margin-right: 30px; +} + +.group-details { + margin-bottom: 20px; +} diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss index 08036e0eb5e..5ec7d0ecd80 100644 --- a/app/assets/stylesheets/desktop/user.scss +++ b/app/assets/stylesheets/desktop/user.scss @@ -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; diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss index 4152083286c..ce220071ee6 100644 --- a/app/assets/stylesheets/mobile.scss +++ b/app/assets/stylesheets/mobile.scss @@ -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. */ diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss new file mode 100644 index 00000000000..209b720b826 --- /dev/null +++ b/app/assets/stylesheets/mobile/group.scss @@ -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; + } + } +} diff --git a/test/javascripts/acceptance/groups-test.js.es6 b/test/javascripts/acceptance/groups-test.js.es6 index 53c1b157453..045c37fd6fc 100644 --- a/test/javascripts/acceptance/groups-test.js.es6 +++ b/test/javascripts/acceptance/groups-test.js.es6 @@ -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');