From c169c5f11a0c058b19b167e73330c1ab30d405c0 Mon Sep 17 00:00:00 2001 From: Dale Higgs Date: Mon, 23 Jul 2018 17:46:26 -0500 Subject: [PATCH 1/3] Add Lovelace Tips and Tricks page --- source/lovelace/tips.markdown | 61 +++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 source/lovelace/tips.markdown diff --git a/source/lovelace/tips.markdown b/source/lovelace/tips.markdown new file mode 100644 index 00000000000..50c7ae964e0 --- /dev/null +++ b/source/lovelace/tips.markdown @@ -0,0 +1,61 @@ +--- +layout: page +title: "Lovelace Tips and Tricks" +description: "Helpful tips and tricks for using the Lovelace UI in Home Assistant." +date: 2018-07-23 21:57 +00:00 +sidebar: true +comments: false +sharing: true +footer: true +--- + +The Lovelace UI is a very powerful UI. Here are a few tips and tricks that +might help you when working with Lovelace. + +*Have a tip or trick of your own? Click the "Edit this page on GitHub" at the +top of this page to share it with everyone!* + +## {% linkable_title Tools %} + +We have some amazing users that have created various tools to help you get +started with Lovelace. + +### {% linkable_title Lovelace Migration Script %} + +The [Lovelace Migration Script][migration-script] by [@dale3h] converts your +current "old UI" configuration to the new Lovelace format. The idea behind +this tool is to help give you something to start playing with right away. + +### {% linkable_title Lovelace Config Generator %} + +The [Lovelace Config Generator][config-generator] by [@thomasloven] provides +you with the ability to split your Lovelace configuration into multiple files. + +*Note: Split configuration is currently possible directly in Lovelace, but it +is expected to be removed in the near future due to fact that Home Assistant +will be writing directly to the `ui-lovelace.yaml` file.* + +## {% linkable_title Tips and Tricks %} + +### {% linkable_title Header Using Panel and Stacks %} + +You can create a header by using `panel: true` with nested +[Vertical Stack][vertical-stack] and [Horizontal Stack][horizontal-stack] +cards. See the code [here][header-stacks]. ([@dale3h]) + +### {% linkable_title Disable Click on Elements %} + +If you do not want an element to be clickable you can add `pointer-events: none` +to the element's `style:` configuration. This is quite useful when building a +[Picture Elements][picture-elements] card that will be viewed mostly in a +mobile browser. (@Toast) + +[@dale3h]: https://github.com/dale3h +[@thomasloven]: https://github.com/thomasloven + +[config-generator]: https://github.com/thomasloven/homeassistant-lovelace-gen +[header-stacks]: https://gist.github.com/dale3h/37b34aebb0c336ffd5fb877c2651097a +[horizontal-stack]: /lovelace/horizontal-stack/ +[migration-script]: https://github.com/dale3h/python-lovelace +[picture-elements]: /lovelace/picture-elements/ +[vertical-stack]: /lovelace/vertical-stack/ From 01cad0b9064a1075040d5e2ac11c346f677f946e Mon Sep 17 00:00:00 2001 From: Dale Higgs Date: Mon, 23 Jul 2018 21:00:02 -0500 Subject: [PATCH 2/3] Update Lovelace navigation --- source/_includes/asides/lovelace_navigation.html | 1 + 1 file changed, 1 insertion(+) diff --git a/source/_includes/asides/lovelace_navigation.html b/source/_includes/asides/lovelace_navigation.html index d78a68ce5b4..589f838ee21 100644 --- a/source/_includes/asides/lovelace_navigation.html +++ b/source/_includes/asides/lovelace_navigation.html @@ -8,6 +8,7 @@
  • {% active_link /lovelace/ Introduction %}
  • {% active_link /lovelace/changelog/ Changelog %}
  • {% active_link /lovelace/views/ Views %}
    • +
  • {% active_link /lovelace/tips/ Tips and Tricks %}
    • From c378d664cc9252cb4c65bbc5af6f282bc58a1863 Mon Sep 17 00:00:00 2001 From: Dale Higgs Date: Mon, 23 Jul 2018 21:10:45 -0500 Subject: [PATCH 3/3] Update note syntax --- source/lovelace/tips.markdown | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/source/lovelace/tips.markdown b/source/lovelace/tips.markdown index 50c7ae964e0..32ea7b697f4 100644 --- a/source/lovelace/tips.markdown +++ b/source/lovelace/tips.markdown @@ -31,9 +31,11 @@ this tool is to help give you something to start playing with right away. The [Lovelace Config Generator][config-generator] by [@thomasloven] provides you with the ability to split your Lovelace configuration into multiple files. -*Note: Split configuration is currently possible directly in Lovelace, but it -is expected to be removed in the near future due to fact that Home Assistant -will be writing directly to the `ui-lovelace.yaml` file.* +

    + Split configuration is currently possible directly in Lovelace, but it + is expected to be removed in the near future due to fact that Home Assistant + will be writing directly to the `ui-lovelace.yaml` file. +

    ## {% linkable_title Tips and Tricks %}