Gauge tile padding issue

[alphasixtyfive]

As of now we have a fixed top padding of 10px for gauge tile which sadly is something that does not work with most of the tile sizes and almost always overlaps with the state. Here are two examples with gauge size set to 160 and 120:

Those would look OK with padding set to 20px for size 160 and 30px for size 120:

[rchl]

Would likely get fixed by switching to flexbox (we would reserve space for state, if present), but of course, we might want some quick-fix for the time being.

[alphasixtyfive]

Yeah, I was thinking about flexbox and wanted to reference it in #682. Flexbox will clearly be a big job.

[alphasixtyfive]

I've also noticed that if you restart HA, gauge disappears, leaving only the value.

[akloeckner]

Isn't the state fixed-size through top and font-size here? https://github.com/resoai/TileBoard/blob/6c2a3dfc1863aa4123b81ec255bbf5f4d8b40477/styles/main.less#L771

That would mean, the top padding would only need to be set to be "bigger" than the height of the state...

(In that course, the state's top could also be fixed to be same as its right, since right now, it's not "symmetrical".)

[alphasixtyfive]

@akloeckner It is not only state overlapping which is the issue I'm afraid. Larger tiles with smaller gauges like the ones in my second example we would still need to more or less center gauge vertically to make it look good. A quick and dirty fix would probably be setting top padding in the code which would depend on cause size and top/bottom offsets or something like that.

[akloeckner]

we would still need to more or less center gauge vertically

I see... :-/ Then, I have no simple solution in my mind.

Just a hint: I'd try to reduce setting css from the code to a minimum (best-case: zero). I experienced the mess it causes, when implementing the full-size popups. I'd favor classes and pure css (overwritable from custom.css) instead.

[alphasixtyfive]

we would still need to more or less center gauge vertically

I see... :-/ Then, I have no simple solution in my mind.

Just a hint: I'd try to reduce setting css from the code to a minimum (best-case: zero). I experienced the mess it causes, when implementing the full-size popups. I'd favor classes and pure css (overwritable from custom.css) instead.

That I fully agree with.

[akloeckner]

Looking at it again: https://github.com/resoai/TileBoard/blob/master/scripts/directives/tile.html

Can we do the following?

• Re-model class="item" to use flex-box.
• Make sure that class="item-entity-container" still is positioned absolutely, such that legacy item TYPEs keep working as is.
• Switch the gauge tile to something like class="item-entity-container-flex" and start going from there.
• Do the same for the sensor tile. And continuously migrate as necessary.

[alphasixtyfive]

@akloeckner @rchl how about class="item -flex" ?

[rchl]

I think it also requires more markup changes. We should probably wait with refactoring until we have no pending PRs.

[akloeckner]

@akloeckner @rchl how about class="item -flex" ?

I found that good, until I noticed: We would need to programmatically set the -flex class for selective item types. The first point to separate item types in the markup is the item-entity-container.