ef891a23b5
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
75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
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'),
|
|
};
|
|
}),
|
|
resize: function(e) {
|
|
const $self = this.element;
|
|
const $appContent = [...$$('main > div')][0];
|
|
if ($appContent) {
|
|
const rect = $self.getBoundingClientRect();
|
|
const $footer = [...$$('footer[role="contentinfo"]')][0];
|
|
const space = rect.top + $footer.clientHeight;
|
|
const height = e.detail.height - space;
|
|
this.set('height', Math.max(0, height));
|
|
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')
|
|
);
|
|
}
|
|
},
|
|
});
|