ui: Improve layout of node cards on large and small screens (#4761)

1. The grid based unhealthy cards are now clamped to only four wide
maximum. This means that on larger screen the cards are much wider
meaning you can view more information. Grid gutters are also clamped at
a certain ideal width screen, remaining responsive for anything below
this.

2. The healthy node columns are finally responsive following the same
column rules as unhealthy nodes

ui-v2/app/components/list-collection.js

@@ -1,16 +1,28 @@
-import { computed, get } from '@ember/object';
+import { computed, get, set } from '@ember/object';
 import Component from 'ember-collection/components/ember-collection';
+import PercentageColumns from 'ember-collection/layouts/percentage-columns';
 import style from 'ember-computed-style';
 import WithResizing from 'consul-ui/mixins/with-resizing';
 import qsaFactory from 'consul-ui/utils/qsa-factory';
 const $$ = qsaFactory();
-
 export default Component.extend(WithResizing, {
   tagName: 'div',
   attributeBindings: ['style'],
   height: 500,
+  cellHeight: 113,
   style: style('getStyle'),
   classNames: ['list-collection'],
+  init: function() {
+    this._super(...arguments);
+    this.columns = [25, 25, 25, 25];
+  },
+  didReceiveAttrs: function() {
+    this._cellLayout = this['cell-layout'] = new PercentageColumns(
+      get(this, 'items.length'),
+      get(this, 'columns'),
+      get(this, 'cellHeight')
+    );
+  },
   getStyle: computed('height', function() {
     return {
       height: get(this, 'height'),
@@ -28,5 +40,35 @@ export default Component.extend(WithResizing, {
       this.updateItems();
       this.updateScrollPosition();
     }
+    const width = e.detail.width;
+    const len = get(this, 'columns.length');
+    switch (true) {
+      case width > 1013:
+        if (len != 4) {
+          set(this, 'columns', [25, 25, 25, 25]);
+        }
+        break;
+      case width > 744:
+        if (len != 3) {
+          set(this, 'columns', [33, 33, 34]);
+        }
+        break;
+      case width > 487:
+        if (len != 2) {
+          set(this, 'columns', [50, 50]);
+        }
+        break;
+      case width < 488:
+        if (len != 1) {
+          set(this, 'columns', [100]);
+        }
+    }
+    if (len !== get(this, 'columns.length')) {
+      this._cellLayout = this['cell-layout'] = new PercentageColumns(
+        get(this, 'items.length'),
+        get(this, 'columns'),
+        get(this, 'cellHeight')
+      );
+    }
   },
 });

ui-v2/app/controllers/dc/services/show.js

@@ -7,7 +7,6 @@ import WithHealthFiltering from 'consul-ui/mixins/with-health-filtering';
 export default Controller.extend(WithHealthFiltering, {
   init: function() {
     this._super(...arguments);
-    this.columns = [25, 25, 25, 25];
   },
   unhealthy: computed('filtered', function() {
     return get(this, 'filtered').filter(function(item) {

ui-v2/app/styles/components/list-collection.scss

@@ -13,15 +13,27 @@
 .unhealthy > div {
   margin-bottom: 20px;
 }
-%card-grid > ul,
-%card-grid > ol {
-  list-style-type: none;
-  display: grid;
-  grid-gap: 20px 2%;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  grid-auto-rows: 12px;
-}
 .healthy > div > ul > li {
   padding-right: 23px;
   padding-bottom: 20px;
 }
+%card-grid > ul,
+%card-grid > ol {
+  list-style-type: none;
+  display: grid;
+  grid-auto-rows: 12px;
+}
+@media #{$--fixed-grid} {
+  %card-grid > ul,
+  %card-grid > ol {
+    grid-gap: 20px 20px;
+    grid-template-columns: repeat(4, minmax(220px, 1fr));
+  }
+}
+@media #{$--lt-fixed-grid} {
+  %card-grid > ul,
+  %card-grid > ol {
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    grid-gap: 20px 2%;
+  }
+}

ui-v2/app/styles/variables/custom-query.scss

@@ -34,3 +34,6 @@ $--lt-wide-form: '(max-width: 420px)';
 
 $--wide-table: '(min-width: 421px)';
 $--lt-wide-table: '(max-width: 420px)';
+
+$--fixed-grid: '(min-width: 1260px)';
+$--lt-fixed-grid: '(max-width: 1259px)';

ui-v2/app/templates/components/healthchecked-resource.hbs

@@ -1,5 +1,5 @@
     <header class={{if service 'with-service' }}>
-        <strong>{{address}}</strong>
+      <strong>{{address}}</strong>
         <a href={{href}}>
             <span>{{name}}</span>
             <em>{{service}}</em>

ui-v2/app/templates/dc/nodes/index.hbs

@@ -34,10 +34,7 @@
 {{#if (gt healthy.length 0) }}
         <div class="healthy">
             <h2>Healthy Nodes</h2>
-            {{#list-collection
-                items=healthy
-                cell-layout=(percentage-columns-layout healthy.length columns 92) as |item index|
-            }}
+            {{#list-collection cellHeight=92 items=healthy as |item index|}}
                 {{healthchecked-resource
                     data-test-node=item.Node
                     href=(href-to 'dc.nodes.show' item.Node)

ui-v2/app/templates/dc/services/show.hbs

@@ -49,10 +49,7 @@
 {{#if (gt healthy.length 0) }}
         <div data-test-healthy class="healthy">
             <h2>Healthy Nodes</h2>
-            {{#list-collection
-                items=healthy
-                cell-layout=(percentage-columns-layout healthy.length columns 113) as |item index|
-            }}
+            {{#list-collection cellHeight=113 items=healthy as |item index|}}
                 {{healthchecked-resource
                     href=(href-to 'dc.nodes.show' item.Node.Node)
                     data-test-node=item.Node.Node