UX: Display group title if it exists.

app/assets/javascripts/discourse/controllers/group.js.es6

@@ -28,9 +28,9 @@ export default Ember.Controller.extend({
     return !automatic && isGroupOwner;
   },
 
-  @computed('model.name')
+  @computed('model.name', 'model.title')
-  groupName(name) {
+  groupName(name, title) {
-    return name.capitalize();
+    return (title || name).capitalize();
   },
 
   @computed('model.name', 'model.flair_url', 'model.flair_bg_color', 'model.flair_color')

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

@@ -1,29 +1,36 @@
 <div class="container group">
   <div class='group-details-container'>
     <div class='group-details'>
+      {{#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>
         <h1 class='group-header'>
-          {{#if model.flair_url}}
+          <span class='group-title'>{{groupName}}</span>
-            <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>
+
+        {{#if model.title}}
+          <h3 class='group-name'>@{{model.name}}</h3>
+        {{/if}}
       </span>
 
       {{#if canEditGroup}}
-        <span>
+        <span class="group-edit">
           {{d-button action="showGroupEditor" label="group.edit.title" class="group-edit-btn" icon="pencil"}}
         </span>
       {{/if}}
     </div>
 
     {{#if model.bio_cooked}}
+      <hr/>
+
       <div class='group-bio'>
         <p>{{{model.bio_cooked}}}</p>
       </div>

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

@@ -3,6 +3,12 @@
   font-weight: normal;
 }
 
+.group-name {
+  font-weight: normal;
+  margin-top: 5px;
+  color: dark-light-diff($primary, $secondary, 50%, -50%);
+}
+
 .group-details-container {
   background: rgba(230, 230, 230, 0.3);
   padding: 20px;
@@ -40,16 +46,14 @@ table.group-members {
   width: 100%;
 }
 
-.group-header, .group-details {
+.group-details {
-  display: table;
-
   span {
-    display: table-cell;
+    display: inline-block;
     vertical-align: middle;
   }
 
   .avatar-flair {
-    $size: 40px;
+    $size: 50px;
 
     background-size: $size;
     height: $size;
@@ -61,8 +65,7 @@ table.group-members {
   }
 }
 
-.group-edit-btn {
+.group-edit {
-  margin-left: 5px;
   float: right;
 }
 

test/javascripts/acceptance/groups-test.js.es6

@@ -39,7 +39,9 @@ test("Admin Browsing Groups", () => {
   visit("/groups/discourse");
 
   andThen(() => {
-    ok($('.nav-stacked li').length === 5, 'it should show messages tab if user is admin');
+    ok(find('.nav-stacked li').length === 5, 'it should show messages tab if user is admin');
+    equal(find('.group-title').text(), 'Awesome Team', 'it should display the group title');
+    equal(find('.group-name').text(), '@discourse', 'it should display the group name');
   });
 
   click('.group-edit-btn');

test/javascripts/fixtures/group-fixtures.js.es6

@@ -4,6 +4,7 @@ export default {
       "id":47,
       "automatic":false,
       "name":"discourse",
+      "title":"Awesome Team",
       "user_count":8,
       "alias_level":0,
       "visible":true,