Détails sur les changements de style de sujet - Commentaires

[chapoi]

[quote=“Jarek Radosz, post:28, topic:285364, username:cvx”]
(et ce n’est pas la même icône chevron ? :yeux:)
[/quote]Vous n’avez pas tort, mais la faute incombe à la manière différente dont ces composants sont configurés, l’un utilisant le d-icon et l’autre ne s’y prêtant pas pour le moment. J’aimerais voir cela changer, alors n’hésitez pas à aider si vous savez comment faire.

[quote=“Jarek Radosz, post:16, topic:285364, username:cvx”]
L’élément bouton/résumé prend beaucoup plus de place (auparavant, c’était un élément semi-en ligne)
[/quote]Avec le nouveau style, il faudra plus d’espace, mais je suis d’accord pour dire que le rembourrage actuel est excessif.

[quote=“Jarek Radosz, post:28, topic:285364, username:cvx”]
S’ajoute également au point 2.
Concernant la direction vers laquelle pointe l’icône : étant donné qu’elle agit comme un interrupteur, ne serait-il pas logique de l’inverser pour qu’elle indique l’état actuel plutôt que l’action/l’état futur (cela s’applique également au bouton « Réponses »)
[/quote]C’est un débat permanent entre les concepteurs depuis la création de l’interrupteur. Il n’y a pas de bonne ou de mauvaise réponse.

---

C’était l’une des idées de la session de conception que j’ai personnellement beaucoup appréciée. Elle résout (certaines des) remarques de Sam et cvx. Je vais essayer cela dans la prochaine itération.

[mcwumbly (Dave McClure)]

@chapoi

C’était l’une des idées de la session de conception que j’ai personnellement beaucoup appréciée. Elle résout (certaines) remarques de Sam et Cvx. Je vais essayer cela lors de la prochaine itération.

mes réflexions jusqu'à présent...

Ça me semble très bien !

[j127]

Je pense que le chevron serait mieux à gauche. Je pense que la plupart des gens ne le verront pas à droite. Il ressemble à du texte normal (un peu comme un bloc de code) à moins que la souris ne passe dessus. Je l’ai presque manqué.

[cvx (Jarek Radosz)]

(14. ) L’ajout récent d’un gestionnaire de clics signifie que cliquer sur un lien, utiliser le bouton copier le code, tenter d’agrandir une image, ou même essayer de sélectionner du texte entraînera la fermeture du bloc de détails…

[gerhard (Gerhard Schlager)]

@j127

Je pense que le chevron serait mieux à gauche. Je pense que la plupart des gens ne le verront pas à droite.

Je suis tout à fait d’accord avec cela. J’ai (presque) manqué de lire plusieurs blocs de détails ces derniers jours. Je pense que c’est parce qu’ils ressemblent à des blocs de code à première vue.

ceci n'est pas du code

vide

ceci est du code

[chapoi]

@cvx

L’ajout récent d’un gestionnaire de clics signifie que cliquer sur un lien, utiliser le bouton copier le code, tenter d’agrandir une image, ou même essayer de sélectionner du texte entraînera la fermeture du bloc de détails…

Étrange, cliquer sur un lien fonctionne pour moi. Il ferme les détails mais le lien s’ouvre aussi. Je n’ai pas essayé les autres scénarios. Et je suis d’accord qu’il pourrait bénéficier d’un travail JS plus raffiné

Concernant la position du chevron, @jordan.vidrine qu’en penses-tu ?
Dois-je faire une autre itération ? Peut-être comme je l’avais initialement en tête, avec le triangle régulier au lieu du chevron et seulement un fond lorsqu’il est ouvert ?

[jordan.vidrine]

@chapoi

Peut-être comme je l’avais imaginé à l’origine, avec le triangle régulier au lieu du chevron et seulement un fond lorsqu’il est ouvert ?

Je pense que le chevron devrait toujours être utilisé, mais le positionner à gauche semble être une bonne idée.

[jordan.vidrine]

@cvx

L’ajout récent d’un gestionnaire de clics signifie que cliquer sur un lien, utiliser le bouton copier le code, tenter d’agrandir une image, ou même tenter de sélectionner du texte entraînera l’effondrement du bloc de détails…

Faites-vous référence à autre chose ? Nous n’avons pas ajouté de gestionnaire de clics ici.

[cvx (Jarek Radosz)]

Il y avait un gestionnaire. Charlie l’a supprimé aujourd’hui dans 2c941c4.

[jordan.vidrine]

Ha ! Wow, je me demandais ce qui faisait ça. Droit dans le mille et je ne l’ai pas vu.

[chapoi]

Oui, j’ai vraiment aimé l’idée de pouvoir survoler n’importe où > mettre en surbrillance > cliquer pour fermer, au lieu de seulement pouvoir cliquer sur la partie résumé, mais j’avais négligé la propagation des autres clics

[Moin]

Il est également très facile de manquer des détails dans les citations, car la surbrillance de l’arrière-plan est presque invisible et le chevron est éloigné du texte

@sam

Un exemple de la balise details utilisant BBCode :

abc

testing 123 123
123

Un exemple de la balise details utilisant HTML :

...

Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content...

[awesomerobot (Kris)]

Quelques réflexions pointilleuses sur la dernière itération…

La flèche devrait-elle être alignée sur la ligne de base plutôt que centrée ? Cela me semble mieux que de centrer sur des exemples multilignes… mais cela peut être subjectif :

center

baseline

le padding devrait-il correspondre aux citations ? le haut semble un peu serré pour le moment

si nous ajoutons du padding à l’ensemble du conteneur, nous devrions peut-être essayer de supprimer tout padding du dernier élément… cela pourrait être trop délicat car nous avons de nombreux types de contenu… mais peut-être quelque chose comme :

details > :last-child {
  padding-bottom: 0;
}

Je suis d’accord que nous devrions utiliser une nuance plus foncée lorsque cela se trouve dans une citation, afin que l’arrière-plan ne soit pas perdu

Summary

This text will be hidden

Je pense que nous pourrions probablement avoir une sorte de variable qui peut aider à cela… si details avait l’arrière-plan défini par quelque chose comme

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

alors une citation peut le remplacer… peut-être pourrions-nous même avoir une variable générique “doit être plus foncée” dans une citation ? je ne me souviens pas si nous avons d’autres situations comme celle-ci…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg);
}

[chapoi]

@awesomerobot

baseline

100% ça - sinon c’est juste une erreur

[jordan.vidrine]

@awesomerobot

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg);
}

J’aime utiliser quelque chose comme rgba(var(--primary-rgb),0.25) à cette fin car cela rend simplement l’arrière-plan actuel de l’élément dans lequel il est inclus un peu plus sombre.

[sam (Sam Saffron)]

Dans l’ensemble, j’ai l’impression que la dernière itération est très, très proche d’être prête à être expédiée

Un petit détail que je ne suis pas sûr qu’il soit résoluble :

Ce n’est en aucun cas un blocage, mais le panneau gris vous fait penser que vous regardez une seule entité.

[chapoi]

Oui, je suis sûr que nous pouvons le résoudre avec peut-être une bordure ou quelque chose pour le rendre plus clair. J’y jetterai un œil aujourd’hui.

[angus (Angus McLeod)]

Dans l’ensemble, j’aime bien. Cela dit, cette suggestion a retenu mon attention.

@awesomerobot

Peut-être un style complètement différent ?

Essayer de choisir l’arrière-plan d’un élément de texte ressemble parfois à la recherche de la nuance parfaite de gris clair.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

Mais il semble que vous soyez proche, et, dans l’ensemble, j’aime bien.

[chapoi]

J’ajoute le même assombrissement de l’arrière-plan pour le bloc de code que pour la citation\n\n

\n\nCela devrait résoudre le problème @sam

[cvx (Jarek Radosz)]

Deux autres choses (15. et 16. si vous voulez )

• La zone cliquable réelle de l’élément de résumé est plus petite que l’élément qui change le curseur et se met en surbrillance au survol
• En raison de cette couleur de fond au survol et du changement qui suit lorsque vous développez un élément – il y a un bref flash de couleur de fond lors du développement d’un élément

edit :

17. Une divergence entre un message rendu et l’éditeur :
    
    
    
    vs