I got an idea to merge the card with a grid I have for temperature/humidity graphs, and I'm using card-mod to make it fit better...
Some more complex cards usually have a compact: true option for those scenarios, so their padding/margin is reduced for fitting with other cards.
Any interest on me to bring those changes to a new option?
This is also related to the presence of the .header element, even though the header is not there. And I guess this compact option would automatically hide the text and icons - and thus, could be another value of the "display index info" option.
Compare below the current state with the changes I made via card-mod:
pure card
with card-mod
The table is made with rows of horizontal-stack, columns of vertical-stack, and card-mod to make the first column narrower and colored per-room. This was made before the grid was introduced, so I didn't bother translating it to a grid (and it also uses conditional cards, so the whole line gets hidden if temp or humidity is unavailable). In the card-mod version I also included background colors, but that's obviously unrelated to my suggestion of a compact option :)
Here's what I added via card-mod:
ha-card { border-radius: 0 } /* actually, not sure about this, since I use a squared theme, but I _think_ border-radius should come from the theme and not the card? */
.header { display: none } /* since it takes up space even when there's no text on it */
.info {
padding: 0 !important;
margin-top: 0;
}
.color-range-container.collapsed { margin-top: 0 }
.color-range-container + .color-range-container { margin-top: -5px }
.color-range-gradient { margin: 10px }
I would also suggest to always add the complete text (index + text) as a tooltip on hover when it is completely hidden. This is easily achievable via a title prop on the .color-range-gradient element (unless there's a standard way to create tooltips in Lovelace that I don't know, and I don't know almost anything about Lovelace):
This also makes me think that the text-less display could be more informative if, instead of a pure gradient, the bar was composed of multiple single-colored blocks, one for each step on the scale... Similar to that original pH scale you got inspiration from. Thoughts?
I got an idea to merge the card with a grid I have for temperature/humidity graphs, and I'm using card-mod to make it fit better...
Some more complex cards usually have a
compact: trueoption for those scenarios, so their padding/margin is reduced for fitting with other cards.Any interest on me to bring those changes to a new option? This is also related to the presence of the
.headerelement, even though the header is not there. And I guess this compact option would automatically hide the text and icons - and thus, could be another value of the "display index info" option.Compare below the current state with the changes I made via card-mod:
Here's what I added via card-mod:
I would also suggest to always add the complete text (index + text) as a tooltip on hover when it is completely hidden. This is easily achievable via a
titleprop on the.color-range-gradientelement (unless there's a standard way to create tooltips in Lovelace that I don't know, and I don't know almost anything about Lovelace):This also makes me think that the text-less display could be more informative if, instead of a pure gradient, the bar was composed of multiple single-colored blocks, one for each step on the scale... Similar to that original pH scale you got inspiration from. Thoughts?