Peut-on le faire avec CSS ? Regroupement des catégories sur la page des catégories

Dev
1

Ce que j’aimerais faire (je sais qu’il n’existe pas de paramètre ou de fonctionnalité intégrée) est d’utiliser CSS pour regrouper des catégories sur la page d’accueil.

Je ne cherche pas à imbriquer des catégories, mais simplement à en regrouper certaines et éventuellement ajouter un en-tête. Je sais que les catégories individuelles peuvent être « séparées » avec un espacement (padding), et que chaque catégorie peut être ciblée par son ID ou son nom. J’espère donc pouvoir reproduire quelque chose qui ressemble à ceci :

image
image480×480 81.3 KB

Je réalise que, pour simplifier, les catégories devraient être dans leur ordre trié, et que chaque catégorie est ciblée par category_id, mais je pense qu’il existe peut-être un CSS permettant d’ajouter un espacement après une catégorie ou avant une autre.

La grande question est : y a-t-il la possibilité d’insérer du texte dans l’espacement pour créer un en-tête ?

Le but de cela est d’abord de rompre la longueur de la vue de la liste des catégories, mais de les séparer ainsi : exemple

  • catégories 1 à 2 sous l’en-tête « personnel »
  • catégories 3 à 4 sous « ressources communautaires »
  • catégories 5, 8, 11, 12, 13 sous « catégories de discussion générale »

Je ne veux pas en faire des sous-catégories ; j’aime la structure et le système de catégories tels qu’ils sont. Tout ce que je veux faire est d’afficher les catégories légèrement différemment sur la page de vue des catégories. Idéalement, il s’agit simplement d’une mise en page visuelle, SANS rien changer à la structure de bibliothèque de la plateforme.

Avez-vous une idée de comment réaliser cela ?

Cela serait une véritable révolution pour la mise en page de mon site de collaboration professionnelle.

Sam, codinghorror, pensez-vous qu’il serait possible d’ajouter une étape de regroupement dans le menu de réorganisation des catégories permettant de le faire nativement, par exemple comme une option (regroupement activé/désactivé) ? Il suffirait de placer les catégories dans l’ordre au sein du regroupement de la page principale, et elles seraient automatiquement séparées. Est-ce réalisable dans le cœur du système, via un plugin ou un composant de thème ?

2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4

Un peu tard :smile: mais peut-être que quelqu’un d’autre en a besoin. Je dois préciser que :

  • Tout le code CSS n’est pas nécessaire, en particulier les bordures et les couleurs de fond des lignes du tableau, donc n’hésitez pas à les ajuster comme vous le souhaitez.
  • J’ai dû changer la mise en page du tableau classique en flex, car vous ne pouvez pas appliquer de marges négatives sur les lignes d’un tableau, et il y a d’autres problèmes de mise en page… et puis c’est plus flexible :smile:
  • Remplacez Category Group 1 et Category Group 2 par les noms de vos groupes de catégories souhaités.
  • Dans mon exemple, j’ai utilisé les identifiants de catégorie 2 et 4. Utilisez donc les outils de développement de Chrome pour inspecter (voir l’image ci-dessous), trouvez le bon identifiant de catégorie et remplacez [data-category-id="2"] et [data-category-id="4"] dans mon exemple par vos identifiants.

image
image829×290 17.9 KB

Collez ceci dans l’onglet Common :

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Collez ceci dans l’onglet Desktop :

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

Et ceci dans l’onglet Mobile :

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

Et voici à quoi cela ressemble sur les résolutions bureau et mobile :

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

5

Bonjour Cos,

Très intéressant ; merci pour le partage. Dans le même esprit (celui d’obtenir une meilleure présentation), nous essayons de placer, devant le discours, une page WordPress avec une présentation spécifique. Nous aimerions « envoyer » sur cette page des noms de catégories, par exemple celles qui ont reçu une réponse, celles choisies par l’utilisateur, ou bien une catégorie déterminée. Pensez-vous que cela soit possible et, si oui, comment ?

6

Je crains que cela ne soit pas possible uniquement avec du CSS. Peut-être que le plugin WordPress Discourse est ce dont vous avez besoin. De plus, les raccourcis wp discourse sont également indispensables.
Nous l’utilisons déjà sur notre site WordPress et il fonctionne très bien jusqu’à présent. Voici à quoi ressemble le plugin dans le widget de la barre latérale :

image
image454×664 52.5 KB

7

@sam, la réponse de @cosdesign fonctionne. Existe-t-il un moyen d’intégrer cela aux menus principaux afin que les utilisateurs puissent le désactiver par défaut, puis définir les en-têtes dans le panneau d’administration pour les titres d’en-têtes de groupe, et sur la page des attributs de chaque catégorie, sélectionner dans une liste déroulante les en-têtes de section activés depuis le panneau d’administration, de sorte que la catégorie s’insère simplement sous l’en-tête correspondant.

Cela ne devrait pas être particulièrement difficile à ajouter à la plateforme et améliorerait considérablement les installations à plusieurs rôles d’utilisateurs et à plusieurs groupes, ainsi que celles comportant de nombreuses catégories.

9

Ce type de regroupement est désormais pris en charge dans le cœur de Discourse :

Choisissez « Sous-catégories avec sujets mis en avant » comme « Style de page de catégorie de bureau » :

Capture d'écran 2022-03-07 à 10.25.34
Capture d'écran 2022-03-07 à 10.25.341346×654 53.9 KB

Et ensuite, votre page de catégories ressemblera à ceci :

image
image2440×1758 306 KB

10

Il est possible de le faire avec RTL ??
J’ai essayé mais j’ai échoué :broken_heart:

11

Cela semble logique. Les feuilles de style de base de Discourse sont inversées pour créer une version RTL ici : discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. Je ne pense pas que les fichiers CSS ajoutés par les thèmes soient compilés pour créer une version RTL. Si c’est le cas, cela expliquerait les problèmes que vous avez rencontrés avec les thèmes lorsqu’une mise en page RTL est utilisée.

Vous pourriez confirmer cela en ajoutant quelques règles CSS contenant une direction au thème de votre site, puis en visitant le site avec une locale RTL et en voyant si la direction a été inversée. Je ne pense pas qu’elle sera inversée.

Par exemple, si vous ajoutez ceci à votre thème :

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: right;
}

Je ne pense pas qu’il sera converti en ceci :

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: left;
}
12

Je suis d’accord avec vous, j’ai toujours peur d’être confus en utilisant le code ci-dessus :confused:

Des suggestions ?

13

Connaissez-vous un exemple de thème qui ne fonctionne pas avec RTL ? Si oui, publiez un lien vers le thème ici et je testerai ma théorie et j’expliquerai ce qui ne va pas après l’avoir testé.

Edit : Voici une explication du problème :

Pour les fichiers CSS qui se trouvent dans la base de code principale de Discourse, le CSS RTL est créé en « inversant » la plupart des règles CSS qui dépendent de la direction de la mise en page du site. Par exemple, padding-left est inversé en padding-right. Ceci est fait avec la gemme RTLcss : GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

Le problème est que les thèmes Discourse ne voient pas leurs règles CSS inversées. Cela signifie que si un thème a des règles CSS qui spécifient une direction, la direction sera la même lorsqu’une langue RTL est utilisée que lorsqu’une langue LTR est utilisée. Voici un exemple mineur :

Lorsque le thème est utilisé avec une interface RTL, padding-left: 8px; n’est pas inversé en padding-right: 8px;. Cela cause un problème mineur d’alignement. Je suis sûr qu’il existe des exemples de problèmes plus importants lorsque les thèmes sont utilisés avec une langue RTL.

Il en va de même pour tout CSS que vous ajoutez à un thème Discourse par défaut dans l’éditeur de thème. Voici un exemple utilisant le code de ce sujet : Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Voici une règle de ce CSS qui définit une direction :

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // ceci doit être changé
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Avec une locale RTL, voici le problème :

image
image863×676 57.5 KB

Si cette règle se trouvait dans un fichier CSS principal de Discourse, left: 0; serait automatiquement converti en right: 0; lorsqu’une langue RTL serait sélectionnée. Comme le CSS est ajouté à un thème, vous devez le modifier manuellement comme suit :

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // changé à la bonne position pour les mises en page RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse ajoute une classe rtl à la balise html lorsqu’une mise en page RTL est utilisée. Les développeurs de thèmes pourraient utiliser cette classe pour faire fonctionner leurs thèmes à la fois pour les mises en page LTR et RTL. Cela fonctionne, et je pense que c’est correct, mais peut-être que la déclaration left: auto n’a pas besoin d’être là.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Corriger le positionnement pour les mises en page rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

Je ne suis pas sûr si les développeurs devraient adopter cette approche avec leurs thèmes. C’est chronophage et pourrait entraîner des erreurs et des problèmes de maintenance. Peut-être que Discourse pourrait compiler certains thèmes et envisager de fournir une version RTL. Cela pourrait valoir la peine de tester cette approche avec quelques-uns d’entre eux :

require "rtlcss"

Rtlcss.flip_css("theme_css")

Ceci était censé être une réponse courte :slight_smile: Si ce que j’ai écrit est correct et n’a pas été traité dans un autre sujet, peut-être qu’il devrait être déplacé vers un nouveau sujet.

14

Ces Theme component pourraient faire ce que vous voulez. Ou servir de bonne base pour regarder le code et trouver des idées.

« Modern Category + Group boxes » tel qu’utilisé dans le thème Air fonctionne bien.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB