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

Change some layout options. Mainly max_width and column_width. Read the readme

Browse Source
This commit is contained in:
Thomas Lovén 2019-03-08 10:57:43 +01:00
parent 70a1986b64
commit 5ef29f02f9
2 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -159,10 +159,10 @@ panel: true
cards: cards:
- type: custom:layout-card - type: custom:layout-card
layout: <layout> layout: <layout>
column_num: <column count> column_num: <column num>
max_columns: <max column count> max_columns: <max columns>
column_width: <column width> column_width: <column width>
max_width: <max column width> max_width: <max width>
min_height: <min height> min_height: <min height>
ltr: <ltr> ltr: <ltr>
cards: cards:
@ -174,12 +174,12 @@ Optional. Default: `auto`
Either `auto`, `vertical` or `horizontal`. Either `auto`, `vertical` or `horizontal`.
### `<column count>` ### `<column num>`
Optional. Default: 1 Optional. Default: 1
The minimum number of columns to make. Note that if a column has no cards, it will be removed regardless. The minimum number of columns to make. Note that if a column has no cards, it will be removed regardless.
### `<max column count>` ### `<max columns>`
Optional. Default: 100 Optional. Default: 100
The maximum number of columns to make. The maximum number of columns to make.
@ -189,9 +189,14 @@ Optional. Default: 300
The minimum width of a column in pixels. The minimum width of a column in pixels.
`<column width>` can also be an array of values ending with `%` or `px`. In that case the values will specify the width of each column and `<column count>` will be overridden with the number of entries in the array.
Ex: `column_width: [70%, 300px, 30%]` will result in three columns, where the center one is 300 pixels wide, and the left and right divide the remaining space in a 70/30 ratio. ### `<max width>`
Optional. Default: 500
The maximum width of a column in pixels.
`<max width>` can also be an array of values ending with `%` or `px`. In that case the values will specify the width of each column. This works best when combined with `<column count>` and `<max columns>`.
Ex: `max_width: [70%, 300px, 30%]` will result in three columns, where the center one is 300 pixels wide, and the left and right divide the remaining space in a 70/30 ratio.
![varied sizes](https://user-images.githubusercontent.com/1299821/53567104-807ab200-3b5e-11e9-8a20-67190b80b70d.jpg) ![varied sizes](https://user-images.githubusercontent.com/1299821/53567104-807ab200-3b5e-11e9-8a20-67190b80b70d.jpg)
@ -199,12 +204,6 @@ This allows for some really interesting layout options when combined with stacks
![advanced layout](https://user-images.githubusercontent.com/1299821/53567164-a738e880-3b5e-11e9-93f2-d2041c512b8a.jpg) ![advanced layout](https://user-images.githubusercontent.com/1299821/53567164-a738e880-3b5e-11e9-93f2-d2041c512b8a.jpg)
### `<max column width>`
Optional. Default: 500
The maximum width of a column in pixels.
This value is ignored if `<column width>` is an array.
### `<min height>` ### `<min height>`
Optional. Default: 5 Optional. Default: 5

9
layout-card.js
View File

@ -80,10 +80,7 @@ class LayoutCard extends cardTools.LitElement {
update_columns() { update_columns() {
const width = (this.shadowRoot && this.shadowRoot.querySelector("#columns").clientWidth) || (this.parentElement && this.parentElement.clientWidth); const width = (this.shadowRoot && this.shadowRoot.querySelector("#columns").clientWidth) || (this.parentElement && this.parentElement.clientWidth);
if(typeof(this.colWidth) === 'object') this.colNum = Math.floor(width / this.colWidth);
this.colNum = this.colWidth.length;
else
this.colNum = Math.floor(width / this.colWidth);
this.colNum = Math.max(this.colNum, this.minCols); this.colNum = Math.max(this.colNum, this.minCols);
this.colNum = Math.min(this.colNum, this.maxCols); this.colNum = Math.min(this.colNum, this.maxCols);
} }
@ -154,8 +151,8 @@ class LayoutCard extends cardTools.LitElement {
div.classList.add('column'); div.classList.add('column');
c.forEach((e) => div.appendChild(e)); c.forEach((e) => div.appendChild(e));
root.appendChild(div); root.appendChild(div);
if(typeof(this.colWidth) === 'object') { if(cols.length > 1 && typeof(this.maxWidth) === 'object') {
div.style.setProperty('max-width', this.colWidth[i]); div.style.setProperty('max-width', this.maxWidth[i]);
} else { } else {
div.style.setProperty('max-width', this.maxWidth+'px'); div.style.setProperty('max-width', this.maxWidth+'px');
} }