Moderniser le thème Foundation

L’équipe de conception est en train d’apporter de petits mais puissants changements/ajustements au thème foundation pour s’aligner un peu plus étroitement sur les normes web modernes. Pour voir ces changements en direct sur meta, rejoignez ce groupe :

https://meta.discourse.org/g/modernized-foundation

Nous allons rendre ce changement effectif via la nouvelle fonctionnalité Upcoming Changes disponible dans Discourse. Cela permettra aux propriétaires de site d’activer les changements pour tout groupe qu’ils spécifient, afin de tester le déploiement des changements sans craindre de potentiellement casser les thèmes ou les personnalisations actuelles.

Qu’est-ce qui va changer ?

La hauteur de l’en-tête diminue

Nous avons diminué la taille de l’en-tête ainsi que celle de certaines icônes et de l’avatar pour mieux utiliser l’espace à l’écran.

Boutons par défaut

Nous passons d’un arrière-plan de bouton gris par défaut à un arrière-plan transparent / « secondaire » avec une bordure.

  • suppression de l’arrière-plan gris
  • ajout de bordures
  • la couleur de l’icône correspond à la couleur du texte
  • les boutons ont maintenant une hauteur définie

Bouton Créer un nouveau sujet sur la page de liste des sujets

Correspondance avec Horizon et attribution d’une couleur d’arrière-plan « CTA » de tertiary

Suppression de nombreux arrière-plans gris

Liste des sujets

  • suppression de la bordure supérieure épaisse de 3 px
  • diminution de la taille de la police des données d’en-tête de tableau
  • couleur cohérente pour les éléments de données de tableau
  • changement de valeur de couleur pour lire/non lu
  • légère augmentation de l’épaisseur de la police pour les éléments non lus

Catégories

  • alignement du texte à gauche
  • suppression de la bordure colorée épaisse à gauche
  • badges légèrement arrondis
  • bordure plus fine sur la boîte

Barre de navigation

  • Les pilules de navigation sur les pages de liste de sujets auront la même hauteur que les boutons dans cette zone
  • texte et icône de couleur plus foncée sur le kit sélectionné

Barre latérale

  • la couleur de l’icône et du texte correspondent
  • texte et icônes plus foncés
  • arrière-plan « actif » plus clair
  • graisse de police active plus prononcée

Bannière de bienvenue

  • espacement équilibré
  • variables ajoutées pour un alignement gauche/droite/centre plus facile via la personnalisation
  • graisse de police de l’en-tête diminuée
  • diminution de la taille de la police du sous-titre

Calendrier

  • arrière-plan gris supprimé des « boutons »
  • utilisation du gris uniquement pour signifier « actif »
  • passage au style de bouton « transparent avec bordure »

Menus déroulants

  • ajout de rembourrage au conteneur du menu déroulant
  • la hauteur, le rembourrage, l’espacement correspondent maintenant aux éléments de la barre latérale
    • unification des « listes cliquables »
  • la bordure hérite de la variable --d-border-radius

Nouvelles variables

Certains des changements ici seront introduits via des variables supplémentaires ajoutées au cœur.

Alignement de la bannière de bienvenue

L’alignement de la bannière de bienvenue pourra désormais être modifié via :

// par défaut
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// personnalisé
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Hauteur du bouton

Nous aurons désormais une hauteur de bouton définie via :

// par défaut
  --button-height: var(--space-8);

Lissage des polices

Nous faisons déjà cela dans Horizon, il est logique de l’intégrer à foundation.

// nouveau par défaut
--webkit-font-smoothing: antialiased;
29 « J'aime »

le menu déroulant du bouton “gist” a une barre de défilement (overflow sur le fk-d-menu peut-être ?), et n’a probablement pas besoin du même min-width: 200px que les autres classes dropdown-menu similaires.

edit : oubliez, déjà corrigé :smiley:

6 « J'aime »

Je peux voir le thème de fondation moderne, mais pourquoi ai-je toujours l’ancienne disposition des catégories ?

Je pense que Meta n’utilise pas les « Boîtes avec sous-catégories » mais les « Catégories uniquement » dans leur paramètre de site Style de page de catégorie de bureau.

1 « J'aime »

Oups, j’ai supposé que les captures d’écran avaient été prises sur meta, mais je n’ai même pas pensé à vérifier.


Petit comportement bizarre. Sur le thème normal, lorsque nous relâchons le bouton de la souris sur , cela déclenche instantanément l’animation d’affichage ou de fermeture de la barre latérale.

Sur le nouveau thème, lorsque nous relâchons le bouton de la souris sur lorsque la barre latérale est fermée, il y a une fraction de seconde d’attente avant que l’animation de glissement ne soit déclenchée. Cela ne se produit pas si nous cliquons sur l’icône lorsque la barre latérale est visible.


Puis-je quitter le groupe pour comparer les changements avec l’ancien thème ? Je ne vois pas l’option quitter.

2 « J'aime »

oh oui, j’ai corrigé ça… vous devriez pouvoir partir à volonté maintenant

4 « J'aime »

Pourriez-vous me permettre de quitter le groupe @modernized-foundation.
Modification : Maintenant, après avoir quitté le groupe, je peux ajouter une capture d’écran de comparaison du nouveau bouton de sujet.
image

Il semble que certaines couleurs d’icônes ne fonctionnent pas bien avec la palette wcag.
image

Et, par exemple, le sélecteur de groupe en haut à gauche de la page du groupe ne prend pas vraiment en charge 2 lignes.

Voici à quoi cela ressemble lorsque je me déconnecte.

2 « J'aime »

J’aime la plupart des changements. Ils sont subtils. Certains, je ne vois même pas la différence à moins de regarder les valeurs CSS :smile: (couleurs des icônes et du texte de la barre latérale, couleurs des sujets lus et non lus)

Avant / Après
image image

J’aime le bouton “nouveau sujet” mis en évidence. Je l’avais personnalisé comme ça sur mon forum il y a longtemps (jusqu’à ce que mon code casse et que je ne prenne pas la peine de le réparer).


Avant / Après


J’aime aussi ça ; Au moins sur la palette sombre, le bleu foncé sur le gris foncé était un accord étrange.


Avant / Après

Bien que j’aime le nouveau style de bouton, j’ai l’impression qu’ils manquent de contraste avec l’arrière-plan dans certaines zones, en particulier le pied de page du sujet.
Cela semble désordonné. Les boutons n’ont pas l’air d’appartenir à une section spécifique, contrairement à la version précédente. Ils sont juste là, en quelque sorte… Je ne sais pas si ça a du sens.

4 « J'aime »

Cela semble fonctionner sur l’activité de lecture et de sujets sur certaines tailles d’écran

Mais une fois que je réduis un peu la largeur, « Replies » et « activity » semblent trop grands (c’est aussi un problème sur /latest)

Il y a un problème similaire avec « updated » et « activity » sur /my/activity/bookmarks

Un autre exemple où la couleur de l’icône et du texte ne correspondent pas est le bouton d’extension sur mon profil

Voici à quoi cela ressemble lorsque je quitte le groupe :

Je pense que vous n’avez pas mentionné que non seulement la taille de la police des en-têtes de tableau, mais aussi la taille des nombres dans les colonnes Replies, Views et Activity, semblent être diminuées.

5 « J'aime »

Merci beaucoup pour l’avant/après. Je pensais que cela manquait dans le message initial.

Ces deux changements semblent étranges : le côté après semble beaucoup moins contrasté et pourrait causer des problèmes d’accessibilité (A11y), non ?

Je me dirige vers le nouveau groupe pour un essai !

2 « J'aime »

Le mot « lien » dans la carte de sujet n’est que partiellement affiché après que j’ai rejoint le groupe :

Capture d’écran prise sur Add link to sidebar category setting to new admin menu in categories section of the sidebar

Et le texte dans cette modale est difficile à lire au survol. Je pense que le contraste était meilleur avant

J’attends avec impatience cette modification du style par défaut, quand sera-t-elle publiée approximativement ?

1 « J'aime »

L’entrée de recherche et le bouton de soumission sont écrasés !

squish!

édition : sur mobile uniquement

3 « J'aime »

Tous les retours/découvertes de bugs jusqu’à présent sont excellents. Merci pour les mises à jour.

4 « J'aime »

C’est une bonne remarque. Je pense que le nouveau style de bouton est également assez agréable, mais pour une raison quelconque dans cette section (avec autant d’entre eux ensemble), il ne semble pas tout à fait correct.

4 « J'aime »

La police des messages non lus est plus épaisse que celle des sujets lus.
Cela ne m’avait pas frappé sur ordinateur, mais je le remarque sur mobile.

Cela me semble un peu trop prononcé.

J’aimais le fait que Discourse opte principalement pour un simple changement de couleur, ce qui semblait plus élégant que la différence de graisse canonique que nous voyons sur de nombreux logiciels de forum.

Maintenant, nous avons les deux. La différence est subtile, mais je préférerais qu’il n’y ait qu’un changement de couleur :paintbrush:

3 « J'aime »

La dernière série de changements devrait être bientôt en ligne à partir de la PR ici :