UX: new layout for groups page, allow changes to automatic group bio (#7350)

app/assets/javascripts/discourse/components/groups-form-profile-fields.js.es6

@@ -21,6 +21,8 @@ export default Ember.Component.extend({
     }
   },
 
+  canEdit: Ember.computed.not("model.automatic"),
+
   @computed("basicNameValidation", "uniqueNameValidation")
   nameValidation(basicNameValidation, uniqueNameValidation) {
     return uniqueNameValidation ? uniqueNameValidation : basicNameValidation;

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

@@ -6,19 +6,16 @@ export default Ember.Controller.extend({
   @computed("model.automatic")
   tabs(automatic) {
     const defaultTabs = [
+      { route: "group.manage.profile", title: "groups.manage.profile.title" },
       {
         route: "group.manage.interaction",
         title: "groups.manage.interaction.title"
       },
+
       { route: "group.manage.logs", title: "groups.manage.logs.title" }
     ];
 
     if (!automatic) {
-      defaultTabs.splice(0, 0, {
-        route: "group.manage.profile",
-        title: "groups.manage.profile.title"
-      });
-
       defaultTabs.splice(1, 0, {
         route: "group.manage.membership",
         title: "groups.manage.membership.title"

app/assets/javascripts/discourse/routes/group-manage-profile.js.es6

@@ -3,11 +3,5 @@ export default Discourse.Route.extend({
 
   titleToken() {
     return I18n.t("groups.manage.profile.title");
-  },
-
-  afterModel(group) {
-    if (group.get("automatic")) {
-      this.replaceWith("group.manage.interaction", group);
-    }
   }
 });

app/assets/javascripts/discourse/templates/components/group-membership-button.hbs

@@ -16,4 +16,6 @@
       disabled=loading
       icon="user-plus"
       label="groups.request"}}
+{{else}}
+  {{yield}}
 {{/if}}

app/assets/javascripts/discourse/templates/components/groups-form-profile-fields.hbs

@@ -1,3 +1,4 @@
+{{#if canEdit}}
   {{#if this.currentUser.admin}}
     <div class="control-group">
       <label class="control-label" for="name">{{i18n 'groups.name'}}</label>
@@ -32,12 +33,14 @@
       </div>
     </div>
   {{/if}}
+{{/if}}
 
 <div class="control-group">
   <label class="control-label" for="bio">{{i18n 'groups.bio'}}</label>
   {{d-editor value=model.bio_raw class="group-form-bio input-xxlarge"}}
 </div>
 
+{{#if canEdit}}
   {{yield}}
 
   <div class="control-group">
@@ -45,3 +48,4 @@
   </div>
 
   {{plugin-outlet name="group-edit" args=(hash group=model)}}
+{{/if}}

app/assets/javascripts/discourse/templates/components/groups-info.hbs

@@ -1,11 +1,5 @@
-<span class='groups-info-name'>{{group.displayName}}</span>
-
 {{#if showFullName}}
-  <span class='groups-info-full-name'>{{group.full_name}}</span>
-{{/if}}
-
-{{#if group.title}}
-  <div>
-    <span class='groups-info-title'>{{group.title}}</span>
-  </div>
+  <span class='groups-info-name'>{{group.full_name}}</span>
+{{else}}
+  <span class='groups-info-name'>{{group.displayName}}</span>
 {{/if}}

app/assets/javascripts/discourse/templates/groups/index.hbs

@@ -25,21 +25,11 @@
     {{#conditional-loading-spinner condition=model.loading}}
       {{#load-more selector=".groups-table .groups-table-row" action=(action "loadMore")}}
         <div class='container'>
-          <table class="groups-table">
-            <thead>
-              <tr>
-                {{directory-toggle field="name" labelKey="groups.group_name" order=order asc=asc}}
-                {{directory-toggle field="user_count" labelKey="groups.user_count" order=order asc=asc}}
-                <th>{{i18n "groups.index.group_type"}}</th>
-                <th>{{i18n "groups.membership"}}</th>
-              </tr>
-            </thead>
-
-            <tbody>
+          <div class="groups-boxes">
             {{#each model as |group|}}
-                <tr class="groups-table-row">
-                  <td class="groups-info">
-                    {{#link-to "group.members" group.name}}
+            {{#link-to "group.members" group.name class="group-box"}}
+                <div class="group-box-inner">
+                  <div class="group-info-wrapper">
                     {{#if group.flair_url}}
                       <span class='group-avatar-flair'>
                         {{avatar-flair
@@ -49,15 +39,29 @@
                           groupName=group.name}}
                       </span>
                     {{/if}}
-
+                    <span class="group-info">
                     {{groups-info group=group}}
-                    {{/link-to}}
-                  </td>
 
-                  <td class="groups-user-count">{{d-icon "group"}}{{group.user_count}}</td>
+                    <div class="group-user-count">{{d-icon "user"}}{{group.user_count}}</div>
+                  </span>
+                </div>
 
-                  <td class="groups-table-type">
-                    {{#if group.public_admission}}
+
+                  <div class="group-description">{{{group.bio_excerpt}}}</div>
+
+                  <div class="group-membership">
+                    {{#group-membership-button tagName='' model=group showLogin=(route-action "showLogin")}}
+                      {{#if group.is_group_owner}}
+                      <span class="is-group-owner">
+                        {{d-icon "shield"}}
+                        {{i18n "groups.index.is_group_owner"}}
+                      </span>
+                      {{else if group.is_group_user}}
+                      <span class="is-group-member">
+                        {{d-icon "check"}}
+                        {{i18n "groups.index.is_group_user"}}
+                      </span>
+                      {{else if group.public_admission}}
                         {{i18n 'groups.index.public'}}
                       {{else if group.isPrivate}}
                         {{d-icon "far-eye-slash"}}
@@ -66,28 +70,16 @@
                         {{#if group.automatic}}
                           {{i18n 'groups.index.automatic'}}
                         {{else}}
+                          {{d-icon "ban"}}
                           {{i18n 'groups.index.closed'}}
                         {{/if}}
                       {{/if}}
-                  </td>
-
-                  <td class="groups-table-membership">
-                    {{#if group.is_group_owner}}
-                      <span>
-                        {{i18n "groups.index.is_group_owner"}}
-                      </span>
-                    {{else if group.is_group_user}}
-                      <span>
-                        {{i18n "groups.index.is_group_user"}}
-                      </span>
-                    {{/if}}
-
-                    {{group-membership-button tagName='' model=group showLogin=(route-action "showLogin")}}
-                  </td>
-                </tr>
+                    {{/group-membership-button}}
+                  </div>
+                </div>
+                {{/link-to}}
             {{/each}}
-            </tbody>
-          </table>
+          </div>
         </div>
       {{/load-more}}
 

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

@@ -1,7 +1,7 @@
 .groups-header {
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 30px;
+  margin-bottom: 1em;
   .groups-header-new {
     order: 2;
     margin-bottom: 0.5em;
@@ -23,190 +23,112 @@
   }
 }
 
-.groups-table {
+.groups-boxes {
+  margin: 1em 0;
   width: 100%;
-
-  tr {
-    td {
-      padding: 0.8em;
-      color: $primary-medium;
-    }
-
-    td.groups-info {
-      width: 50%;
-    }
-
-    td.group-user-status {
-      .d-icon {
-        color: $primary;
-      }
-    }
-
-    td.groups-user-count {
-      width: 17%;
-      font-size: $font-up-2;
-      .d-icon {
-        display: none;
-      }
-    }
-
-    td.groups-table-type {
-      width: 17%;
-      font-size: $font-up-1;
-    }
-
-    td.groups-table-membership {
-      font-size: $font-up-1;
-
-      .group-membership-button {
-        font-size: $font-down-1;
-        display: inline-block;
-        margin-left: 5px;
-        &:empty {
-          display: none;
-        }
-      }
-    }
-    @include breakpoint(mobile) {
+  // IE11 falls back to flexbox
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  // Everything that's not IE11 uses grid
+  @supports (display: grid) {
     display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      padding: 10px 0;
-      td.groups-info,
-      td.groups-user-count,
-      td.groups-table-type,
-      td.groups-table-membership {
+    grid-template-columns: repeat(4, 24%);
+    grid-column-gap: 1.333%;
+    grid-row-gap: 1em;
+    @include breakpoint("tablet") {
+      grid-template-columns: repeat(3, 32%);
+      grid-column-gap: 2%;
+    }
+    @include breakpoint("mobile") {
+      grid-template-columns: 100%;
+    }
+  }
+
+  .group-box {
+    // Flex and margin are for IE11
+    flex: 1 1 24%;
+    margin: 1%;
+    @include breakpoint("mobile") {
+      margin: 0;
+    }
+    display: flex;
+    box-sizing: border-box;
+    cursor: pointer;
+    border: 1px solid $primary-low;
+    color: $primary;
+    .discourse-no-touch & {
+      transition: all 0.25s;
+      &:hover {
+        box-shadow: shadow("card");
+      }
+    }
+    .group-membership {
+      color: $primary-medium;
+      margin-top: auto;
+      padding-top: 1em;
+      .is-group-owner,
+      .is-group-member {
+        color: $success;
+      }
+    }
+    .group-box-inner {
+      padding: 1em;
       width: 100%;
-        padding: 0;
-        text-align: right;
-        font-size: $font-0;
-      }
-      td.groups-info {
-        grid-column-start: 1;
-        grid-column-end: 4;
-        grid-row-start: 1;
-        grid-row-end: 3;
-        text-align: left;
-        line-height: $line-height-medium;
-        margin-bottom: 0.5em;
-        a {
       display: flex;
-        }
+      flex-direction: column;
+      box-sizing: border-box;
+      .group-info-wrapper {
+        display: flex;
+        overflow: hidden;
+        flex: 0 1 auto;
         .group-avatar-flair {
-          margin-right: 0.5em;
-        }
-        .groups-info-name {
-          word-break: break-all;
-          max-width: 45vw;
-        }
-        .groups-info-full-name {
-          font-size: $font-down-1;
-        }
-      }
-      td.groups-user-count {
-        display: flex;
-        align-items: center;
-        grid-column-start: 4;
-        grid-row-start: 1;
-        .d-icon {
-          display: inline-block;
-          margin-right: 0.25em;
-          color: $primary-low-mid;
-        }
-      }
-      td.groups-table-type {
-        grid-row-start: 3;
-        grid-column-start: 1;
-        grid-column-end: 3;
-        text-align: left;
-        align-self: center;
-        .d-icon {
-          margin-right: 0.25em;
-        }
-      }
-      td.groups-table-membership {
-        grid-row-start: 3;
-        grid-column-start: 3;
-        grid-column-end: 5;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        button {
-          margin-left: 5px;
-          display: flex;
-        }
-        &:empty {
-          display: none;
-        }
-      }
-
-      // IE11 grid support
-
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-      td.groups-info {
-        display: -ms-grid;
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-      }
-      td.groups-user-count {
-        justify-content: flex-end;
-        -ms-grid-row: 1;
-        -ms-grid-column: 2;
-      }
-      td.groups-table-type {
-        display: flex;
-        align-items: center;
-        -ms-grid-row: 2;
-        -ms-grid-column: 1;
-      }
-      td.groups-table-membership {
-        display: flex;
-        -ms-grid-row: 2;
-        -ms-grid-column: 2;
-      }
-    }
-  }
-
-  @include breakpoint(mobile) {
-    thead {
-      display: none;
-    }
-  }
-
-  .groups-info {
-    .group-info-details {
-      vertical-align: middle;
-    }
-
-    .groups-info-name {
-      font-weight: bold;
-      color: $primary;
-      color: dark-light-choose($primary-high, $secondary-low);
-    }
-
-    .groups-info-full-name {
-      color: dark-light-choose($primary-high, $secondary-low);
-    }
-
-    .groups-info-title {
-      font-size: $font-down-1;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-    }
-
-    .group-avatar-flair {
-      vertical-align: middle;
-      color: $primary;
+          margin-top: 0.3em;
+          margin-right: 8px;
+          flex: 0 0 auto;
         }
+        .group-info {
+          flex: 1 0 auto;
+          margin-bottom: 1em;
+          width: 70%;
 
           span {
-      display: inline-block;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+      .group-user-count {
+        display: flex;
+        align-items: center;
+        color: $primary-high;
+        .d-icon {
+          margin-right: 0.25em;
+          font-size: 0.8em;
+          color: $primary-medium;
+        }
+      }
+      .group-description {
+        color: $primary-high;
+        word-wrap: break-word;
+      }
+    }
+
+    .groups-info-name {
+      font-size: $font-up-1;
+      font-weight: bold;
+      color: $primary;
     }
 
     $size: 40px;
     $icon-size: $size / 1.8;
 
+    .group-avatar-flair {
+      display: inline-block;
+      color: $primary;
+
       .avatar-flair {
         background-size: $size;
         height: $size;
@@ -222,7 +144,7 @@
           width: $icon-size;
         }
       }
-
+    }
     .avatar-flair-image {
       width: $size;
     }

app/controllers/groups_controller.rb

@@ -507,6 +507,7 @@ class GroupsController < ApplicationController
           mentionable_level
           messageable_level
           default_notification_level
+          bio_raw
         }
       else
         default_params = %i{

app/serializers/basic_group_serializer.rb

@@ -19,6 +19,7 @@ class BasicGroupSerializer < ApplicationSerializer
              :flair_color,
              :bio_raw,
              :bio_cooked,
+             :bio_excerpt,
              :public_admission,
              :public_exit,
              :allow_membership_requests,
@@ -38,6 +39,10 @@ class BasicGroupSerializer < ApplicationSerializer
     end
   end
 
+  def bio_excerpt
+    PrettyText.excerpt(object.bio_cooked, 110) if object.bio_cooked.present?
+  end
+
   def include_incoming_email?
     staff?
   end

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

@@ -5,11 +5,11 @@ acceptance("Groups");
 QUnit.test("Browsing Groups", async assert => {
   await visit("/g?username=eviltrout");
 
-  assert.equal(count(".groups-table-row"), 1, "it displays user's groups");
+  assert.equal(count(".group-box"), 1, "it displays user's groups");
 
   await visit("/g");
 
-  assert.equal(count(".groups-table-row"), 2, "it displays visible groups");
+  assert.equal(count(".group-box"), 2, "it displays visible groups");
   assert.equal(
     find(".group-index-join").length,
     1,