La mise en page des boîtes de catégories ne correspond pas à la mise en page en liste

Voici quelques captures d’écran :

  1. Catégories par défaut avec sujets en vedette

    Au passage, les logos ici sont vraiment un peu trop grands, ce qui crée beaucoup d’espace gaspillé — je préfère les réduire à une hauteur de 75 px.
  2. Boîtes par défaut avec sous-catégories

    Remarquez que certaines de mes sous-catégories ont des images de logos définies et qu’elles s’affichent.
    La disposition gaspille beaucoup d’espace : le logo de catégorie est limité à 40 px, mais il est centré au-dessus du titre. Les logos des sous-catégories ne respectent pas leur rapport d’aspect (les calculs de --aspect-image ne fonctionnent pas et sont de toute façon inutiles ; si vous définissez simplement une hauteur, le rapport d’aspect sera respecté s’il y a de la place.).
    Les logos des sous-catégories sont également un peu trop grands, ce qui force un espace entre les lignes.
  3. Ma première modification

    Le logo flotte à gauche du titre, qui est centré dans l’espace restant.
    Les sous-catégories s’affichent une par ligne avec une bande de couleur et une icône de cadenas, mais les logos des sous-catégories ne sont pas affichés (ce qui est cohérent avec la configuration par défaut).
    Dans une boîte, je ne pense pas qu’il soit logique d’essayer de caser deux courts titres de sous-catégories sur une seule ligne s’il y a de la place ; cela semble mieux avec une ligne séparée pour chacune, même si d’autres pourraient préférer les serrer s’il y a beaucoup de sous-catégories.
  4. Mes modifications finales :

    Les logos des sous-catégories s’affichent à 18 px de hauteur avec le bon rapport d’aspect à la fin du titre. C’est optionnel et ils pourraient être positionnés entre l’icône de cadenas et le texte, mais je préfère que les bandes et les titres soient alignés.
    Il serait également logique d’avoir l’option d’utiliser les logos des sous-catégories dans les autres dispositions par défaut, mais je n’ai pas pris la peine de les modifier.
    Ici, j’utilise également le composant Category Icons (une icône n’est définie que sur la sous-catégorie Niki Test), donc la position de la bande est légèrement décalée pour aligner l’icône avec elle, et la couleur de l’icône correspond à celle de la bande, ce qui l’utilise efficacement à la place de la bande — mais ce sont des modifications apportées à ce composant, pas au cœur du système.
  5. Enfin, voici comment cela s’affiche lorsque les boîtes de sous-catégories sont montrées au-dessus des sujets de la catégorie parente, si cette option est activée.

    Évidemment, pour le moment, il n’y a pas de catégories enfants à afficher, mais cela devra être pris en compte. De plus, il pourrait être préférable de flotter le logo verticalement lorsqu’il y a un titre vraiment long — ou mieux encore, de simplement garder les titres de catégorie courts !

Il s’agit donc d’un mélange de HTML/text/x-handlebars dans /head pour le thème, remplaçant efficacement “components/categories-boxes”, ainsi que de SCSS. Je suis heureux d’envoyer le code à toute personne compétente pour le tester et l’intégrer sur GitHub.
Cela fonctionne bien pour mon site, mais il peut y avoir d’autres conséquences que je n’ai pas remarquées.

3 « J'aime »