Composant de affichage de boîte de catégorie amélioré

[oca]

thème-discourse-page-accueil-catégorie

J’ai beaucoup travaillé sur une nouvelle page d’accueil category-box pour le forum de ma communauté. Elle est très spécifique à nos besoins et peut donc ne pas être utile pour beaucoup de gens, mais on peut en tirer des idées.

Après/Avant

Notre cas d’utilisation spécifique

Nous avons une communauté qui traite de nombreux sujets larges. Nous fédérons des ONG locales qui ont leurs propres membres, et nous avons des groupes autonomes, chacun effectuant une ou plusieurs actions qu’ils doivent annoncer et qui nécessitent également un espace privé pour en discuter.

Une partie importante de nos membres sont des personnes âgées et toute action nécessitant plus de 3 clics est très difficile pour elles (gérer le niveau de notification de la manière habituelle n’est donc pas réalisable pour elles).

La communauté est assez grande pour que nous ayons besoin d’un système de tri robuste, mais les compétences numériques et la volonté des utilisateurs sont assez faibles, nous devons donc garder quelque chose d’aussi simple et explicite à utiliser que possible.

Organisation des sujets

Les catégories de premier niveau sont utilisées comme hôtes pour les principaux objectifs de la communauté.
Tout sujet qui ne fait pas référence à un groupe appartient à la catégorie de premier niveau la plus proche, et ses points principaux peuvent être étiquetés avec des tags. Un tag est principalement, mais pas nécessairement, contenu dans une catégorie de premier niveau.

Chaque ONG et groupe local fait ses annonces dans une sous-catégorie publique de la catégorie de premier niveau la plus évidemment liée et travaille tranquillement dans une sous-catégorie privée.

Ainsi, un utilisateur peut facilement trouver tout le contenu concernant l’un de nos objectifs principaux (catégorie de premier niveau), un sujet spécifique (un tag qui pourrait être transversal à plusieurs objectifs), un groupe spécifique (une sous-catégorie publique), etc.

Fonctionnalités

• Mettre en évidence chaque catégorie pour les faire sentir comme une section entière du site web.
  • Écrire en gras et ajouter une icône à tout ce sur quoi on peut cliquer, afin qu’il soit plus facile de se concentrer sur les éléments importants.
• Ajouter du contenu supplémentaire pour chaque catégorie :
  • le nombre habituel de messages
  • le sélecteur de niveau de notification
  • un lien « Cliquez ici pour voir tous les messages relatifs à ce domaine » afin d’être extra explicite
• Ajouter des tags liés à cette catégorie
  • ajouter un en-tête pour rendre très explicite le fait que ce sont les thèmes principaux dont nous discutons
  • ces tags sont sélectionnés avec un paramètre de thème
  • l’affichage des tags est conçu de manière à ce qu’ils ressemblent vraiment à des tags, afin que l’utilisateur comprenne de quoi nous parlons lorsque nous utilisons le mot « tag ».
  • note : l’affichage est amélioré par le composant Icône de tag
• Ajouter un en-tête aux sous-catégories pour rendre extra explicite le fait que ces catégories sont pour les annonces, et un autre pour rendre extra explicite le fait que ces sous-catégories sont privées (oui, il y a un cadenas et tout utilisateur de niveau moyen comprend. Mais…)
  • note : l’affichage est amélioré par le composant Icône de catégorie
• La plupart de ces fonctionnalités sont activables/désactivables.

Installation

Note : ce composant est toujours en cours de développement. Je le mets encore à jour, corrige des bugs CSS que j’ai propagés ailleurs, etc. Veuillez faire preuve de clémence et me faire savoir si quelque chose semble étrange.

Installez le composant comme d’habitude. Comment installer un thème ou un composant de thème ?
Dépôt : https://framagit.org/oca/discourse-theme-category-homepage.git

Feuille de route pour les améliorations futures

Corriger la très grande quantité de bugs CSS.
Corriger le problème qui force l’affichage des séparateurs/en-têtes pour les sous-catégories même s’il n’y a pas de sous-catégorie publique ou privée.
Réaliser une page de catégorie aussi agréable que possible affichant les boîtes de sous-catégories et les sujets.
Mettre à jour tout dès que l’équipe Discourse décidera que les sous-sous-catégories pourraient être une chose (je sais, espérons…)

Je suis ouvert aux suggestions de nouvelles fonctionnalités, mais je ne les ajouterai à ce composant que si elles servent mon cas d’utilisation très spécifique ou sont très faciles à réaliser. Toute nouvelle fonctionnalité ajoutée sera activable/désactivable.

[HAWK]

@oca

Quelqu’un peut-il ajouter un mode wiki afin que je puisse mettre à jour le premier message si nécessaire et ajouter la balise theme-component ?

Pas de problème, c’est fait.

[torstensson (Per Torstensson)]

Un grand merci pour avoir créé ce super composant, c’est fantastique !

Une question : est-il possible de l’activer avec le paramètre de catégorie « Boîtes avec sujets en vedette » ? Si non, s’agit-il d’une fonctionnalité qui pourrait être implémentée, ou voyez-vous des problèmes potentiels à ce sujet ?

Meilleures salutations, et encore merci infiniment pour ce travail !

[oca]

@torstensson

Une question : est-il possible de l’activer avec le paramètre de catégorie « Boîtes avec sujets en vedette » ? Si non, s’agit-il d’une fonctionnalité réalisable, ou voyez-vous des problèmes potentiels ?

Salut, merci.
Ce n’est pas possible tel quel pour le moment (ce n’est pas la même boîte qui est modifiée), mais c’est tout à fait réalisable facilement. Je peux t’aider à le faire si tu veux discuter par MP, ou je peux y jeter un coup d’œil quand j’aurai un peu de temps. Pour cela, j’aurais besoin que tu me donnes un aperçu de ce que tu souhaites (et comment les éléments seraient affichés).

[torstensson (Per Torstensson)]

Tout à fait compris.

Pour moi, la fonctionnalité déterminante de votre composant est l’ajout de l’icône de statut de notification pour chaque sous-catégorie, ainsi que la manière simple mais puissante de permettre de modifier la largeur des colonnes. Dans mon cas d’usage, rendre ces fonctionnalités disponibles avec l’option « Boîtes avec sujets en vedette » activée répondrait parfaitement à mes besoins spécifiques.

Je suis débutant, mais je serais ravi de tenter de l’implémenter. Je vous remercie pour tout conseil, mais j’examinerai d’autres composants de boîte de catégorie et j’espère pouvoir comprendre comment procéder. J’aurai le temps de m’y pencher dans quelques semaines et je mettrai à jour ce fil si je fais des progrès.

Meilleures salutations.

[oca]

J’ai rencontré des difficultés pour le faire, mais ce n’est finalement pas si difficile.

Dans un composant de thème, modifiez votre composant Handlebars pour inclure ce code :

{{#each categories as |c|}}
  
  ...du contenu avant la cloche...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...du contenu après la cloche...

{{/each}}

Si vous ne savez pas comment faire, le tutoriel de Johani est un excellent « premier endroit où chercher ».

Et si vous trouvez comment faire la même chose avec les tags, faites-le moi savoir ! Je n’arrive pas à trouver comment.

[pmusaraj (Penar Musaraj)]

@oca J’ai apporté une modification récente au cœur du système qui provoque l’échec de la compilation du SCSS de ce composant de thème. La correction est très simple : il faut supprimer ces deux lignes du fichier de style :

@import "common/foundation/variables";
@import "theme_variables";

(La deuxième ligne provoque une erreur de compilation SCSS car ce fichier n’existe plus. Cependant, les deux lignes sont inutiles, car les variables du cœur et du thème sont désormais injectées avant la compilation de tout fichier SCSS.)

[oca]

Merci pour les explications.

C’est retiré.

[Fma965]

Beau travail !, Cela ne fonctionne pas sur mobile ?

CyanLabs Official Community

Mobile

Bureau

[Fma965]

J’aimerais bien trouver comment faire fonctionner ça sur mobile, ça a l’air cool sur ordinateur mais si ce n’est pas utilisable sur mobile, c’est un peu inutile, je suis sûr qu’il y a un moyen simple mais je ne sais pas comment, est-ce que quelqu’un a des suggestions ?

[Fma965]

Désolé pour le multipost

J’ai réussi à bricoler Categories Layout Override pour qu’il fonctionne uniquement sur mobile

Ensuite, en utilisant ma version modifiée GitHub - cyanlabs/discourse-categories-layout-override

Je peux maintenant spécifier le remplacement comme categories_boxes

ce qui force ensuite la vue mobile dans la vue requise pour que ce plugin fonctionne

Tablette

Mobile

Évidemment, ce n’est pas une solution idéale, mais elle fonctionne, donc en attendant que quelqu’un ait une meilleure solution, voici une solution de contournement

[hoangphuctran93 (Hoàng Phúc Trần)]

Merci pour la personnalisation du composant de thème « Categories Layout Override », mais pouvez-vous partager avec moi la personnalisation du composant « Enhanced category-box display component » ? J’ai visité votre site Web et j’apprécie votre utilisation de « background-color » pour la classe « category-logo ».

[hoangphuctran93 (Hoàng Phúc Trần)]

Merci pour les récentes personnalisations, cependant avec la récente mise à niveau vers la version 3.2.0.beta 4-dev, le composant de thème n’a pas fonctionné. J’espère également que la personnalisation de l’affichage mobile sera intégrée au cœur de Discourse. Parce que je veux une expérience synchrone du bureau au mobile.

[Fma965]

Malheureusement, je n’ai aucune idée de comment le réparer.

[hoangphuctran93 (Hoàng Phúc Trần)]

Récemment, lors de la mise à niveau vers la dernière version, le composant de thème « discourse theme category homepage » ne fonctionne plus sur mobile et je reçois constamment le message suivant

Voici mon site https://businesslab.vn/categories

[david (David Taylor)]

Salut @hoangphuctran93, j’ai déplacé votre message dans le sujet du composant thématique pertinent (cc @oca)

[stephtara (Stephanie Booth)]

Oh, cela semble être quelque chose qui me serait super utile ! Communauté de soutien active avec une grande variété de sujets, mais des personnes qui resteront probablement dans une petite sous-intrigue du vaste jardin, la littératie numérique plutôt faible pour beaucoup. C’est triste de voir que cela semble cassé, je vais quand même essayer. @oca l’utilises-tu toujours activement de ton côté ?

[hellekin]

Faites attention au tag broken, il va casser.

@stephtara

les personnes qui resteront probablement dans une petite sous-intrigue du grand jardin, la littératie numérique plutôt faible pour beaucoup

J’envisagerais de masquer toutes les catégories par défaut et de préparer des sujets étiquetés #welcome pour donner un aperçu des catégories disponibles. Lorsque vous associez un groupe pour suivre une catégorie, vous pouvez créer une expérience progressive, où les gens peuvent rejoindre des groupes pour désactiver le masquage/découvrir des catégories. Avec très peu de sujets de bienvenue, vous pouvez donner aux lecteurs un aperçu de ce qui est disponible et leur donner le choix de l’endroit où ils veulent participer. Documenter les notifications est également important pour éviter la surcharge d’informations.

[stephtara (Stephanie Booth)]

@hellekin

Faites attention au tag broken, il va casser.

Merci pour l’avertissement, je devrais probablement m’en tenir éloigné alors…

@hellekin

Documenter les notifications est également important pour éviter la surcharge d’informations.

Absolument !

[hellekin]

Vous pourriez essayer d’installer le composant de thème… mais pas sur votre système de production