Régressions liées aux évolutions des styles du privé #4756

Closed
opened 6 months ago by tcharlss · 34 comments
Owner

Merci de rapporter ici les régressions liées aux évolutions des styles du privé.
Pour simplifier je suggère de tout regrouper ici, même les choses concernant les plugins-dist.

Cela concerne principalement les boutons, les formulaires, les boîtes, le bandeau et les choses indirectement liées.
Je m'attaquerai à tout cela après la PR sur les listes d'objets.

Bandeau

Formulaires

  • Formulaire de traduction : tout est décalé.
  • Formulaire de dates : il reste des espacements à corriger.
  • Formulaire instituer : la couleur de fond doit coller aux bords de la boîte.
  • Formulaire editer_liens : problèmes d'espacements et de lisibilité en général.
  • Formulaire editer_url : dans fiche_objet, problèmes d'agencement.
  • Formulaire logo + bigup : le bouton de validation étant caché, le conteneur .boutons visible fait bizarre.

Boutons

  • Unifier les boutons de suppression dans les listes d'objets liés (mots-clés, etc.)
  • Boutons formulaire traitements des images : ajuster couleurs, survol notamment.

Boîtes

  • Boîte auteur : la couleur de fond du champ biographie doit coller aux bords.
  • Boîtes (toutes) : dans une .fiche_objet, régler la marge interne quand il n'y a pas de titre (visible sur la boîte « article proposé pour publication » par exemple).
  • Boîtes erreurs et cie : aligner le picto sur la 1ère ligne de texte quand il n'y a pas de titre.
  • Boîtes proposer : rétabir styles et couleur de fond jaune.
  • Boîtes sous rubriques : code de langue mal placé + picto admin un peu "flottant" + vérifier rtl.

Listes

  • Les titres peuvent dépasser en colonne latérale (.lat) : word-break: break-all (b_b)

Alertes

  • Mieux aligner le bouton de fermeture
Merci de rapporter ici les régressions liées aux évolutions des styles du privé. Pour simplifier je suggère de tout regrouper ici, même les choses concernant les plugins-dist. Cela concerne principalement les boutons, les formulaires, les boîtes, le bandeau et les choses indirectement liées. Je m'attaquerai à tout cela après la PR sur les listes d'objets. ### Bandeau * [X ] « Se déconnecter » passe à la ligne (jean marie : https://pic.infini.fr/qx43U3Cg/ieQnmVC4.png) ### Formulaires * [x] Formulaire de traduction : tout est décalé. * [x] Formulaire de dates : il reste des espacements à corriger. * [x] Formulaire instituer : la couleur de fond doit coller aux bords de la boîte. * [x] Formulaire editer_liens : problèmes d'espacements et de lisibilité en général. * [ ] Formulaire editer_url : dans fiche_objet, problèmes d'agencement. * [x] Formulaire logo + bigup : le bouton de validation étant caché, le conteneur .boutons visible fait bizarre. ### Boutons * [ ] Unifier les boutons de suppression dans les listes d'objets liés (mots-clés, etc.) * [x] Boutons formulaire traitements des images : ajuster couleurs, survol notamment. ### Boîtes * [x] Boîte auteur : la couleur de fond du champ biographie doit coller aux bords. * [x] Boîtes (toutes) : dans une .fiche_objet, régler la marge interne quand il n'y a pas de titre (visible sur la boîte « article proposé pour publication » par exemple). * [ ] Boîtes erreurs et cie : aligner le picto sur la 1ère ligne de texte quand il n'y a pas de titre. * [x] Boîtes proposer : rétabir styles et couleur de fond jaune. * [x] Boîtes sous rubriques : code de langue mal placé + picto admin un peu "flottant" + vérifier rtl. ### Listes * [x] Les titres peuvent dépasser en colonne latérale (.lat) : word-break: break-all (b_b) ### Alertes * [ ] Mieux aligner le bouton de fermeture
Poster
Owner
There is no content yet.
Poster
Owner
There is no content yet.
Poster
Owner
There is no content yet.
Owner

Version cible mise à 4.0

**Version cible mise à 4.0**
Poster
Owner
There is no content yet.
Poster
Owner
There is no content yet.
Owner

Pas certain que ça soit important, mais sur https://www.spip.net/ecrire/?exec=accueil on peut voir que le code de langue des rubriques est tout collé à droite de leur boite, ça mériterait un peu de marge peut-être ?

Pas certain que ça soit important, mais sur https://www.spip.net/ecrire/?exec=accueil on peut voir que le code de langue des rubriques est tout collé à droite de leur boite, ça mériterait un peu de marge peut-être ?
Owner

si tu as des rubriques avec une langue RTL c'est même pire b_b :) (c'est tout foireux)

si tu as des rubriques avec une langue RTL c'est même pire b_b :) (c'est tout foireux)
Poster
Owner

Ah oui j'avais remarqué mais oublié de le noter b_b, je rajoute à la liste.
Le code de langue devrait être collé au texte oui. Et le picto des admins qui se ballade un peu.
Sans vouloir cafter, Arno était passé derrière et a un peu touché au layout, je sais pas ce que ça a changé
Ah ben du coup j'ai cafté :p.

Ah oui j'avais remarqué mais oublié de le noter b_b, je rajoute à la liste. Le code de langue devrait être collé au texte oui. Et le picto des admins qui se ballade un peu. Sans vouloir cafter, Arno était passé derrière et a un peu touché au layout, je sais pas ce que ça a changé Ah ben du coup j'ai cafté :p.
Poster
Owner
There is no content yet.
Poster
Owner
There is no content yet.
Poster
Owner
There is no content yet.

Les variantes de box notice, success etc, ont l'air de ne pas avoir pile le même radius en haut à gauche que les autres de base : si on met inverse+notice par ex, on voit le noir qui dépasse sous le jaune en haut à gauche.

Les variantes de box notice, success etc, ont l'air de ne pas avoir pile le même radius en haut à gauche que les autres de base : si on met inverse+notice par ex, on voit le noir qui dépasse sous le jaune en haut à gauche.
Poster
Owner

C'est plutôt que les .notice, .error et .success n'ont pour l'instant pas été prévues pour être combinées à d'autres (idem en 3.2, cf. image en p.j).
Ça pourrait mais alors il faut définir précisément le périmètre.

C'est plutôt que les .notice, .error et .success n'ont pour l'instant pas été prévues pour être combinées à d'autres (idem en 3.2, cf. image en p.j). Ça pourrait mais alors il faut définir précisément le périmètre.

Bé ça reste des variantes de boites avec juste les choix aplat/ombres etc qui changent. Ça me parait un peu bizarre que ce soit pas le même arrondi quand on est dans le même composant (qu'éventuellement ça soit pas le même radius entre box et button ok, mais là c'est entre box). Ça se voit parce que j'ai testé de combiner, mais même sans, ça me parait à corriger. :)

Cela dit, au moins pour certaines, notamment inverse, ça me parait logique de pouvoir combiner, on peut vouloir inverse pour se détacher + notice ou erreur parce que c'est attention danger. Mais c'est un autre point que l'uniformisation des radius. :)

Bé ça reste des variantes de boites avec juste les choix aplat/ombres etc qui changent. Ça me parait un peu bizarre que ce soit pas le même arrondi quand on est dans le même composant (qu'éventuellement ça soit pas le même radius entre box et button ok, mais là c'est entre box). Ça se voit parce que j'ai testé de combiner, mais même sans, ça me parait à corriger. :) Cela dit, au moins pour certaines, notamment inverse, ça me parait logique de pouvoir combiner, on peut vouloir inverse pour se détacher + notice ou erreur parce que c'est attention danger. Mais c'est un autre point que l'uniformisation des radius. :)
Poster
Owner

C'est pas une histoire de radius différents, ça fait ça quand 2 trucs qui ont le même radius sont imbriqués (quand bien même ils ont la même valeur de radius).
Ça fait pareil de base d'ailleurs, mais ça se voit moins parceque c'est des couleurs claires.

Cela dit, au moins pour certaines, notamment inverse, ça me parait logique de pouvoir combiner

Oui donc voilà, il faut définir lesquelles sont logiques et partir là-dessus.
Parcequ'il y a des combinaisons qui n'ont absolument aucun sens, on peut pas tout prévoir en CSS, il faut définir lesquelles.
Pour l'instant je suis resté grosso-modo sur ce qui était en place en 3.2, ni plus ni moins.

C'est pas une histoire de radius différents, ça fait ça quand 2 trucs qui ont le même radius sont imbriqués (quand bien même ils ont la même valeur de radius). Ça fait pareil de base d'ailleurs, mais ça se voit moins parceque c'est des couleurs claires. > Cela dit, au moins pour certaines, notamment inverse, ça me parait logique de pouvoir combiner Oui donc voilà, il faut définir lesquelles sont logiques et partir là-dessus. Parcequ'il y a des combinaisons qui n'ont absolument aucun sens, on peut pas tout prévoir en CSS, il faut définir lesquelles. Pour l'instant je suis resté grosso-modo sur ce qui était en place en 3.2, ni plus ni moins.

avec le passage en markup fieldset/legend pour les radios, on a mis une classe .label sur les legend concernées (ainsi que dans saisies aussi sur les labels des textarea, etc). Du coup .pleine_largeur du conteneur foire.

a priori, il faudrait doubler le .formulaire_spip .pleine_largeur > label par un .formulaire_spip .pleine_largeur > .label (de même qu'on a un .formulaire_spip .editer label, .formulaire_spip .editer .label).

avec le passage en markup fieldset/legend pour les radios, on a mis une classe .label sur les legend concernées (ainsi que dans saisies aussi sur les labels des textarea, etc). Du coup .pleine_largeur du conteneur foire. a priori, il faudrait doubler le `.formulaire_spip .pleine_largeur > label` par un `.formulaire_spip .pleine_largeur > .label` (de même qu'on a un .formulaire_spip .editer label, .formulaire_spip .editer .label).

Quelque soit la couleur, il semblerait que le fond des boutons de base (sans hover rien) ne soit pas assez foncé dès l'origine, pour l'accessibilité. Avec écrit en blanc dessus, ça fait parfois mal aux yeux.

Quelque soit la couleur, il semblerait que le fond des boutons de base (sans hover rien) ne soit pas assez foncé dès l'origine, pour l'accessibilité. Avec écrit en blanc dessus, ça fait parfois mal aux yeux.

Autre point : les boutons d'ajout d'un motclé, à droite de leur input, ne sont pas alignés verticalement avec leur input.
Cf copie d'écran.
On voit aussi que leur input est d'une hauteur différente selon que c'est un select ou un input text.

Autre point : les boutons d'ajout d'un motclé, à droite de leur input, ne sont pas alignés verticalement avec leur input. Cf copie d'écran. On voit aussi que leur input est d'une hauteur différente selon que c'est un select ou un input text.

Autre point : les logos webp ne sont pas bien réduits et débordent de leur colonne (constaté sur 2 sites, dont contrib). Les documents webp n'ont pas de vignette non plus donc peut être ya un autre manque mais faudrait au moins que les logos ne débordent pas de leur colonne.

Autre point : les logos webp ne sont pas bien réduits et débordent de leur colonne (constaté sur 2 sites, dont contrib). Les documents webp n'ont pas de vignette non plus donc peut être ya un autre manque mais faudrait au moins que les logos ne débordent pas de leur colonne.

voilà surtout le screenshot

voilà surtout le screenshot
Owner

JLuc - a écrit :

Autre point : les logos webp ne sont pas bien réduits et débordent de leur colonne (constaté sur 2 sites, dont contrib). Les documents webp n'ont pas de vignette non plus donc peut être ya un autre manque mais faudrait au moins que les logos ne débordent pas de leur colonne.

Chez moi avec SPIP 4.0.0-beta GIT [master: 53415e37] le logo ne déborde pas de sa boite quand j'utilise l'image en question, par contre j'ai pu vérifier (mais pas sur contrib) et le support de webp est bien actif pour GD sur mon serveur de test, peut-être que la différence vient de là.

JLuc - a écrit : > Autre point : les logos webp ne sont pas bien réduits et débordent de leur colonne (constaté sur 2 sites, dont contrib). Les documents webp n'ont pas de vignette non plus donc peut être ya un autre manque mais faudrait au moins que les logos ne débordent pas de leur colonne. Chez moi avec SPIP 4.0.0-beta GIT [master: 53415e37] le logo ne déborde pas de sa boite quand j'utilise l'image en question, par contre j'ai pu vérifier (mais pas sur contrib) et le support de webp est bien actif pour GD sur mon serveur de test, peut-être que la différence vient de là.
Poster
Owner

`JLuc : j'ai corrigé un petit détail pour aligner le bouton des mots.

Mais ça me fait penser qu'il faudrait harmoniser en général la hauteur des boutons et des inputs.

On voit aussi que leur input est d'une hauteur différente selon que c'est un select ou un input text.

Ah oui tiens, bizarre. Pourtant c'est le même padding + font-size + line-height. Je regarderai plus en détail à l'occasion.

`JLuc : j'ai corrigé un petit détail pour aligner le bouton des mots. Mais ça me fait penser qu'il faudrait harmoniser en général la hauteur des boutons et des inputs. > On voit aussi que leur input est d'une hauteur différente selon que c'est un select ou un input text. Ah oui tiens, bizarre. Pourtant c'est le même padding + font-size + line-height. Je regarderai plus en détail à l'occasion.

Pour webp : sur allwaysdata mutu, gandi simplehosting, et OVH mutu PRO 2010 (comme le tiens b_b) "WebP Support" est "enabled" et le pb des logos webp se présente quand même (ainsi que l'absence de vignette pour les documents webp dans /ecrire)
Le pb semble être que le fichier original du logo est affiché redimensionné (comme les logos dans les listes) avec une largeur de 320px calculée et imposée par SPIP : img src="../IMG/logo/framboise.resized.webp?1623097946" style="max-width: 320px; max-height: 320px" alt="logo_on"
Mais la colonne ne fait que 286px de large d'après l'inspecteur.

Pour webp : sur allwaysdata mutu, gandi simplehosting, et OVH mutu PRO 2010 (comme le tiens b_b) "WebP Support" est "enabled" et le pb des logos webp se présente quand même (ainsi que l'absence de vignette pour les documents webp dans /ecrire) Le pb semble être que le fichier original du logo est affiché redimensionné (comme les logos dans les listes) avec une largeur de 320px calculée et imposée par SPIP : img src="../IMG/logo/framboise.resized.webp?1623097946" style="max-width: 320px; max-height: 320px" alt="logo_on" Mais la colonne ne fait que 286px de large d'après l'inspecteur.

Pour le logo webp qui déborde, le problème est visible sur contrib aussi : https://contrib.spip.net/ecrire/?exec=article&id_article=5288 (je fais un ticket à part ?)

Pour le logo webp qui déborde, le problème est visible sur contrib aussi : https://contrib.spip.net/ecrire/?exec=article&id_article=5288 (je fais un ticket à part ?)

voilà ticket à part pour les logos webp : https://core.spip.net/issues/4826

voilà ticket à part pour les logos webp : https://core.spip.net/issues/4826

Les boutons "chercher" des inputs de motclés (quand il y a bcp de motclés dans le groupe)

  • sont trop gros. Beaucoup plus gros que les autres boutons dont le bouton "Fermer" pour sortir de l'ajout d'un motclé. Le bouton "Ooops" aussi est trop gros d'ailleurs (quand on retire un motclé).
  • et quand on zoome beaucoup (+230%, ça m'arrive !) les boutons "chercher" sautent d'un coup sur une 2eme ligne. Diminuer sa taille rendrait ce saut moins probable...
    Sur spip.net la version date du 2 juin mais c'est pareil chez moi avec la version du jour.
Les boutons "chercher" des inputs de motclés (quand il y a bcp de motclés dans le groupe) - sont trop gros. Beaucoup plus gros que les autres boutons dont le bouton "Fermer" pour sortir de l'ajout d'un motclé. Le bouton "Ooops" aussi est trop gros d'ailleurs (quand on retire un motclé). - et quand on zoome beaucoup (+230%, ça m'arrive !) les boutons "chercher" sautent d'un coup sur une 2eme ligne. Diminuer sa taille rendrait ce saut moins probable... Sur spip.net la version date du 2 juin mais c'est pareil chez moi avec la version du jour.

Upload copie d'écran boutons Ooops, Chercher, Fermer, Ajouter un auteur + ...

Upload copie d'écran boutons Ooops, Chercher, Fermer, Ajouter un auteur + ...

Ici avec le bouton Ajouter, qui est également gros, avec SPIP du jour (2 Juillet) et avec zoom 150%

Ici avec le bouton Ajouter, qui est également gros, avec SPIP du jour (2 Juillet) et avec zoom 150%
Owner
  • et quand on zoome beaucoup (+230%, ça m'arrive !) les boutons "chercher" sautent d'un coup sur une 2eme ligne. Diminuer sa taille rendrait ce saut moins probable...

Je ne vois pas comment on peut espérer régler ça en diminuant la taille native si on doit prendre en charge un zoom à 200%. Cela rendrait les boutons illisibles nativement... Pour info, voici une capture d'une page d'article à 200%, je pense que dans ce genre de cas il n'y a pas que les boutons que tu mentionne qui posent probème. Amha on ne peut pas grand chose pour ça.

> - et quand on zoome beaucoup (+230%, ça m'arrive !) les boutons "chercher" sautent d'un coup sur une 2eme ligne. Diminuer sa taille rendrait ce saut moins probable... Je ne vois pas comment on peut espérer régler ça en diminuant la taille native si on doit prendre en charge un zoom à 200%. Cela rendrait les boutons illisibles nativement... Pour info, voici une capture d'une page d'article à 200%, je pense que dans ce genre de cas il n'y a pas que les boutons que tu mentionne qui posent probème. Amha on ne peut pas grand chose pour ça.
Poster
Owner

Pour l'histoire des boutons : de base les boutons ont maintenant le même taille que les inputs.

Sauf qu'il y a une particularité avec les formulaires situés dans affiche_milieu : ils sont en mode compact, donc les inputs sont moins grands.
Faudrait peut-être baisser de concert la taille des boutons dans ce contexte là. Mais je sais pas trop quoi faire avec la variante mini dans ce cas.

Enfin bref, je sais pas si j'aurais le temps d'ici la release, le mieux c'est de mettre des .btn_mini pour l'instant.
Tu fais une PR jluc ?

Pour l'histoire des boutons : de base les boutons ont maintenant le même taille que les inputs. Sauf qu'il y a une particularité avec les formulaires situés dans affiche_milieu : ils sont en mode compact, donc les inputs sont moins grands. Faudrait peut-être baisser de concert la taille des boutons dans ce contexte là. Mais je sais pas trop quoi faire avec la variante mini dans ce cas. Enfin bref, je sais pas si j'aurais le temps d'ici la release, le mieux c'est de mettre des .btn_mini pour l'instant. Tu fais une PR jluc ?
Poster
Owner

`jluc : j'ai corrigé 2-3 choses pour aligner les boutons avec les inputs et select des formulaires.
Ça devrait corriger la plupart des points soulevés pus haut, cf. captures.

`jluc : j'ai corrigé 2-3 choses pour aligner les boutons avec les inputs et select des formulaires. Ça devrait corriger la plupart des points soulevés pus haut, cf. captures.
Owner

Top tcharlss, j'up spip.net de ce pas pour que les gens puissent le constater en live.

Top tcharlss, j'up spip.net de ce pas pour que les gens puissent le constater en live.
Poster
Owner

Je ferme, on me signale que la 4.0 est sortie.

Je ferme, on me signale que la 4.0 est sortie.
tcharlss closed this issue 3 months ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
6 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.