Vista solo de categorías reformada en dos columnas

Contribuir UX
1

Continuando la discusión de ¿Cómo estilizar la página /categories?:

Tengo una pregunta relacionada con una discusión anterior.

¿Qué tan sencillo es lograr esto:

image
image2560×1480 223 KB

Lo más cercano que he logrado es esto:

image
image1136×259 7.21 KB

Aplicando column-count: 2 al DIV que rodea la tabla y display: block a los elementos de la tabla.

Pero no estoy seguro de cómo forzar que el encabezado abarque toda la línea :sweat_smile:

EDIT.
Acabo de darme cuenta de que, funcionalmente, tendría que duplicar esta fila de encabezado, dejar solo “Categorías” o simplemente ocultarlo todo…

3 Me gusta
2

Creo que podría ser más fácil si haces que tbody tenga display: block y column-count: 2. Así, thead seguirá ocupando todo el ancho.

Pero sí, en ese punto querrás ocultar todo excepto “Categoría” de todos modos.

3 Me gusta
3

Alternativa con flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

image
image1205×853 95.6 KB

Aún hay algunos ajustes por hacer.

9 Me gusta
4

En medio de todo, olvidé que sería bueno que mantuvieran la alineación horizontal.
¡Esto es fantástico :slight_smile:

5

Notar que con este CSS las categorías no se listarán así:

1 - 4
2 - 5
3 - 6

Sino así:

1 - 2
3 - 4
5 - 6

Además, debes agregar una consulta multimedia para cambiar el estilo en pantallas pequeñas.

4 Me gusta
6

He probado un poco ambas opciones y parece que dividir la tabla de categorías a la mitad, en lugar de hacerlo de forma secuencial, es mejor para nuestro propósito.

Sin embargo, es complicado controlar dónde debe producirse la división.

Logré esto en mi navegador:

image
image586×539 34.1 KB

Pero solo cuando coloqué artificialmente las categorías de la izquierda dentro de un div (para evitar que se dividiera demasiado pronto; de lo contrario, la categoría raíz “Measure” pasaría a la columna derecha):

image
image659×247 10 KB

¿Existe alguna forma de agrupar las filas con IDs de categoría específicos dentro de un div, quizás mediante la API del tema?

1 me gusta
7

Lo que estás pidiendo parece complicado y podría requerir algo de magia con JavaScript.
Con la propiedad CSS column, estoy seguro de que las categorías no se alinearán horizontalmente (a menos que establezcas una altura fija), como ocurre con flexbox, y no queda muy estético.

Logré lo que buscas, pero es un poco truculento:

Utilicé mi CSS anterior, luego añadí un <tr> vacío (lo cual creo que se puede hacer con una sola línea de JS) y establecí la propiedad order para cambiar el orden de los div. Esto último se puede hacer solo con CSS apuntando a cada valor HTML data-category-id. Aquí está el resultado:

image
image1166×989 107 KB

Aquí está el <tr> vacío:

image
image1175×351 29.9 KB

Ten en cuenta que probablemente tendrás que modificar el CSS y/o JS cada vez que añadas o elimines una categoría.

edición: si solo necesitas uno o dos elementos vacíos adicionales, no hace falta usar JS para añadir un <tr>; también puedes usar :after y/o :before así:

.category-list tbody:after {
    width: 1px;
    content: "";
}

Esto añade un elemento vacío de 1 px que funciona igual.

image
image1177×244 19.8 KB

3 Me gusta
8

¡Gracias, funcionó bastante bien! No nos importa tener que supervisar de cerca las categorías, así que todo está bien.
El resultado final se puede ver en nuestro Foro.

1 me gusta
9

¿Puedes compartir la URL de tu foro?

1 me gusta
10

Claro, lo tengo en mi perfil y no quería publicitarlo directamente :smiley:

2 Me gusta