From e8f0ac879626143d099804aec65075df3dee9080 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Tue, 30 Jun 2020 10:01:33 +0200 Subject: [PATCH] Better behavior on narrow displays. Added sidebar_column --- README.md | 5 ++++- layout-card.js | 18 +++++++++++++++++- package.json | 2 +- src/layout.js | 5 ++++- src/main.js | 22 +++++++++++++++++++++- test/lovelace.yaml | 1 + 6 files changed, 48 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e8f4c13..95a914a 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ column_num: column_width: max_width: min_width: +sidebar_column: flex_grow: gridcols: gridrows: @@ -50,6 +51,7 @@ card_options: - `` Shorthand to set both `min_columns>` and ``to the same value. Try this first. - `` Width of columns. Default: `300px`. - ``, ``, `` Set the `max-width`, `min-width` and `flex-grow` CSS properties of the columns manually. Default: `column_width or 500px`, `undefined`, `undefined`. +- `` is used to mimic the default behavior of lovelace. See below. - ``, ``, ``, `` Set the `grid-template-rows`, `grid-template-columns`, `grid-gap` and `place-items` CSS properties when using `layout: grid`. - `` Set the `justify-content` CSS property of the column container. Default: `center`. @@ -74,6 +76,7 @@ The auto layout works in the same way as the default lovelace layout. It follows a simple process. - A number of columns are prepared based on the screen width and ``. +- If the sidebar is opened, the number of columns is decreased by 1. (**This is not done by layout-card unless `` is true.**) - The number of columns is clamped between `` and `` - Cards have a `cardHeight`, which is calculated from their content. One unit is roughly 50 pixels tall. - Each new card is added to the first row which is less than `` units tall. @@ -121,7 +124,7 @@ cards: ``` ![layout-card 1 - auto](https://user-images.githubusercontent.com/1299821/48088464-62312500-e202-11e8-8ccc-0ef6ac10ec2e.png) -> Note: To get *exactly* the same behavior as the default layout, you need to specify `max_columns: 4`. This was given a higher default value to work better with the ridiculously huge screens some people have nowadays. +> Note: To get *exactly* the same behavior as the default layout, you need to specify `sidebar_column: true` and `max_columns: 4`. This was given a higher default value to work better with the ridiculously huge screens some people have nowadays. > Note: The same 8 cards will be used in the following examples and will be omitted for clarity. diff --git a/layout-card.js b/layout-card.js index b1d9ff8..01736bf 100644 --- a/layout-card.js +++ b/layout-card.js @@ -1,4 +1,4 @@ -!function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=5)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.ContentRect=function(t){if("getBBox"in t){var e=t.getBBox();return Object.freeze({height:e.height,left:0,top:0,width:e.width})}var i=window.getComputedStyle(t);return Object.freeze({height:parseFloat(i.height||"0"),left:parseFloat(i.paddingLeft||"0"),top:parseFloat(i.paddingTop||"0"),width:parseFloat(i.width||"0")})}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),o=i(3),r=[],s=function(){function t(t){this.$$observationTargets=[],this.$$activeTargets=[],this.$$skippedTargets=[];var e=function(t){if(void 0===t)return"Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.";if("function"!=typeof t)return"Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."}(t);if(e)throw TypeError(e);this.$$callback=t,r.push(this)}return t.prototype.observe=function(t){var e=a("observe",t);if(e)throw TypeError(e);c(this.$$observationTargets,t)>0||(this.$$observationTargets.push(new n.ResizeObservation(t)),f())},t.prototype.unobserve=function(t){var e=a("unobserve",t);if(e)throw TypeError(e);var i=c(this.$$observationTargets,t);i<0||(this.$$observationTargets.splice(i,1),m())},t.prototype.disconnect=function(){this.$$observationTargets=[],this.$$activeTargets=[]},t}();function a(t,e){return void 0===e?"Failed to execute '"+t+"' on 'ResizeObserver': 1 argument required, but only 0 present.":e instanceof window.Element?void 0:"Failed to execute '"+t+"' on 'ResizeObserver': parameter 1 is not of type 'Element'."}function c(t,e){for(var i=0;it?e.$$activeTargets.push(i):e.$$skippedTargets.push(i))}))}))},u=function(){var t=1/0;return r.forEach((function(e){if(e.$$activeTargets.length){var i=[];e.$$activeTargets.forEach((function(e){var n=new o.ResizeObserverEntry(e.target);i.push(n),e.$$broadcastWidth=n.contentRect.width,e.$$broadcastHeight=n.contentRect.height;var r=h(e.target);r{c&&t();const i=async()=>{c=await window.loadCardHelpers(),window.cardHelpers=c,t()};window.loadCardHelpers?i():window.addEventListener("load",async()=>{!function(){if(customElements.get("hui-view"))return!0;const t=document.createElement("partial-panel-resolver");if(t.hass=s(),!t.hass||!t.hass.panels)return!1;t.route={path:"/lovelace/"},t._updateRoutes();try{document.querySelector("home-assistant").appendChild(t)}catch(t){}finally{document.querySelector("home-assistant").removeChild(t)}customElements.get("hui-view")}(),window.loadCardHelpers&&i()})});function d(t,e){const i={type:"error",error:t,origConfig:e},n=document.createElement("hui-error-card");return customElements.whenDefined("hui-error-card").then(()=>{const t=document.createElement("hui-error-card");t.setConfig(i),n.parentElement&&n.parentElement.replaceChild(t,n)}),l.then(()=>{a("ll-rebuild",{},n)}),n}function u(t,e){if(!e||"object"!=typeof e||!e.type)return d(`No ${t} type configured`,e);let i=e.type;if(i=i.startsWith("custom:")?i.substr("custom:".length):`hui-${i}-${t}`,customElements.get(i))return function(t,e){let i=document.createElement(t);try{i.setConfig(JSON.parse(JSON.stringify(e)))}catch(t){i=d(t,e)}return l.then(()=>{a("ll-rebuild",{},i)}),i}(i,e);const n=d(`Custom element doesn't exist: ${i}.`,e);n.style.display="None";const o=setTimeout(()=>{n.style.display=""},2e3);return customElements.whenDefined(i).then(()=>{clearTimeout(o),a("ll-rebuild",{},n)}),n}const h=t=>"function"==typeof t.getCardSize?t.getCardSize():customElements.get(t.localName)?1:customElements.whenDefined(t.localName).then(()=>h(t)),p=async(t,e,i)=>{const n=t=>"string"==typeof t&&t.endsWith("%")?Math.floor(e*parseInt(t)/100):parseInt(t);let o=0;if("object"==typeof i.column_width){let t=e;for(;t>0;){let e=i.column_width[o];void 0===e&&(e=i.column_width.slice(-1)[0]),t-=n(e),o+=1}o=Math.max(o-1,1)}else o=Math.floor(e/n(i.column_width));o=Math.max(o,i.min_columns),o=Math.min(o,i.max_columns),"auto"===i.layout&&"docked"===s().dockedSidebar&&(o-=1),o=Math.max(o,1);let r=[];for(let t=0;t{let n=0;for(const i of t){if(n+=1,!i)continue;const t=e[(n-1)%e.length];t.appendChild(i),t.length+=await h(i)}})(t,r);break;case"vertical":await(async(t,e,i)=>{let n=0;for(const i of t){if(!i){n+=1;continue}const t=e[n%e.length];t.appendChild(i),t.length+=await h(i)}})(t,r);break;case"auto":default:await(async(t,e,i)=>{function n(){let t=0;for(let n=0;nt.childElementCount>0),r};var f=i(1);class g extends n{static get properties(){return{hass:{},_config:{}}}async setConfig(t){this._config={layout:"auto",min_height:5,column_width:300,max_width:t.column_width||"500px",min_columns:t.column_num||1,max_columns:t.column_num||100,...t},this.cards=[],this.columns=[],this._layoutWidth=0}connectedCallback(){super.connectedCallback();let t=this.parentElement,e=10;for(;e--&&t;){if("HUI-PANEL-VIEW"===t.tagName)this.classList.add("panel");else if("HUI-VERTICAL-STACK-CARD"===t.tagName)this.classList.add("stacked");else if("DIV"!==t.tagName&&"root"!==t.id)break;t=t.parentElement?t.parentElement:t.getRootNode().host}}async firstUpdated(){window.addEventListener("location-changed",()=>{""===location.hash&&setTimeout(()=>this.updateSize(),100)}),this.resizer||(this.resizer=new f.ResizeObserver(()=>{this.updateSize()}),this.resizer.observe(this)),this.updateSize()}async updateSize(){let t=this.getBoundingClientRect().width;this.classList.contains("panel")&&(this.hass&&"docked"===this.hass.dockedSidebar?t+=256:t+=64),t&&Math.abs(t-this._layoutWidth)>50&&(this._layoutWidth=t,this.resizer.disconnect(),await this.place_cards(),this.requestUpdate().then(()=>this.resizer.observe(this)))}async updated(t){if(!this.cards.length&&(this._config.entities&&this._config.entities.length||this._config.cards&&this._config.cards.length)){this.clientWidth;this.cards=await this.build_cards(),await this.place_cards(),this.requestUpdate()}if(t.has("hass")&&this.hass&&this.cards)for(const t of this.cards)t&&(t.hass=this.hass)}async build_card(t){if("break"===t){if("grid"===this._config.layout){const t=document.createElement("div");return this.shadowRoot.querySelector("#staging").appendChild(t),t}return null}const e={...t,...this._config.card_options},i=function(t){return c?c.createCardElement(t):u("card",t)}(e);return i.hass=s(),"grid"===this._config.layout&&(i.style.gridColumn=e.gridcol||"auto",i.style.gridRow=e.gridrow||"auto"),this.shadowRoot.querySelector("#staging").appendChild(i),new Promise((t,e)=>i.updateComplete?i.updateComplete.then(()=>t(i)):t(i))}async build_cards(){const t=this.shadowRoot.querySelector("#staging");for(;t.lastChild;)t.removeChild(t.lastChild);return Promise.all((this._config.entities||this._config.cards).map(t=>this.build_card(t)))}async place_cards(){"grid"!==this._config.layout&&this.cards.length&&(this.columns=await p(this.cards,this._layoutWidth||1,this._config),this._config.rtl&&this.columns.reverse(),this.format_columns())}format_columns(){const t=(t,e,i,n="px")=>{if(void 0===this._config[e])return"";let o=t+": ";const r=this._config[e];return"object"==typeof r?r.length>i?o+=""+r[i]:o+=""+r.slice(-1):o+=""+r,o.endsWith("px")||o.endsWith("%")||(o+=n),o+";"};for(const[e,i]of this.columns.entries()){const n=[t("max-width","max_width",e),t("min-width","min_width",e),t("width","column_width",e),t("flex-grow","flex_grow",e,"")];i.style.cssText="".concat(...n)}}getCardSize(){return this.columns&&this.columns.length?Math.max.apply(Math,this.columns.map(t=>t.length)):this._config.entities?2*this._config.entities.length:this._config.cards?2*this._config.cards.length:1}render(){return"grid"===this._config.layout?o` +!function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=5)}([function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.ContentRect=function(t){if("getBBox"in t){var e=t.getBBox();return Object.freeze({height:e.height,left:0,top:0,width:e.width})}var i=window.getComputedStyle(t);return Object.freeze({height:parseFloat(i.height||"0"),left:parseFloat(i.paddingLeft||"0"),top:parseFloat(i.paddingTop||"0"),width:parseFloat(i.width||"0")})}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2),o=i(3),r=[],s=function(){function t(t){this.$$observationTargets=[],this.$$activeTargets=[],this.$$skippedTargets=[];var e=function(t){if(void 0===t)return"Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.";if("function"!=typeof t)return"Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."}(t);if(e)throw TypeError(e);this.$$callback=t,r.push(this)}return t.prototype.observe=function(t){var e=a("observe",t);if(e)throw TypeError(e);c(this.$$observationTargets,t)>0||(this.$$observationTargets.push(new n.ResizeObservation(t)),f())},t.prototype.unobserve=function(t){var e=a("unobserve",t);if(e)throw TypeError(e);var i=c(this.$$observationTargets,t);i<0||(this.$$observationTargets.splice(i,1),m())},t.prototype.disconnect=function(){this.$$observationTargets=[],this.$$activeTargets=[]},t}();function a(t,e){return void 0===e?"Failed to execute '"+t+"' on 'ResizeObserver': 1 argument required, but only 0 present.":e instanceof window.Element?void 0:"Failed to execute '"+t+"' on 'ResizeObserver': parameter 1 is not of type 'Element'."}function c(t,e){for(var i=0;it?e.$$activeTargets.push(i):e.$$skippedTargets.push(i))}))}))},u=function(){var t=1/0;return r.forEach((function(e){if(e.$$activeTargets.length){var i=[];e.$$activeTargets.forEach((function(e){var n=new o.ResizeObserverEntry(e.target);i.push(n),e.$$broadcastWidth=n.contentRect.width,e.$$broadcastHeight=n.contentRect.height;var r=h(e.target);r{c&&t();const i=async()=>{c=await window.loadCardHelpers(),window.cardHelpers=c,t()};window.loadCardHelpers?i():window.addEventListener("load",async()=>{!function(){if(customElements.get("hui-view"))return!0;const t=document.createElement("partial-panel-resolver");if(t.hass=s(),!t.hass||!t.hass.panels)return!1;t.route={path:"/lovelace/"},t._updateRoutes();try{document.querySelector("home-assistant").appendChild(t)}catch(t){}finally{document.querySelector("home-assistant").removeChild(t)}customElements.get("hui-view")}(),window.loadCardHelpers&&i()})});function d(t,e){const i={type:"error",error:t,origConfig:e},n=document.createElement("hui-error-card");return customElements.whenDefined("hui-error-card").then(()=>{const t=document.createElement("hui-error-card");t.setConfig(i),n.parentElement&&n.parentElement.replaceChild(t,n)}),l.then(()=>{a("ll-rebuild",{},n)}),n}function u(t,e){if(!e||"object"!=typeof e||!e.type)return d(`No ${t} type configured`,e);let i=e.type;if(i=i.startsWith("custom:")?i.substr("custom:".length):`hui-${i}-${t}`,customElements.get(i))return function(t,e){let i=document.createElement(t);try{i.setConfig(JSON.parse(JSON.stringify(e)))}catch(t){i=d(t,e)}return l.then(()=>{a("ll-rebuild",{},i)}),i}(i,e);const n=d(`Custom element doesn't exist: ${i}.`,e);n.style.display="None";const o=setTimeout(()=>{n.style.display=""},2e3);return customElements.whenDefined(i).then(()=>{clearTimeout(o),a("ll-rebuild",{},n)}),n}const h=t=>"function"==typeof t.getCardSize?t.getCardSize():customElements.get(t.localName)?1:customElements.whenDefined(t.localName).then(()=>h(t)),p=async(t,e,i)=>{const n=t=>"string"==typeof t&&t.endsWith("%")?Math.floor(e*parseInt(t)/100):parseInt(t);let o=0;if("object"==typeof i.column_width){let t=e;for(;t>0;){let e=i.column_width[o];void 0===e&&(e=i.column_width.slice(-1)[0]),t-=n(e),o+=1}o=Math.max(o-1,1)}else o=Math.floor(e/n(i.column_width));o=Math.max(o,i.min_columns),o=Math.min(o,i.max_columns),"auto"===i.layout&&"docked"===s().dockedSidebar&&!window.matchMedia("(max-width: 870px)").matches&&i.sidebar_column&&(o-=1),o=Math.max(o,1);let r=[];for(let t=0;t{let n=0;for(const i of t){if(n+=1,!i)continue;const t=e[(n-1)%e.length];t.appendChild(i),t.length+=await h(i)}})(t,r);break;case"vertical":await(async(t,e,i)=>{let n=0;for(const i of t){if(!i){n+=1;continue}const t=e[n%e.length];t.appendChild(i),t.length+=await h(i)}})(t,r);break;case"auto":default:await(async(t,e,i)=>{function n(){let t=0;for(let n=0;nt.childElementCount>0),r};var f=i(1);class g extends n{static get properties(){return{hass:{},_config:{}}}async setConfig(t){this._config={layout:"auto",min_height:5,column_width:300,max_width:t.column_width||"500px",min_columns:t.column_num||1,max_columns:t.column_num||100,sidebar_column:!1,...t},this.cards=[],this.columns=[],this._layoutWidth=0}connectedCallback(){super.connectedCallback();let t=this.parentElement,e=10;for(;e--&&t;){if("HUI-PANEL-VIEW"===t.tagName)this.classList.add("panel");else if("HUI-VERTICAL-STACK-CARD"===t.tagName)this.classList.add("stacked");else if("DIV"!==t.tagName&&"root"!==t.id)break;t=t.parentElement?t.parentElement:t.getRootNode().host}}async firstUpdated(){window.addEventListener("location-changed",()=>{""===location.hash&&setTimeout(()=>this.updateSize(),100)}),this.resizer||(this.resizer=new f.ResizeObserver(()=>{this.updateSize()}),this.resizer.observe(this)),this.updateSize()}async updateSize(){let t=this.getBoundingClientRect().width;this.classList.contains("panel")&&!window.matchMedia("(max-width: 870px)").matches&&this._config.sidebar_column&&(this.hass&&"docked"===this.hass.dockedSidebar?t+=256:t+=64),t&&Math.abs(t-this._layoutWidth)>50&&(this._layoutWidth=t,this.resizer.disconnect(),await this.place_cards(),this.requestUpdate().then(()=>this.resizer.observe(this)))}async updated(t){if(!this.cards.length&&(this._config.entities&&this._config.entities.length||this._config.cards&&this._config.cards.length)){this.clientWidth;this.cards=await this.build_cards(),await this.place_cards(),this.requestUpdate()}if(t.has("hass")&&this.hass&&this.cards)for(const t of this.cards)t&&(t.hass=this.hass)}async build_card(t){if("break"===t){if("grid"===this._config.layout){const t=document.createElement("div");return this.shadowRoot.querySelector("#staging").appendChild(t),t}return null}const e={...t,...this._config.card_options},i=function(t){return c?c.createCardElement(t):u("card",t)}(e);return i.hass=s(),"grid"===this._config.layout&&(i.style.gridColumn=e.gridcol||"auto",i.style.gridRow=e.gridrow||"auto"),this.shadowRoot.querySelector("#staging").appendChild(i),new Promise((t,e)=>i.updateComplete?i.updateComplete.then(()=>t(i)):t(i))}async build_cards(){const t=this.shadowRoot.querySelector("#staging");for(;t.lastChild;)t.removeChild(t.lastChild);return Promise.all((this._config.entities||this._config.cards).map(t=>this.build_card(t)))}async place_cards(){"grid"!==this._config.layout&&this.cards.length&&(this.columns=await p(this.cards,this._layoutWidth||1,this._config),this._config.rtl&&this.columns.reverse(),this.format_columns())}format_columns(){const t=(t,e,i,n="px")=>{if(void 0===this._config[e])return"";let o=t+": ";const r=this._config[e];return"object"==typeof r?r.length>i?o+=""+r[i]:o+=""+r.slice(-1):o+=""+r,o.endsWith("px")||o.endsWith("%")||(o+=n),o+";"};for(const[e,i]of this.columns.entries()){const n=[t("max-width","max_width",e),t("min-width","min_width",e),t("width","column_width",e),t("flex-grow","flex_grow",e,"")];i.style.cssText="".concat(...n)}}getCardSize(){return this.columns&&this.columns.length?Math.max.apply(Math,this.columns.map(t=>t.length)):this._config.entities?2*this._config.entities.length:this._config.cards?2*this._config.cards.length:1}render(){return"grid"===this._config.layout?o`
{ } colnum = Math.max(colnum, config.min_columns); colnum = Math.min(colnum, config.max_columns); - if(config.layout === "auto" && hass().dockedSidebar === "docked") + if(config.layout === "auto" + && hass().dockedSidebar === "docked" + && (!window.matchMedia("(max-width: 870px)").matches) + && config.sidebar_column) colnum -= 1; colnum = Math.max(colnum,1); diff --git a/src/main.js b/src/main.js index a385327..6ac2f67 100644 --- a/src/main.js +++ b/src/main.js @@ -25,6 +25,7 @@ class LayoutCard extends LitElement { min_columns: config.column_num || 1, max_columns: config.column_num || 100, + sidebar_column: false, ...config, } @@ -69,13 +70,16 @@ class LayoutCard extends LitElement { async updateSize() { let width = this.getBoundingClientRect().width; - if (this.classList.contains("panel")) { + if (this.classList.contains("panel") + && (!window.matchMedia("(max-width: 870px)").matches) + && this._config.sidebar_column) { if (this.hass && this.hass.dockedSidebar === "docked") { width += 256; } else { width += 64; } } + // narrow if max-width: 870px if(width && Math.abs(width-this._layoutWidth) > 50) { this._layoutWidth = width; this.resizer.disconnect(); @@ -243,6 +247,12 @@ class LayoutCard extends LitElement { :host(.panel.stacked:first-child) { margin-top: 8px !important; } + @media(max-width: 500px) { + :host(.panel) { + padding-left: 0px; + padding-right: 0px; + } + } #columns { display: flex; @@ -278,6 +288,16 @@ class LayoutCard extends LitElement { .cards>*:last-child { margin-bottom: 4px; } + @media(max-width: 500px) { + .cards:first-child>*, + .grid>* { + margin-left: 0px; + } + .cards:last-child>*, + .grid>* { + margin-right: 0px; + } + } #staging:not(.grid) { visibility: hidden; diff --git a/test/lovelace.yaml b/test/lovelace.yaml index abd5d5a..1ac35ad 100644 --- a/test/lovelace.yaml +++ b/test/lovelace.yaml @@ -52,6 +52,7 @@ views: - type: custom:layout-card layout: auto max_columns: 4 + sidebar_column: true cards: *cards - title: Horizontal