From 5ef29f02f9de91338e915ae463ba342db781de19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 8 Mar 2019 10:57:43 +0100
Subject: [PATCH] Change some layout options. Mainly max_width and
 column_width. Read the readme

---
 README.md      | 25 ++++++++++++-------------
 layout-card.js |  9 +++------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 5b81c30..84998e8 100644
--- a/README.md
+++ b/README.md
@@ -159,10 +159,10 @@ panel: true
 cards:
   - type: custom:layout-card
     layout: <layout>
-    column_num: <column count>
-    max_columns: <max column count>
+    column_num: <column num>
+    max_columns: <max columns>
     column_width: <column width>
-    max_width: <max column width>
+    max_width: <max width>
     min_height: <min height>
     ltr: <ltr>
     cards:
@@ -174,12 +174,12 @@ Optional. Default: `auto`
 
 Either `auto`, `vertical` or `horizontal`.
 
-### `<column count>`
+### `<column num>`
 Optional. Default: 1
 
 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
 
 The maximum number of columns to make.
@@ -189,9 +189,14 @@ Optional. Default: 300
 
 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)
 
@@ -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)
 
-### `<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>`
 Optional. Default: 5
 
diff --git a/layout-card.js b/layout-card.js
index 29fd527..88fe0dd 100644
--- a/layout-card.js
+++ b/layout-card.js
@@ -80,10 +80,7 @@ class LayoutCard extends cardTools.LitElement {
 
   update_columns() {
     const width = (this.shadowRoot && this.shadowRoot.querySelector("#columns").clientWidth) || (this.parentElement && this.parentElement.clientWidth);
-    if(typeof(this.colWidth) === 'object')
-      this.colNum = this.colWidth.length;
-    else
-      this.colNum = Math.floor(width / this.colWidth);
+    this.colNum = Math.floor(width / this.colWidth);
     this.colNum = Math.max(this.colNum, this.minCols);
     this.colNum = Math.min(this.colNum, this.maxCols);
   }
@@ -154,8 +151,8 @@ class LayoutCard extends cardTools.LitElement {
       div.classList.add('column');
       c.forEach((e) => div.appendChild(e));
       root.appendChild(div);
-      if(typeof(this.colWidth) === 'object') {
-        div.style.setProperty('max-width', this.colWidth[i]);
+      if(cols.length > 1 && typeof(this.maxWidth) === 'object') {
+        div.style.setProperty('max-width', this.maxWidth[i]);
       } else {
         div.style.setProperty('max-width', this.maxWidth+'px');
       }