Si estás cansado de replicar tus paneles para adaptarlos a cada dispositivo, supéralo aprendiendo a crear estilos condicionales por usuario.
El problema
No sois pocos los que preguntáis cómo se pueden crear tarjetas personalizadas «responsive» (es decir, que se adapten a la resolución del dispositivo), y no sois menos los que resoplais cuando os recomendamos que creis un panel para cada dispositivo. Claro, el problema es que la resolución de una tablet no es la misma que la de un smartphone, ni tampoco la de distintos modelos de smartphones entre sí. Esta es la desventaja de crear tarjetas «a medida».
Hay casos en los que creo que esto es una oportunidad, por ejemplo, para crear un panel dedicado a una instancia. No obstante, estoy de acuerdo en que a veces no es nada eficiente. Por ejemplo, supongamos que quieres tener el mismo panel de control en el dispositivo móvil de dos usuarios, pero la resolución de la pantalla es ligeramente distinta. ¿De verdad crear un panel independiente es la mejor solución, por unos milímetros?
Estilos condicionales por usuario
Evidemente, la respuesta es no. Hoy vamos utilizar un truco para crear estilos condicionales por usuario, salvando esas pequeñas diferencias sin necesidad de duplicar paneles. Para que entiendas mejor a lo que me refiero, te lo voy a explicar con un ejemplo.
Probablemente ya conozcas nuestras tarjetas de habitación, que en general sólo tienes que copiar y pegar adaptándola a tus preferencias. No obstante, en la última versión añadimos como novedad una barra progresiva alrededor del icono grande que muestra información de forma visual.
Esta barra está super puesta sobre el icono y puede requerir que ajustes unos cuántos pixeles a izquierda o derecha, para que el encaje sea perfecto en tu dispositivo. Pero claro, esos pixeles que en tu dispositivo móvil hacen que se vea perfecto, no tienen por qué coincidir con los que necesita el dispositivo de otro usuario. Esto provocaría el siguiente efecto:
En este caso concreto, el código que regula el posicionamiento de esta barra mediante el atributo ‘margin-left’ es el siguiente:
card_mod:
style: |
ha-card {
margin-top: -26px;
margin-bottom: -75px;
margin-left: -110px;
}
Si queremos alterar este valor, únicamente para el dispositivo de un usuario (por ejemplo, «Tito»), podemos hacerlo mediante un sencillo ‘template’ como este:
card_mod:
style: |
ha-card {
margin-top: -26px;
margin-bottom: -75px;
{% if user == "Tito" %}
margin-left: -130px;
{% else %}
margin-left: -110px;
{% endif %}
}
Aplicaciones de la técnica
Este truco para crear estilos condicionales por usuario no sólo sirve para posicionar elementos al milímetro en las tarjetas. También puedes utilizarlo, por ejemplo, para cambiar los colores en función del usuario (algo muy útil si, por ejemplo, uno utiliza un tema oscuro y otro un tema claro).
Además, no olvides que esto no es más que una aplicación concreta de nuestra ya muy trabajada técnica de crear estilos condicionales y tarjetas personalizadas (que te permite personalizar tarjetas en función de cualquier entidad, como la hora del día o el tiempo que hace).
