A different take on designing a Lovelace UI

lucibuz · August 17, 2020, 8:26pm

Thanks for your help.
I copied the theme from your config and remove popups style and now the browser_mod popups are looking ok.
I have an issue with the regular more info popups, they have a transparent background when I use this theme.
Can you advice where to look into fix it.

Mattias_Persson · August 19, 2020, 2:21am

Didn’t think of that, this commit should fix it

If you have a popup with multiple cards and don’t want a background

lucibuz · August 19, 2020, 4:18am

That did the trick and you are right just when are multiple screens in popup the background needs to be transparent (none).
Thanks again for your help.

DekiEE · August 20, 2020, 7:50pm

I am running into style issues and have no clue how to fix them. Can anybody give me a hint? The popup is really messed up

enong · August 21, 2020, 2:02am

me too

gabrielmiranda · August 21, 2020, 10:09am

Hello buddy! Great job!

I’m trying to play a sound when I click a button but I haven’t found much information. Could you show me the way?

spudje · August 24, 2020, 7:35pm

I’m in the final tweaking phase
Just wondering, what are these “prefix” header cards about? Can’t find any reference about them. And can I add an icon to it?

Thanks!

Mattias_Persson · August 26, 2020, 11:47am

@DekiEE You’ll have to provide more info

@gabrielmiranda Search ui-lovelace.yaml or automation.yaml for ui_sound

@spudje a-different-take-on-designing-a-lovelace-ui/162594/224

Stimo · August 26, 2020, 7:16pm

I can’t get the Popup backdrop filter to work anymore. I can’t find that they changed anything, anyone got it to work in full kiosk browser?

Mattias_Persson · August 26, 2020, 7:54pm

Stimo · August 26, 2020, 8:19pm

Thanks, @Mattias_Persson, I will take a look at card-mod then

DekiEE · August 26, 2020, 8:54pm

The popup is squeezed to the center of the screen as you see in the Screenshot. I don’t know what configuration to change. I tried to change the width but it seems like any change to the style block has any effect on the popup.

Mattias_Persson · August 27, 2020, 12:08am

github.com

matt8707/hass-config/blob/790e39657c6809684c598e23294431d3920af8bb/popup/sidebar_information.yaml#L7


action: call-service
service: browser_mod.popup
service_data:
  title: Information
  hide_header: true
  deviceID: this
  style:
    .: |
      :host .content {
        width: calc(385px + 385px + 385px);
        max-width: 90vw;
      }
    $: |
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
      }
  card:

DekiEE · August 27, 2020, 11:12am

I have changed the block already but it doesn’t matter what numbers I use, nothing seems to change.

Mattias_Persson · August 27, 2020, 1:18pm

Do you have the latest hass, browser_mod and card-mod…

DekiEE · August 28, 2020, 6:53am

Hass is still running 112.4, the others are up to date.

Mattias_Persson · August 28, 2020, 7:07am

That’s probably why

lukas121 · August 28, 2020, 10:26am

@Mattias_Persson well done. I get inspiration for my desktop. I have a question, I would like to have info and update icons in the sidebar in different colors. How can I get this effect?

tomerbs · August 28, 2020, 1:42pm

Hi fastender,
Your work looks pretty great specially your light popup,
Can you please share your code for the light popup,
I’m interested how you manage to add the icon to it.
Thanks.

fastender · August 28, 2020, 2:26pm

Gladly, here you will find everything:

At the moment I’m trying to invest my time more in automations with NodeRed in order to operate the house without a cell phone or switch with the help of automatic questions via Alexa.