Can it be done with CSS? Grouping categories on category page

Dev
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.