REFACTOR: Stop mixing users page and groups page CSS.

app/assets/javascripts/discourse/templates/group-index.hbs

@@ -1,27 +1,27 @@
 {{#if model}}
   {{#if isOwner}}
-    <div class='clearfix'>
     <form id='add-user-to-group' autocomplete="off">
       {{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"}}
     </form>
-    </div>
   {{/if}}
 
   {{#load-more selector=".group-members tr" action="loadMore"}}
     <table class='group-members'>
-      <tr>
+      <thead>
-        <th colspan="2">{{i18n 'last_post'}}</th>
-        <th>{{i18n 'last_seen'}}</th>
-        {{#if isOwner}}
         <th></th>
-        {{/if}}
+        <th>{{i18n 'last_post'}}</th>
-      </tr>
+        <th>{{i18n 'last_seen'}}</th>
+        <th></th>
+      </thead>
+
+      <tbody>
         {{#each model.members as |m|}}
           <tr>
             <td class='avatar'>
-            {{user-info user=m}}
+              {{#user-info user=m skipName=skipName}}
-            {{#if m.owner}}<span class='is-owner'>{{i18n "groups.owner"}}</span>{{/if}}
+                {{#if m.owner}}<strong class="group-owner-label">{{i18n "groups.owner"}}</strong>{{/if}}
+              {{/user-info}}
             </td>
             <td>
               <span class="text">{{bound-date m.last_posted_at}}</span>
@@ -29,15 +29,16 @@
             <td>
               <span class="text">{{bound-date m.last_seen_at}}</span>
             </td>
-          {{#if isOwner}}
             <td class='remove-user'>
+              {{#if isOwner}}
                 {{#unless m.owner}}
                   <a class="remove-link" {{action "removeMember" m}}><i class="fa fa-times"></i></a>
                 {{/unless}}
-            </td>
               {{/if}}
+            </td>
           </tr>
         {{/each}}
+      </tbody>
     </table>
   {{/load-more}}
 {{else}}

app/assets/javascripts/discourse/templates/group.hbs

@@ -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|}}
         <li class="{{if tab.active 'active'}}">
           {{#link-to tab.location model title=tab.message}}
@@ -11,12 +10,10 @@
         </li>
       {{/each}}
     </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'>
-        <div class='details group-details'>
       <span>
         <h1 class='group-header'>
           {{#if model.flair_url}}
@@ -38,9 +35,9 @@
         </span>
       {{/if}}
     </div>
-      </section>
+
+    <div class='user-main'>
       {{outlet}}
-    </section>
+    </div>
-  </section>
   </div>
 </div>

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;
+  }
+}

app/assets/stylesheets/common/base/groups.scss

@@ -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;
-      }
-    }
-  }
-}
-

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. */
 

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;
+}

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;

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. */
 

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;
+    }
+  }
+}

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');