status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Auto calculate the height of the tables depending on the space left 

Additionally make the footer lookup more unique seeing as we are in js
here
This commit is contained in:
John Cowen 2018-05-24 15:41:11 +01:00
parent 8f76a54c6a
commit 6489f1c401
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui-v2/app/components/tabular-collection.js
View File

@ -62,7 +62,7 @@ export default Component.extend(SlotsMixin, {
this._super(...arguments);
this.change = change.bind(this);
this.confirming = [];
// TODO: This should auto calculate properly from the CSS
// TODO: The row height should auto calculate properly from the CSS
this['cell-layout'] = new ZIndexedGrid(get(this, 'width'), 50);
this.handler = () => {
this.resize(createSizeEvent());
@ -86,12 +86,15 @@ export default Component.extend(SlotsMixin, {
window.removeEventListener('resize', this.handler);
},
resize: function(e) {
const $footer = [...$$('#wrapper > footer')][0];
const $thead = [...$$('main > div')][0];
if ($thead) {
// TODO: This should auto calculate properly from the CSS
this.set('height', Math.max(0, new Number(e.detail.height - ($footer.clientHeight + 218))));
this['cell-layout'] = new ZIndexedGrid($thead.clientWidth, 50);
const $tbody = this.$('tbody').get(0);
if ($tbody) {
const rect = $tbody.getBoundingClientRect();
const $footer = [...$$('footer[role="contentinfo"]')][0];
const space = rect.top + $footer.clientHeight;
const height = new Number(e.detail.height - space);
this.set('height', Math.max(0, height));
// TODO: The row height should auto calculate properly from the CSS
this['cell-layout'] = new ZIndexedGrid($tbody.clientWidth, 50);
this.updateItems();
this.updateScrollPosition();
}

2
ui-v2/app/templates/components/hashicorp-consul.hbs
View File

@ -51,7 +51,7 @@
<main>
{{yield}}
</main>
<footer data-test-footer>
<footer role="contentinfo" data-test-footer>
<a data-test-footer-copyright href="{{env 'CONSUL_COPYRIGHT_URL'}}/" rel="noopener noreferrer" target="_blank">&copy; {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp</a>
<p data-test-footer-version>Consul {{env 'CONSUL_VERSION'}}</p>
<a data-test-footer-docs href="{{env 'CONSUL_DOCUMENTATION_URL'}}/index.html" rel="help noopener noreferrer" target="_blank">Documentation</a>