For large Layout: Calculate height with row height,size and gap

[MrBearPresident]

Hey @Clooos here my first pull request.
Haven't gone through all the code yet but this is a start.

[Clooos]

Hi! I'm so glad that you made you first PR! 😄

I just have some suggestions, because it was something I wanted to do already, it would be great if the icon/name/state stay fixed at the top, and the sub-buttons fixed at the bottom.

This would better to enjoy the additional space that this offer.

What do you think? And don't hesitate if you have any suggestions 🙂

[MrBearPresident]

Already got it working on the button-cards.

The other cards will follow. I will not do the: empty-column, separator, button-stack, pop-up as I don't see a lot of usage for this.

[Clooos]

That's amazing! Thanks a lot! 😀

[Clooos]

Hi again! I should be able to try that tomorrow, can't wait!

[MrBearPresident]

Not ready yet. Will have some more work. So no need to try for now.

[Clooos]

Ok good to know, tell me when I will be able to try it 🙂

And thanks again!

[MrBearPresident]

Possibly some fine-tuning still to do, but this can already be evaluated.

[MrBearPresident]

You'll notice some extra commented code for the sub-buttons.
What i wanted to do was the following.

I always worked with the following grid:

i	n	c	a
b	b	b	b

When there was only 1 row

• icon in 'i'
• name in 'n'
• sub-buttons in 'c'
• all other features in 'a'

when there were multiple rows
-sub-buttons in 'b' but when overflowing also in 'c'

but this was very unrelliable.

[Clooos]

Good work again! Even if I think that it should be improved a bit more, even if I'm still unsure how exactly. What's bugging me is that the space below is not used fully when in a 2 rows config.

Maybe something like this?

And in a card_layout: large-2-row the sub-buttons could take more space to be less condensed.

What do you think? I hope I'm not asking too much.

[Clooos]

We should also handle when the card is not large enough, and I understand that this is not that easy 😅

[MrBearPresident]

How should it resolve such a thing?
I could not think of a good solution.

[MrBearPresident]

Good work again! Even if I think that it should be improved a bit more, even if I'm still unsure how exactly. What's bugging me is that the space below is not used fully when in a 2 rows config.

Maybe something like this?

And in a `card_layout: large-2-row` the sub-buttons could take more space to be less condensed.

What do you think? I hope I'm not asking too much.

Yes indeed, always aligning center is better.
About the spacing I would like to go with the second one.
If people want the first they could adjust that through the styles sections.

The third design would be easy doable.

[Clooos]

I guess you're right, I'm probably overthinking.

This will be a major new possibility for Bubble Card, I will try it when I got some time.

[MrBearPresident]

I think it is ready.

But we have to discus maybe the following 'issue'.
The layout of the cards doesn't 100% line up.

Top = Large layout
Bottom = Original layout

[Clooos]

This layout was made to support the new section view without making a too big breaking change, but the more I think of it and the more I think we should remove the original layout, it was a bit too compact anyway and the new large layout is way better, even on the other view layouts. What do you think?

[MrBearPresident]

I would keep the original layout in, but make the "large" the default one.
But I would only do that once all the bugs are out.

[Clooos]

I still think we should remove it, to avoid confusion, misalignment, and for a better consistency, also this way if we add new card_layouts after there is no need to have them for both sizings. This is not a big breaking change, the size difference is minor.

[MrBearPresident]

Then it will need further adjustment because, when the card is not in a section view it does not work.

[Clooos]

It does work outside of a section view, I mean all the large layouts does, what do you mean?

[MrBearPresident]

I solved It already so no problem anymore.

[Clooos]

Hi again! I had some time to try your fork. Here's my first feedback 🙂

First, here's my dashboard with your PR:

And here's what it looked like before:

The icons are not round with the large layout (but not in all card types):

The border radius is different when there is 2 rows:

With 2 rows all buttons should be below (and not just the sub-buttons):

The icon of the button switch is covered by the background color (after/before):

There are maybe more issues, but beside that, that's a good start!

Thanks again!

[MrBearPresident]

Ah nice, good that you have eye for detail.
I will fix most of these tomorrow.

The only thing I don't agree with, is that all buttons should be at the bottom.
I think the central function of the card should stat at the top.
In this way the top is the same as a 1-row without sub-buttons.
For me it feels much more logical this way.

[Clooos]

I disagree, because the main use case for this is to have the possibility to display two or more cards on a same line, this way it will be possible to display two media players/climate cards next to each other on mobile. To me there is no sense to only display the sub-buttons below, because default buttons looks exactly the same for the end user.

[MrBearPresident]

I fix the small issues you mentioned.
I don't seem to have the problem of the background color.

For the layout, I will try to add a toggle so people can choose?
For the layout you propose the only workable outcome I can think of is something like this:

[Clooos]

I will try to test that today! 😀

For your example that's perfect, but the more empty line should be below (the one with only one sub-button).

Thanks again!

Edit: I don't have enough time today after all, I will wait for your next adjustments instead 🙂

[MrBearPresident]

Alternative layout is possible for media-player and climate card.
Cover card is truly impossible unless we do a complete overhaul of the cover card.
For the select-card I think it is best the arrow stays where it is now.
Button didn't need work.

[MrBearPresident]

[MrBearPresident]

4 problems I've see already

• auto centering doesn't work anymore (when there are no sub-buttons)
• in climate card, temp control needs more clearance on the right side
• select-sub-buttons open badly in the alternatieve layout

[MrBearPresident]

Should be all good now...

[Clooos]

Nice progress! I haven't tried it yet but I see on your screenshots that the sub-buttons are not perfectly centered when they are below, the margin on the left is shorter than the one on the right.

Edit: And indeed I should rework the cover card to give it a similar structure to the other cards, without this done I will hold this PR. If it's all good, this new feature will be for the next major beta release (v2.4.0).

Edit 2: Totally unrelated but I managed to use your conditional logic for the pop-up triggers (and this works perfectly ❤️), I prefer to say it to make sure you don't work on that 🙂

[MrBearPresident]

but I see on your screenshots that the sub-buttons are not perfectly centered when they are below, the margin on the left is shorter than the one on the right.

This is also fixed, but did not mention this in my commit.

conditional logic for the pop-up triggers

Nice!
I wasn't planning on working on new features until this one is merged. After that I want to continue organizing and handing some issues.

[Clooos]

Nice! I will have some time today to try this, I'll let you now my feedback. I will also try to fix the remaining important issues for v2.3.1.

[MrBearPresident]

I disagree, because the main use case for this is to have the possibility to display two or more cards on a same line, ...

So this was what I was thinking about:

• Upper one is pure ChromeCasf entity

  • When somebody Cast music this one is needed, music assistant doesn't always show the info.
  • Added sub-buttons are the direct control of the JBL-soundbar.

• Lower one is music assistant entity

  • Need this for when playing through this the next and forward buttons don't work on the standard ChromeCast entity.
  • Added sub-buttons are playlist that I can directly start with one-click.

[Clooos]

That's nicer indeed when the card is taking the full column width, but I'm glad you added the possibility to put these below for the shorter column cases.

Looks great, thank you again!

[MrBearPresident]

For people that want to test: bubble-card.zip

To use unzip file above and follow the "without HACS"-method.

PLEASE do not make new issues about this PR If you find problems, (and they are not present on the main branch) please report them in this thread.

Features:

• All cards should work the same
• Large layout has been changed this you will only see when you give it 2 rows.
  • It changed a lot so some of your custom layouts may not work anymore.
  • Media-cards and Climate cards can switch between 2 different designs. (see picture below)
    • option1
      
    • option 2