Style de messages compact

Bonjour,

Le style de message par défaut de Discourse en 2022-01 est trop volumineux, distrayant et gaspille de l’espace à mon avis. Je suggère 2 corrections :

  1. Les contrôles de message peuvent être placés de manière plus compacte et précise - regardez mon croquis, j’aime surtout les designs v2 et v4.
  2. Supposons que certains boutons doivent toujours être affichés sur mobile comme : [Likes, Edit, Answer, …more], mais pour le bureau (Win/Mac/Lx), il est possible d’afficher toujours uniquement [Likes, Edit] et de n’afficher les autres contrôles qu’au survol de la souris sur chaque message.

PS Placer les Likes de l’autre côté du message (extrêmement loin, loin, loin :smiley:) est une décision consciente - cela réduira considérablement les “likes pour rien”, “likes pour sourire”, “likes pour plaisanter”, “likes pour wow je te revois”, “likes à cause de ta propre bonne humeur”, etc. des likes inutiles et non objectifs qui sont maintenant utilisés trop souvent sans aucun sens réel.

Quelqu’un peut-il m’aider à créer un tel style, s’il vous plaît ?

1 « J'aime »

Salut, @GVG !
J’ai ces idées pour résoudre ton problème :

FAQ

1. Solution initiale

  • Tu peux changer le style de Discourse avec les userstyles.

2. Pourquoi utiliser les user styles ?

  • “Personnalise n’importe quel site web pour lui donner l’apparence et la sensation que tu veux.” - https://userstyles.org/

3. Comment cela peut-il résoudre mon problème ?

  • Tu peux définir un style CSS pour rendre ce message compact dans Discourse.

4. Avantages ?

  • Il existe déjà des styles personnalisés de messages compacts, tu peux les adapter à Discourse si tu veux.
  • Les userstyles sont faciles à faire et à implémenter pour toi.
  • Si c’est attrayant et viable, peut-être que Discourse adoptera ce style comme officiel.
  • Cela fonctionne directement dans le navigateur et tu peux partager ce style avec d’autres.

5. Inconvénients ?

  • Si tu désactives le style visuel, tu n’auras pas de message compact.
  • Des connaissances en CSS et JS sont nécessaires pour manipuler le site.

6. Idée ? Mon opinion ?

  • Je pense que ton idée peut être appliquée en utilisant les userstyles ou en créant un thème personnalisé pour Discourse.

7. As-tu des idées moins compliquées ?

  • Crée un thème et personnalise-le avec tout ce dont tu as besoin, comme cette idée de message compact.

8. Références ?

Sans avoir à déplacer les icônes et les menus (en plus, il y a d’autres éléments qui ne sont pas affichés dans vos captures d’écran, comme les comptes d’édition, la mention à qui nous avons répondu, etc…), vous pouvez toujours travailler sur les marges pour commencer :

Par défaut :

.post-menu-area {
    margin: 20px 0;
}

Personnalisé :

.post-menu-area {
    margin: 0;
}

Comparaison :

Déplacer les icônes et les boutons d’action n’est pas toujours trivial et pourrait nécessiter un travail plus approfondi.

2 « J'aime »

@Canapin qu’en penses-tu de mon idée de userstyles ? la trouves-tu mauvaise ? est-ce une bonne idée ?

  • J’aimerais connaître ton avis, car à partir de ce code, nous pouvons créer un userstyles personnalisé pour Discourse

Les userstyles ne fonctionnent que côté client et généralement par site (j’utilise des userstyles et j’en ai créé quelques-uns).

Si quelqu’un souhaite suggérer des améliorations à l’apparence générale de Discourse, toute suggestion peut être faite dans UX, et si personne ne crée de composant de thème ou n’inclut les changements souhaités dans Discourse, tout utilisateur peut créer sa propre solution, je suppose. Qu’il s’agisse d’un composant de thème s’ils sont administrateurs ou d’une solution côté client s’ils ne le sont pas, avec leur propre CSS à partir de n’importe quel plugin de navigateur qui leur plaît.

Mais alors, ce n’est plus vraiment une discussion orientée Discourse, je suppose.


@GVG jetez un œil à cette discussion connexe, elle pourrait vous intéresser :

2 « J'aime »

NON, votre message ressemble à une publicité spam classique de votre service Web.

Merci, mais : a) je peux réduire les marges moi-même ; b) ce n’est PAS suffisant, car ces éléments actifs gaspillent et créent trop d’espace. L’objectif principal est donc de supprimer le bouton de contrôle du message de son emplacement actuel pour le placer ailleurs, où il gaspillera beaucoup moins d’espace.

@GVG

NON, votre message ressemble à une publicité classique de spam pour votre service web.

    1. Désolé :frowning: mon intention était de faire des personnalisations côté client de Discourse avec des userstyles - cela fonctionnerait si vous n’aviez pas besoin de créer un thème. Je pense que votre idée est très valable - je voulais juste vous aider avec un mvp - produit minimum viable - je voulais que tout le monde ressente l’expérience utilisateur avec des user styles sans avoir nécessairement à développer un plugin ou un thème
    1. J’y ai pensé car c’est quelque chose que je fais sur beaucoup de sites web quand je veux personnaliser
    1. Les liens qu’ils ont postés étaient des références à ce que j’ai recherché, lu
    1. Si cela ne vous a pas aidé, je m’en excuse. J’ai fait une erreur.

@Canapin

  1. J’ai trouvé ce que vous avez dit très intéressant, mais
  • mon intention était de faire des personnalisations côté client de Discourse avec des userstyles - cela fonctionnerait si vous n’aviez pas besoin de créer un thème.
  • Je voulais juste aider avec un MVP - produit de valeur minimale - je voulais que tout le monde ressente l’expérience UX avec des userstyles sans avoir nécessairement à développer un plugin ou un thème.
  • Par exemple, il existe ce dépôt appelé refined github, c’est un endroit où vous publiez des améliorations pour github - il existe même une extension dans le navigateur pour rendre cela possible.
    1. Mon idée serait similaire à cette idée de ce dépôt. Peut-être, pourrions-nous créer un “refined-discourse” - un fichier userstyles.css qui contiendrait diverses améliorations visuelles comme un MVP. Ainsi, la communauté pourrait voir ce qui est le mieux et ce qui a du sens.
    2. Ce serait vraiment cool, de voir les ajustements à faire même sans avoir nécessairement à implémenter ou créer un thème ou un plugin.
    3. J’ai pensé à cela en pensant que l’idée des messages compacts était vraiment bonne, j’ai pensé à cela, nous pouvons personnaliser cela avec des userstyles - Ce serait un moyen facile.
    4. Ce serait ce que j’appelle l’expérience “Magicien d’Oz”. - Vous n’auriez pas besoin de passer beaucoup de temps à développer votre idée si vous créez un userstyles.css.
    • Expérience Magicien d’Oz : Dans le domaine des interactions homme-machine, une expérience Magicien d’Oz est une expérience de recherche dans laquelle des sujets interagissent avec un système informatique que les sujets croient être autonome, mais qui est en réalité exploité ou partiellement exploité par un être humain caché.
      • Les gens pourraient voir l’UX/UI améliorée sans avoir besoin d’un thème ou d’un plugin.
      • Pour ceux qui utilisent des userstyles, cela pourrait sembler être un thème ou un plugin - mais la vérité est que ce n’est pas le cas.
      • cela ressemble à une idée pour un MVP - produit de valeur minimale.
  1. Est-ce une mauvaise idée ?
  • c’était la dernière question, si vous pouvez être satisfait de votre point de vue sur cela.
  • Je veux plus de retours ;D

Référence

Avez-vous réfléchi à la manière dont cela fonctionnerait pour les publications plus longues ? Ensuite, vous la lisez et vous devez faire défiler vers le haut pour l’aimer et faire défiler à nouveau vers le bas pour lire la publication suivante.

2 « J'aime »

Logiquement d’accord, c’est un bon argument contraire, mais pas très bon, parce que :

  • J’aime surtout le style v4 - quand les contrôles du message apparaissent à droite du message, donc verticalement ils peuvent être placés « aussi bas que possible - à la fin du message et en bas de l’écran ». Le panneau de contrôle peut même voler dynamiquement verticalement à chaque endroit vertical du message le plus proche de la position actuelle de la souris ! :wink: Donc ce n’est pas un problème.
  • La plupart des utilisateurs qui écrivent et lisent de longs messages - pour les réponses utilisent des citations de texte exactes, ou peuvent toujours répondre au sujet lui-même - donc le bouton « Répondre » n’est pas très nécessaire.
  • Comme je l’ai dit précédemment à propos de « pour mobile » - en raison de l’absence d’espace libre sur le côté droit et des écrans tactiles - les boutons de contrôle principaux doivent toujours être affichés et à des endroits standard - cela semble être la meilleure conception pour les écrans mobiles étroits verticalement.
  • Vous pouvez toujours préférer la v3 où les contrôles principaux du message restent en bas ou quelque chose de similaire.

Donc, si vous préférez garder les contrôles du message en bas - c’est OK, mais je vous demande quand même d’aider à minimiser tout l’espace vertical libre au-dessus et en dessous d’eux et d’afficher les contrôles (sauf J’aime/Modifier) uniquement au survol de la souris (pour les ordinateurs de bureau).

1 « J'aime »

Pas besoin de quoi que ce soit de tiers pour personnaliser Discourse sans tracas.

Vous pouvez le faire ici https://theme-creator.discourse.org/. C’est à cela qu’il sert.

Vous pouvez créer des thèmes depuis votre menu de profil : https://theme-creator.discourse.org/my/themes

Toutes les apparences des composants du forum sont référencées ici : https://theme-creator.discourse.org/styleguide/

Et pour le style du message lui-même : https://theme-creator.discourse.org/styleguide/organisms/post

Les modifications CSS de vos thèmes nouvellement créés sont appliquées en temps réel, pas besoin de recharger les pages.

Plus d’infos :


Pouvez-vous préciser ? Nous demandez-vous d’être créatifs et de suggérer d’autres idées, ou de vous écrire du CSS ?

2 « J'aime »