Vue « Catégories uniquement » repensée en deux colonnes

Contribuer UX
1

Suite à la discussion sur Comment styliser la page /categories ? :

J’ai une question liée à une discussion plus ancienne.

Quelle est la simplicité de réaliser ceci :

image
image2560×1480 223 KB

Le résultat le plus proche que j’ai obtenu est celui-ci :

image
image1136×259 7.21 KB

En appliquant column-count: 2 au DIV entourant le tableau et display: block aux éléments du tableau.

Mais je ne suis pas sûr de savoir comment forcer l’en-tête à s’étendre sur toute la ligne :sweat_smile:

EDIT.
Je viens de réaliser que, fonctionnellement, je devrais soit dupliquer cette ligne d’en-tête, ne laisser que « Catégories », soit simplement tout masquer…

3 « J'aime »
2

Je pense que ce serait plus simple si vous définissez tbody en display: block et column-count: 2 ? Ainsi, thead conservera toujours sa largeur totale.

Mais oui, à ce stade, vous voudrez tout masquer, sauf « Catégorie ».

3 « J'aime »
3

Alternative avec 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

Quelques ajustements restent encore à faire.

9 « J'aime »
4

Au milieu de tout ça, j’ai oublié qu’il serait bien de conserver l’alignement horizontal.
C’est fantastique :slight_smile:

5

Remarquez qu’avec ce CSS, les catégories ne seront pas listées comme suit :

1 - 4
2 - 5
3 - 6

Mais comme ceci :

1 - 2
3 - 4
5 - 6

De plus, vous devez ajouter une requête média pour modifier le style sur les petits écrans.

4 « J'aime »
6

J’ai un peu testé les deux options, et il semble que diviser la table des catégories en deux plutôt que de les placer séquentiellement soit mieux adapté à notre besoin.

Cependant, il est délicat de contrôler où la division doit s’opérer.

J’ai réussi à obtenir cela dans mon navigateur :

image
image586×539 34.1 KB

Mais uniquement lorsque j’ai placé artificiellement les catégories de gauche dans une div (pour éviter qu’elles ne se divisent trop tôt, sinon la catégorie racine « Measure » se retrouve dans la colonne de droite) :

image
image659×247 10 KB

Existe-t-il un moyen de « regrouper » les lignes avec des identifiants de catégorie spécifiques dans une DIV, peut-être via l’API du thème ?

1 « J'aime »
7

Ce que vous demandez semble délicat et pourrait nécessiter un peu de magie JavaScript.
Avec la propriété CSS column, je suis convaincu que les catégories ne seront pas alignées horizontalement (sauf si vous définissez une hauteur fixe), contrairement à ce qui se fait avec flexbox, et le résultat n’est pas très esthétique.

J’ai réussi à obtenir ce que vous voulez, mais c’est un peu bidouillé :

J’ai utilisé mon CSS précédent, puis ajouté un <tr> vide (ce qui, je pense, peut être fait avec une seule ligne de JavaScript) et défini la propriété order pour changer l’ordre des div. Ce dernier point peut être fait uniquement via CSS en ciblant chaque valeur HTML data-category-id. Voici le résultat :

image
image1166×989 107 KB

Voici le <tr> vide :

image
image1175×351 29.9 KB

Notez que vous devrez probablement modifier le CSS et/ou le JavaScript à chaque fois que vous ajouterez ou supprimerez une catégorie.

edit : si vous avez besoin d’un ou deux éléments vides supplémentaires, vous n’avez pas besoin d’utiliser JavaScript pour ajouter un <tr>, vous pouvez aussi utiliser :after et/ou :before comme ceci :

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

Cela ajoute un élément vide de 1 px qui fonctionne de la même manière.

image
image1177×244 19.8 KB

3 « J'aime »
8

Merci, cela s’est plutôt bien passé :slight_smile: Nous n’avons aucun problème à devoir gérer les catégories de manière détaillée, donc tout va bien.
Le résultat final est visible sur notre Forum.

1 « J'aime »
9

Pouvez-vous partager l’URL de votre forum ?

1 « J'aime »
10

Bien sûr, je l’ai dans mon profil et je ne voulais pas faire de publicité directe :smiley:

2 « J'aime »