search

WolfwithSword / Bambu-HomeAssistant-Flows

A collection of HomeAssistant Dashboards and NodeRed Flows with a configurator to connect a BambuLabs printer to HomeAssistant through MQTT - based off of my Gists
32 stars 3 forks source link

Fix positioning of the printer ON/OFF button (with title) #7

Closed informagico closed 2 weeks ago

informagico commented 2 weeks ago

I was (finally) able to fix the smart switch button positioning (yeah, it was really hurting my brain 😄 ) I also simplified the whole card using just a custom:button-card without custom:mushroom-title-card nor custom:gap-card Here some examples:

Switch non-existing (switch.deleteme) and short description image

Switch non-existing (switch.deleteme) and (very) long description image

Switch existing and short description image

Switch existing and (very) long description image

WolfwithSword commented 2 weeks ago

Hmm, I'm wondering why we're both getting such differences with it. This is what it looks like when I import the changes:

image

Perhaps using the old elements (gap cards, custom button, mushroom title) in a grid layout would help preserve the positioning?

informagico commented 2 weeks ago

or...maybe I totally mislead what is the desired behaviour 😅 my goal is to center-align both icon and text vertically and horizontally in their columns, something like this (blue line added in post, borders are the actual elements border - just for better understanding): image

Wasn't it the desired positioning?

WolfwithSword commented 2 weeks ago

Ah okay, the original desired positioning was to always have the title text centred regardless of if there was a power switch or not. Initially I had them also vertically aligned but from your older screenshots I assume it was not the case.

I'm not too keen on the text potentially being that far off to the side, since the idea was more inspired as "hey, this section is like one of those old TV remotes that had the brand or device name at the top centre, with a power button on the left side".

At least in my own dashboard, with using Sections I also have it stacked "above" the fan/temperature control section, so my entire middle column is for "control" (though my print options are still in a different column). Granted the text isn't perfectly centre in mine either, but it's still preferable to being anchored to a far-side.

image

Then again, this is why I had two equally-weighted gap cards on either side of the text (and why the button was also the same size of the gap cards), so horizontally it would be centred... Looking at older screenshots now I see I used to have it better aligned horizontally, I need to see why that changed.

WolfwithSword commented 2 weeks ago

Ah okay, with the change done earlier to change the card heights to 5 from 25, it unaligned horizontally the centre text in mine. I might revert that change too from 5 back to 25. It says for "height" but modifying it also affected horizontal positioning for some reason, and at 25 the actual height taken up was negligibly different, at least for me. Nevermind this was just my eyes playing tricks on me.

informagico commented 2 weeks ago

Now I got it! Sorry I totally mislead that but fortunately is a quick enough fix, let me make some changes 😉

informagico commented 2 weeks ago

With latest changes:

image

image

WolfwithSword commented 2 weeks ago

Nice! Played around with it a bit and have a few suggestions:

1) Non-critical, let me know what you think. Increase the icon width from 50 to 65px ( if (entity) return '65px';) 2) I think I prefer the text to be not bold (remove font-weight: bold) and was bigger, i.e., font-size: 1.4em 3) Non-critical, but I think it will also look nicer if the icon had padding-left: 20px

Ex of my recommendations: image

Thoughts?

informagico commented 2 weeks ago

That looks great to me! agree on all of them, expecially on the padding; this way it is aligned with below icons. I pushed my branch.