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}}
-
-
-
+
{{/if}}
{{#load-more selector=".group-members tr" action="loadMore"}}
-
- {{i18n 'last_post'}} |
- {{i18n 'last_seen'}} |
- {{#if isOwner}}
+
|
- {{/if}}
-
- {{#each model.members as |m|}}
-
-
- {{user-info user=m}}
- {{#if m.owner}}{{i18n "groups.owner"}}{{/if}}
- |
-
- {{bound-date m.last_posted_at}}
- |
-
- {{bound-date m.last_seen_at}}
- |
- {{#if isOwner}}
-
- {{#unless m.owner}}
-
- {{/unless}}
+ | {{i18n 'last_post'}} |
+ {{i18n 'last_seen'}} |
+ |
+
+
+
+ {{#each model.members as |m|}}
+
+
+ {{#user-info user=m skipName=skipName}}
+ {{#if m.owner}}{{i18n "groups.owner"}}{{/if}}
+ {{/user-info}}
|
- {{/if}}
-
- {{/each}}
+
+ {{bound-date m.last_posted_at}}
+ |
+
+ {{bound-date m.last_seen_at}}
+ |
+
+ {{#if isOwner}}
+ {{#unless m.owner}}
+
+ {{/unless}}
+ {{/if}}
+ |
+
+ {{/each}}
+
{{/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 @@
-
-
-
-
+
+
+
{{#each getTabs as |tab|}}
-
{{#link-to tab.location model title=tab.message}}
@@ -11,36 +10,34 @@
{{/each}}
-
+
-
-
-
-
-
-
-
-
- {{#if canEditGroup}}
-
- {{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}}
+
+
+
+
-
+
{{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');