Tablas
Las tablas se desarrollaron de manera que en la versión responsive se comporten como cards.
Según el breakpoint lg (992px) el header de la tabla cambia de texto a íconos y sus elementos se re-distribuyen.
Versión desktop
Responsive
El comportamiento de las tablas en la versión mobile dependerá del número de columnas y la cantidad de texto que tenga cada una de ellas, si la versión “tabla con íconos” aún tiene espacio suficiente en la medida intermedia, el diseño de tabla se mantendrá. Sin embargo de no ser así se deberá adaptar como “card” es decir que los elementos en vez de distribuirse como columnas lo harán como filas.
Versión tablet breakpoint - estilo tabla con íconos
Versión mobile breakpoint - estilo card
El ancho de cada columna se definirá según el contenido que se necesite mostrar. Las columnas de las tablas se arman con las clases de bootstrap, es decir, se trabaja sobre una grilla de 12 columnas, las cuales se distribuirán según el ancho que se necesite.
Ejemplo: si se requiere una tabla con 4 columnas del mismo ancho se dividirán las 12 columnas en 4 partes, obteniendo de este cálculo la clase “col-3” para cada columna.
Otro ejemplo es que una columna debe ser más ancha que las demás, entonces se deberán distribuir las 12 columnas en 4 según el ancho que se estime conveniente (1° columna = “col-5” / 2° columna = “col-1” / 3° columna = “col-3” / 4° columna = “col-3”).
En el caso de que se necesite eliminar o agregar una columna de contenido a la tabla, se debe considerar ese espacio eliminado para agregarlo en el resto de las columnas, o, de forma inversa, si se necesita agregar una nueva columna, se debe sacar espacio desde las otras ya existentes.
Comportamiento del header: se mantiene la misma estructura que se definió para las columnas de la tabla, es decir, si la primera columna es tamaño “col-3”, el header de la primera columna también será tamaño “col-3”.
Comportamiento de la card: los elementos que en vista desktop se alinean como columnas pasan a alinearse como filas, es decir uno debajo del otro.
Sin embargo existe 1 excepción: tabla de Mis Tutorías perfil alumno. En este caso, una de las columnas contiene un elemento que se comporta de manera especial (imagen del tutor), por lo que se mantiene a la izquierda de la card como elemento independiente, utilizando todo el alto del contenedor, y el resto de las columnas se distribuyen en una segunda columna de la card pasando a ser filas.
Acción al desplegar información al hacer la imagen del tutor:
El ícono de flecha indica que hay una interacción disponible: tanto en tablas como cards al hacer clic se desplegará información extra.
Acciones en la tabla
Actualmente las tablas cuentan con 2 tipos interacción: la individual (explicada en el punto anterior) y la general, que se identifica con el ícono que se ubica al final de la fila. El ícono a mostrar se define según la siguiente condición: cuando exista más de una acción, se mostrará un ícono que agrupará estas acciones, y en el caso de que exista sólo una acción disponible, como ocurre actualmente, se mostrará el ícono asociado a la acción correspondiente (Ver detalle de tutoría: ícono ).
Si en un futuro se decide agregar más acciones, se deberán agrupar con el ícono y desplegarlas en una pequeña caja flotante luego de hacer clic en él.