v2.0 breaking changes - "min_columns" option missing

bcutter commented 3 years ago

How to transform code to have cards look the same like with v16 (last release before v2.0.0)?

What I had in a view with panel mode enabled:

type: 'custom:mod-card'
style: |
  ha-card {
    padding: 7px;
    background: none;
  }
card:
  type: 'custom:layout-card'
  layout: horizontal
  min_columns: 2
  max_width: 100%
  cards:
    - type: 'custom:mod-card'
      style: |
        ha-card {
          height: 220px
        }
      card:
        type: button
        tap_action:
          action: navigate
          navigation_path: betriebsstatus
        name: Betriebsstatus
        icon: 'mdi:checkbox-marked-circle'
        hold_action:
          action: none
    - type: 'custom:mod-card'
      ...
      ...

Relevant part: with v2.0 instead of

  type: 'custom:layout-card'
  layout: horizontal
  min_columns: 2
  max_width: 100%
  cards:

I tried

  type: 'custom:layout-card'
  layout_type: horizontal
  layout_options:
    column: 2
    max_width: 100%
  cards:

but the result is not the same: now I have only ONE column on the mobile/smartphone view instead of two next to each other.

"Breaking change" is good to know, but where´s guidance on how to fix things so everything can look the same as before the update? I´m a bit lost...

It seems like min_columns does not exist anymore. How to achieve what that did with v2.0 now?

Look desktop with v16 release (GOOD): grafik

Look desktop after updating to v2.0.0 release without changing anything (BAD): grafik

--> When making above code changes, desktop looks GOOD.

I can adjust the view so on the desktop it looks like before the update. BUT then the mobile view will break:

mobile view with v16 (GOOD): grafik

mobile view with v2.0.0 after applying some code changes (BAD): grafik

--> When making above changes, mobile is broken (missing 2 columns setup).

I always need to balance the UI to have it look good on the desktop and the mobile view at the same time. With v16 this was possible. With v2.0.0 I see no way to achieve the same.

bcutter commented 3 years ago

After trying and testing like crazy for another hour, I needed to revert back to v16 release. It´s just impossible!

How can you release updates that don´t offer the same possibilities as earlier releases? min_columns option is missing!

Help urgently needed @thomasloven.

VDRainer commented 3 years ago

I'm also missing some examples for the yaml mode users. I have this view:

  - title: MCP2HA-GW
    path: mcp2ha_gw
    icon: mdi:raspberry-pi
    panel: true
    cards:

      - type: custom:layout-card
        layout: vertical
        max_columns: 3
        cards:

          - type: entities
            title: MCP2HA Gateway
            show_header_toggle: false
            state_color: true
            entities:
              - entity: some.entity
                ...

          - break

          - type: entities
            title: Beaglebone
            show_header_toggle: false
            state_color: true
              - entity: some.entity
                ...

          - break

          - type: entities
            title: Beaglebone
            show_header_toggle: false
            state_color: true
              - entity: some.entity
                ...

          - break

          .........

How to transfer to 2.0? Is the panel mode for the view obsolete?

thomasloven commented 3 years ago

As is industry practice when something is named "2.0" you should expect it to be more or less a new product and require set up from the ground up.

If you don't like that, you're - as always - free to not upgrade.

The setting you're looking for is width, as in "A number of evenly sized columns is prepared based on available space, the width option and the max_cols option."

The screen is divided into columns that are at least width pixels wide. If your screen cannot fit two times that width, you'll only get one column.

Also, please take a look at your browser console output.

bcutter commented 3 years ago

I saw the release notes have been enhanced to contain a big warning, that´s good.

I meanwhile tested 2,5 hours to get the same result with > v2.0 as before, but still no chance. Ah would be great to have a simple converter "You used this and that, now you have to use this and that to get the same result". Still a one way road for me, always turning back to version 16.

I don´t get it. The stuff I used layout-card before is not that special.

thomasloven commented 3 years ago

Again, the option you're looking for is width, as in:

Option Values Description Default

width number Size in pixels of each column 300

Option	Values	Description	Default
width	number	Size in pixels of each column	300

Jpsy commented 3 years ago

@bcutter I understand your frustration. #metoo I had to invest quite some time to get my layouts converted. But please understand that all this is voluntary work. And every decent programmer in the world will tell you that redesign and reengineering are a normal part of any software evolution. The fact that you are not spoon fed on how to handle breaking changes is the simple result of the limited time that each contributor can invest. Again: This is all voluntary and free, private time that is provided here for you. Have you seen how many contributions Thomas has provided for the community? Have a look here. Over 500 commits to public projects over the last year alone. Approx 2 per day. Any further questions? I hope not. If this is not good enough for you, you have to pay for a professional product. And even then you are not guaranteed to be supported over a longer time (as several commercial home automation products have proven over the last years). Sorry for being blunt.

bcutter commented 3 years ago

@Jpsy: I totally get you. I have great respect for all the contributions made by Thomas. I can´t imagine running HA without all the integrations from him I use from the very beginning.

I meanwhile could track down my specific issue to the missing min_columns option which seems to has been removed after version 16. Without this option I see no way to fix the layout after updating so my lovelace panel mode dashboards look the same like before.

So @thomasloven my questions are: 1) Has min_columns setting been removed? I think so, looking back at https://github.com/thomasloven/lovelace-layout-card/blob/df5db6311e1ceaab6f5a6f740a4ee3a43b609324/README.md#options comparing to current https://github.com/thomasloven/lovelace-layout-card/blob/master/README.md 2) How to achieve the same without it?

I simply have no idea how to specify the issue even more precise than I did. I´m not sure if it´s me not understanding the width option or if it´s you not understanding the issue.

I tested the width option you noticed twice (from 0, 100, 200, 300 to 500), but that did not make any difference. Even with width: 50 there´s no second column created on the mobile view.

I also tested min_cols option as there is max_cols now (which was max_columns before v2.0.0), but it´s not respected too.

Before / v16:

card:
  type: 'custom:layout-card'
  layout: horizontal
  min_columns: 2
  max_width: 100%
  cards:
  ...

After / v2.2.3:

card:
  type: 'custom:layout-card'
  layout_type: 'custom:horizontal-layout'
  layout:
    width: 0
    max_cols: 0
    min_columns: 2 # <-- not respected  (!!!) Might be root cause!
  cards:
  ...

While with those simple changes everything looks the same on the desktop view (large screens), on the mobile I still get grafik

bcutter commented 3 years ago

I also played with

      view_layout:
        show: always
        column: 2

which also works great on the desktop - but isn´t respected on the mobile view (iOS, Home Assistant Companion App). column is ignored as well as setting show: never.

Using the browser on the mobile is working, but official HA Companion app interprets it different: (show: never set for first button card) smartphone browser (Firefox) --> respects the config option ✅ grafik

HA companion app (iOS) --> ignores the config option ❌ grafik

So summary: 1) "min_columns" / "min_cols" option missing. There´s absolutely NO WAY to achieve the same without that option. Otherwise: proof me wrong, please. 2) Many layout-card options are working perfectly on the desktop, but are ignored on the mobile view when using the HA Companion app.

bcutter commented 3 years ago

Update: Great, HACS does not offer v16 for downgrading anymore... so fix of this issue highly appreciated :-(

grafik

bcutter commented 3 years ago

After another 3 hours fight I give up. Without good feedback of experts regarding the min_columns there´s no progress on this.

I had to manually downgrade to v16 by grabbing the resources and putting them at config\www\community\lovelace-layout-card and additionally restoring the *.hacs file from a snapshot so HACS does not think this frontend integration is up to date while it actually is v16. Things only getting worse here now that even downgrading is a struggle. Help appreciated (for the min_columns core issue).

Jpsy commented 3 years ago

Is this what you are looking for?

Here is the complete YAML code for that view. You can copy it into one of your Lovelace dashboards using the raw config editor.

- title: Grid Example
  path: grid-example
  type: 'custom:grid-layout'
  layout:
    grid-template-columns: 1fr 1fr 1fr 1fr
    grid-template-rows: auto
    mediaquery:
      '(max-width: 600px)':
        grid-template-columns: 1fr 1fr
  badges: []
  cards:
    - type: button
      tap_action:
        action: toggle
      entity: light.couch_1
    - type: button
      tap_action:
        action: toggle
      entity: light.couch_2
    - type: button
      tap_action:
        action: toggle
      entity: light.couch_3
    - type: button
      tap_action:
        action: toggle
      entity: light.esstisch_1
    - type: button
      tap_action:
        action: toggle
      entity: light.esstisch_2
    - type: button
      tap_action:
        action: toggle
      entity: light.esstisch_kronleuchter
    - type: button
      tap_action:
        action: toggle
      entity: light.esstisch_c1
    - type: button
      tap_action:
        action: toggle
      entity: light.esstisch_c2

bcutter commented 3 years ago

That´s nearly perfect! Thank you so much @Jpsy!

Only slight difference left is:

v16: desktop view automatically adjusted number of columns depending on screen size (e. g. 12": 4 columns, 28": 6 columns).
v2.2.3: fixed number of columns (1fr 1fr 1fr 1fr makes 4 columns, fixed) because there´s no "auto columns in combination with min_columns setting" anymore.

But I´ll try to tune it a bit. I guess the mediaquery is the kind of "mobile view", right?

Anyway, so grid layout is the way to go.
No panel mode needed anymore in addition. Less complexity is always great.
In combination with custom:mod-card for setting height to 220 px again for every button it´s almost looking exactly the same like before.

Really great, finally :-)

Jpsy commented 3 years ago

Glad that solution helps. grid-layout is definitely the most versatile option as it leverages the full power of CSS grid styles.

You can combine as many mediaqueries as you need. For your 28" you can try:

layout:
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
  grid-template-rows: auto
  mediaquery:
    '(max-width: 600px)':
      grid-template-columns: 1fr 1fr
    '(max-width: 1200px)':
      grid-template-columns: 1fr 1fr 1fr 1fr

A shorthand for 1fr 1fr 1fr 1fr 1fr 1fr would be repeat(6, 1fr)

But what comes closest to your original idea would probably be this very compact solution without any mediaqueries:

layout:
  grid-template-columns: 'repeat(auto-fill, minmax(300px, 1fr))'

bcutter commented 3 years ago

That is awesome! Now I understand the mediaquery. Depending on screen size you can set additional, individual layout options. Great. I updated all my affected views. Not only they look the same like (on some screens even better than) with v16, there´s also much more flexibility to adjust to different screen sizes, I don´t need to use panel mode anymore and there´s a bit of code reduction (less complexity) too.

Note: grid-template-columns: 'repeat(auto-fill, minmax(300px, 1fr))' did not work for me because it does not create the needed second column on the mobile view. I´ll stay with the less compact but easier to understand variant.

Lucky. Thanks again! Closed :-)

Jpsy commented 3 years ago

If mobile does not show enough columns you could try a smaller min value:

layout:
  grid-template-columns: 'repeat(auto-fill, minmax(250px, 1fr))'

thomasloven commented 3 years ago

Now that this "issue" has been "solved" I'm till wondering why this didn't work for you:

Desktop:

Mobile:

By the way: There's an option in HACS to select how many previous versions should be shown in the select menu.

thomasloven / lovelace-layout-card

v2.0 breaking changes - "min_columns" option missing #110