UX: Improving group directory layout for small screens

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

@@ -54,7 +54,7 @@
                     {{/link-to}}
                   </td>
 
-                  <td class="groups-user-count">{{group.user_count}}</td>
+                  <td class="groups-user-count">{{d-icon "group"}}{{group.user_count}}</td>
 
                   <td class="groups-table-type">
                     {{#if group.public_admission}}
@@ -82,7 +82,7 @@
                       </span>
                     {{/if}}
 
-                    {{group-membership-button model=group showLogin='showLogin'}}
+                    {{group-membership-button tagName='' model=group showLogin='showLogin'}}
                   </td>
                 </tr>
               {{/each}}

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

@@ -57,6 +57,9 @@
     td.groups-user-count {
       width: 17%;
       font-size: $font-up-2;
+      .d-icon {
+        display: none;
+      }
     }
 
     td.groups-table-type {
@@ -65,14 +68,114 @@
     }
 
     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) {
+      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 {
+        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;
+        .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;
+      }
+      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;
+          align-items: baseline;
+        }
+        &:empty {
+          display: none;
+        }
       }
 
-      > span {
-        margin-right: 5px;
-        font-size: $font-up-1;
+      // 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;
     }
   }
 

app/assets/stylesheets/mobile/groups.scss

@@ -13,4 +13,12 @@
   .groups-header-new {
     margin-top: 10px;
   }
+  @include breakpoint(mobile-small) {
+    .groups-header-filters-name {
+      width: 50%;
+    }
+    .groups-header-filters-type {
+      width: 100%;
+    }
+  }
 }