Je cherche à personnaliser l’interface graphique de Home-Assistant davantage qu’avec Card-mod.
J’utilise pour le moment des graphes Apex et mini-graph, des icones (fontawesome, hue, simpleicons…), banner-card, battery-state, et surtout card-mod.
Le problème c’est que l’interface s’adapte selon le client. Les cards se mettent en colonne sur un smartphone, se compressent, changent de dimensions, les typos s’adaptent… Ca impose d’avoir des cards de couleurs unies (qui pourront s’étirer) ou à la rigueur avec des seamless patterns en fond
Existe-il une méthode pour faire en sorte que toutes les cards restent responsive et qu’on puisse en même temps les skinner finement, quelles que soient leurs dimensions ?
Je me suis mal exprimé sur le responsive. Le problème étant qu’il n’y a qu’une seule balise (ha-card) et qu’on peut donc skinner en CSS au maximum 3 éléments :
ha-card:before
ha-card:
ha-card:after
On peut éventuellement hacker quelques éléments comme les balises PRE et BLOCKQUOTE mais ca ira guère plus loin faute de balises. Voici un premier test :
Techniquement c’est à peu près possible (avec bcp de bémols)
Bon bien sûr, après il est recommandé d’avoir du gout pour un design sympa ce qui est pas du tout le cas (au secours !!! )
Il y a moyen de figer un peu avec Grid, Vertical-Stack, Horizontal stack, d’utiliser des popups ( Je les utilise pour les graphes CPU, RAM et Temp car je n’ai pas besoin de les voir en continu) ou Layout Card
Voici une video qui montre comment réorganiser un dashboard en fonction de la largeur d’écran
)