thomas/lovelace-layout-card
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More layout fixes. Also fix thermostat not rendering

Browse Source
This commit is contained in:
Thomas Lovén 2018-11-07 12:48:31 +01:00
parent 3acbf0896f
commit c8847a1a3f
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
layout-card.js
View File

@ -3,10 +3,6 @@ class LayoutCard extends Polymer.Element {
static get template() { static get template() {
return Polymer.html` return Polymer.html`
<style> <style>
:host {
padding: 4px 4px 0;
display: block;
}
#columns { #columns {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -18,6 +14,9 @@ class LayoutCard extends Polymer.Element {
max-width: 500px; max-width: 500px;
overflow-x: hidden; overflow-x: hidden;
} }
.column > *:first-child {
margin-top: 0;
}
.column > * { .column > * {
display: block; display: block;
margin: 4px 4px 8px; margin: 4px 4px 8px;
@ -46,13 +45,6 @@ class LayoutCard extends Polymer.Element {
this.config.column_width = this.config.column_width || 300; this.config.column_width = this.config.column_width || 300;
this.config.layout = this.config.layout || 'auto'; this.config.layout = this.config.layout || 'auto';
this._cards = config.cards.map((c) => {
if (typeof c === 'string') return c;
let el = this.makeCard(c);
if (this.hass) el.hass = this.hass;
return el;
});
window.addEventListener('resize', () => this._updateColumns()); window.addEventListener('resize', () => this._updateColumns());
window.addEventListener('hass-open-menu', () => setTimeout(() => this._updateColumns(), 10)); window.addEventListener('hass-open-menu', () => setTimeout(() => this._updateColumns(), 10));
window.addEventListener('hass-close-menu', () => setTimeout(() => this._updateColumns(), 10)); window.addEventListener('hass-close-menu', () => setTimeout(() => this._updateColumns(), 10));
@ -60,6 +52,14 @@ class LayoutCard extends Polymer.Element {
} }
_updateColumns() { _updateColumns() {
if (this.parentElement.id === "view")
{
this.style.padding = "8px 4px 0";
this.style.display = "block";
} else {
this.style.marginRight = "0";
this.style.marginLeft = "0";
}
let numcols = 0; let numcols = 0;
if (this.config.column_num) { if (this.config.column_num) {
numcols = this.config.column_num; numcols = this.config.column_num;
@ -68,7 +68,6 @@ class LayoutCard extends Polymer.Element {
numcols = Math.max(1, numcols = Math.max(1,
Math.floor(this.$.columns.clientWidth/this.config.column_width)); Math.floor(this.$.columns.clientWidth/this.config.column_width));
} }
console.log(numcols);
if(numcols != this.colnum) { if(numcols != this.colnum) {
this.colnum = numcols; this.colnum = numcols;
this._build(); this._build();
@ -79,6 +78,13 @@ class LayoutCard extends Polymer.Element {
const root = this.$.columns; const root = this.$.columns;
while(root.lastChild) root.removeChild(root.lastChild); while(root.lastChild) root.removeChild(root.lastChild);
this._cards = this.config.cards.map((c) => {
if (typeof c === 'string') return c;
let el = this.makeCard(c);
if (this._hass) el.hass = this._hass;
return el;
});
let cols = []; let cols = [];
let colLen = []; let colLen = [];
for(let i = 0; i < this.colnum; i++) { for(let i = 0; i < this.colnum; i++) {
@ -148,6 +154,8 @@ class LayoutCard extends Polymer.Element {
} }
set hass(hass) { set hass(hass) {
this._hass = hass;
if(this._cards)
this._cards.filter(c => typeof c !== 'string').forEach(c => c.hass = hass); this._cards.filter(c => typeof c !== 'string').forEach(c => c.hass = hass);
} }