Make it possible to configure items per row for area cards in home view

[punxaphil]

Make it possible to configure items per row for area cards in home view, as well as make it possible to have different configurations based on the width of the display.

Example yaml

strategy:
  type: custom:mushroom-strategy
  options:
    home_view:
      areas_per_row:
        narrow: 3
        wide: 5
views: []

Example for narrow view

Example for desktop view

[DigiLive]

This is exactly one of my future ideas for the project. 👍🏻

I do hope you're gonna code a little slower since I'm migrating to Typescript at the moment. 😅

[punxaphil]

😁
Should i close it? Delete it? Change it to typescript?

[DigiLive]

Let me review it first, so we can merge it later.
If you want, create a Typescript version after review to merge into the Typescript branch. 😬

[DigiLive]

Are you sure the info object has a narrow property?

Object { config: {…}, hass: {…} }
​
config: Object { strategy: {…}, views: [] }
​hass: Object { auth: {…}, connection: {…}, connected: true, … }
​```

[punxaphil]

Sure, I have tested it. As you see in the screenshots.
There are also a lot of occurrences of it in the ha frontend code: https://github.com/search?q=repo%3Ahome-assistant%2Ffrontend%20narrow&type=code

[DigiLive]

Yeah, I've seen it also at different places, but still... it's undefined at my HASS.

[DigiLive]

This might be a problem: home-assistant/frontend#18201

[punxaphil]

Ouch. Very strange decision from them IMO. Since they are still using narrow internally.
Quick browse of their code shows that this could work:

this.#narrow = window.matchMedia("(max-width: 870px)").matches;

ref: https://github.com/home-assistant/frontend/blob/589e3b63c71c6434f2375a3614827b2feedba8e8/src/layouts/home-assistant-main.ts#L53

[DigiLive]

I think that's the way to go.
You should research which of the media-queries will fit best for the "narrow" mode.
max 870px seems quite large to me.

[punxaphil]

870px suits what I have tested, and is also the definition of narrow in home assistant. I'll go with that, unless you tell me to go with something else 😄

[punxaphil]

Updated now

[DigiLive]

Since narrow is out, I'd say not to check for undefined and just define it ourselves the way you suggested.

[punxaphil]

fixed

[DigiLive]

The narrow property at my hass is undefined and therefor the strategy assumes wide.
However, my homeview always shows a narrow column, making the narrow/wide settings useless.
Did you change something to render a wider column?

[punxaphil]

The narrow property at my hass is undefined and therefor the strategy assumes wide. However, my homeview always shows a narrow column, making the narrow/wide settings useless. Did you change something to render a wider column?

It matters if you use panel mode.

[DigiLive]

It matters if you use panel mode.

Panel mode can't be set if there's more than 1 card.

This view contains more than one card, but a panel view can only show 1 card.

[punxaphil]

True
I hide everything else with the new hidden options 😄

[DigiLive]

Yeah... that's a catch. 😅
Such conditions should actually be known on beforehand.
Now this option is more or less for a specific use case.

Let me think about it if we can get the best out of two worlds.

[punxaphil]

Never thought of it that way.
Actually, if one is using a dashboard it's hard for me to understand why anyone wouldn't want to use the full width nearly always (I.e. panel mode)

[DigiLive]

I agree.
It's the masonry layout which causes the "narrow" column.
I'm not very fond of it.

We must see how to trick it or find another layout to apply.

[DigiLive]

Warning

The main branch has been switched to TypeScript.
Update your feature branch accordingly!

Code must be changed to TypeScript

[punxaphil]

Warning

The main branch has been switched to TypeScript. Update your feature branch accordingly!

Done.
I see docs are moved to wiki, I can update it if you give me access once this is merged.

[punxaphil]

@DigiLive @AalianKhan Has development stopped on this repository?

[DigiLive]

Not for me, but currently a bit busy with other code and personal matters.

[farridav]

Bump. This would add a lot of value to my setup, any idea on a timeline, or anything I can do t help ? Thanks

[DigiLive]

Bump. This would add a lot of value to my setup, any idea on a timeline, or anything I can do t help ? Thanks

It's currently stuck on the requirement of panel view.
We must see how to trick it or find another layout to apply.

[punxaphil]

Why not simply change to always use panel? Full width makes more sense to me.

[DigiLive]

Why not simply change to always use panel? Full width makes more sense to me.

As already said before: Panel mode can't be set if there's more than 1 card.

[soif]

any progess on this, guys?