thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.08k stars 127 forks source link

MediaQuery on other view_layout options. #260

Open jack3308 opened 1 year ago

jack3308 commented 1 year ago

Hi gents, really love all the work on these tools, thanks for the time and effort. My suggestion is basically the title. Currently you're able to use the media query option to hide/show a card depending on the result, like in this example:

- type: markdown
  content: |
    This is only shown on screens more than 800 px wide
  view_layout:
    show:
      mediaquery: "(min-width: 800px)"

I'm hoping to be able to do the same with the other view_layout options as well (or maybe this is already possible and I just couldn't figure it out??) This is what I imagine the configuration looking like:

- type: markdown
  content: |
    This is in row 1 on screens more than 800 px wide
  view_layout:
    grid-row: 1
      mediaquery: "(max-width: 800px)"
- type: markdown
  content: |
    This is row 3 on screens more than 800 px wide
  view_layout:
    grid-row: 3 
      mediaquery: "(min-width: 800px)"

or even better would be

- type: markdown
  content: |
    This is shown in row 1 on screens less than 800px and in row 3 on screens more than 800 px wide
  view_layout:
    grid-row: 1
      mediaquery: "(max-width: 800px)"
    grid-row: 3 
      mediaquery: "(min-width: 800px)"

I know that areas can achieve something similar but I'm hoping to utilize a bit of the auto layout utility with some grid-auto-rows/columns without specifying each individual row in the layout config itself (either in dashboard or card).

If this is achievable in another way then happy to do that, just haven't had any luck figuring it out after several days searching for a solution.