Maintenance et ajustements des bandeaux du privé. #166

Merged
marcimat merged 15 commits from dev/bando_ajustements into master 2 weeks ago
tcharlss commented 2 weeks ago
Owner

En 2 mots :

  • On remplace les icônes pochoirs du bando par des icônes simples, ce qui permettra d'utiliser les couleurs qu'on veut.
  • Quelques ajustements visuels : calages, espacements, une touche de responsive en plus.
  • Grosse refacto et rangement de la CSS
  • Et on affiche le beau logo dans le pied de page

La seule différence vraiment notable, c'est que les sous-menus du plan des rubriques passe en column-count, donc l'ordre des items change (de haut en bas au lieu de gauche à doite).
Mais ça fait gagner pas mal de place et ça simplifie beaucoup.
C'est peut-être le point à bien tester pour qu'il n'y ait pas de régressions.

S'il y a d'autres changements qui plaisent pas (couleurs des textes etc.), on peut ajuster, pas de souci.

Les logs des commits :

Les différences visuelles sont mineures, il s'agit juste de caler un peu les éléments, les gouttières, etc.
Par contre en arrière-plan on fait un gros ménage pour préparer et simplifier les évolutions futures.

  • Menu principal du privé : remplacement des icônes svg pochoirs par des icônes "simples". On peut leur donner les couleurs que l'on veut en ciblant les classes .foreground et .background. Les icônes sont légèrement ajustées : épaisseurs des traits, alignements, etc
  • Pied de page du privé : afficher fièrement le logo, avec un lien vers spip.net
  • Rangement et reformatage complet de la CSS : mutualiser les règles, supprimer celles en double ou en triple, ajout de commentaires, etc.
  • Markup : Ajout de classes utiles là où il n'y en avait pas, et notamment d'attributs data pour cibler plus facilement les éléments du menu selon la profondeur, pour faire par exemple .item[data-profondeur="2"] au lieu de ul>li>ul>li
  • Menu identité : espacer les liens, textes plus foncés, traits de séparations inutiles, et icône de langue alternative.
  • Menu rubriques : rétablit les carets pour les entrées depliables. Les sous-menu en colonnes sont fait avec column-count : cela permet de gagner de la place par rapport à display flex, grid ou autre, et cela simplifie les règles.
  • Bien indiquer les prises de focus de tous les liens.
  • Menus déroulants : refaire fonctionner la navigation au clavier qui était hs, purement en CSS pour l'instant. À voir s'il ne faut garder qu'une des 2 solutions, ou les 2 en compléments (le JS ajoutait un petit délai en plus, non reproductible en CSS).
  • Ajout d'un peu de responsive

Pied de page :

Menu des rubriques en 2 colonnes :

En 2 mots : * On remplace les icônes pochoirs du bando par des icônes simples, ce qui permettra d'utiliser les couleurs qu'on veut. * Quelques ajustements visuels : calages, espacements, une touche de responsive en plus. * Grosse refacto et rangement de la CSS * Et on affiche le beau logo dans le pied de page La seule différence vraiment notable, c'est que les sous-menus du plan des rubriques passe en column-count, donc l'ordre des items change (de haut en bas au lieu de gauche à doite). Mais ça fait gagner pas mal de place et ça simplifie beaucoup. C'est peut-être le point à bien tester pour qu'il n'y ait pas de régressions. S'il y a d'autres changements qui plaisent pas (couleurs des textes etc.), on peut ajuster, pas de souci. **Les logs des commits :** Les différences visuelles sont mineures, il s'agit juste de caler un peu les éléments, les gouttières, etc. Par contre en arrière-plan on fait un gros ménage pour préparer et simplifier les évolutions futures. * Menu principal du privé : remplacement des icônes svg pochoirs par des icônes "simples". On peut leur donner les couleurs que l'on veut en ciblant les classes .foreground et .background. Les icônes sont légèrement ajustées : épaisseurs des traits, alignements, etc * Pied de page du privé : afficher fièrement le logo, avec un lien vers spip.net * Rangement et reformatage complet de la CSS : mutualiser les règles, supprimer celles en double ou en triple, ajout de commentaires, etc. * Markup : Ajout de classes utiles là où il n'y en avait pas, et notamment d'attributs data pour cibler plus facilement les éléments du menu selon la profondeur, pour faire par exemple .item[data-profondeur="2"] au lieu de ul>li>ul>li * Menu identité : espacer les liens, textes plus foncés, traits de séparations inutiles, et icône de langue alternative. * Menu rubriques : rétablit les carets pour les entrées depliables. Les sous-menu en colonnes sont fait avec column-count : cela permet de gagner de la place par rapport à display flex, grid ou autre, et cela simplifie les règles. * Bien indiquer les prises de focus de tous les liens. * Menus déroulants : refaire fonctionner la navigation au clavier qui était hs, purement en CSS pour l'instant. À voir s'il ne faut garder qu'une des 2 solutions, ou les 2 en compléments (le JS ajoutait un petit délai en plus, non reproductible en CSS). * Ajout d'un peu de responsive ---- ![](https://git.spip.net/attachments/f1e49f4c-273e-4344-a266-8dd6de86cfbb) Pied de page : ![](https://git.spip.net/attachments/aae69923-8c3b-47aa-842a-1863568951d8) Menu des rubriques en 2 colonnes : ![](https://git.spip.net/attachments/4c464a85-05c6-49f7-b754-82b849bb2d6e)
tcharlss added 5 commits 2 weeks ago
a0ca926171 Ajout d'une variable CSS utilitaire `spip-vw` qui donne la largeur de l'interface (en tenant compte des gouttières de .largeur)
f8f34dea98 Maintenance et ajustements des bandeaux du privé.
b_b commented 2 weeks ago
Owner

Comme je le disais sur IRC, c'est super choubi (y)

Comme je le disais sur IRC, c'est super choubi (y)
Owner

(edit tcharlss: le début du message a sauté par ma faute)

  • Je garderais bien la graisse sur les titres des grands menus quand même non ?
  • Même peut être sur son nom ? (ou pas)
  • La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique)
  • L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A)
  • Je pense que les grandes icones avaient la bordure blanche plus épaisse
(edit tcharlss: le début du message a sauté par ma faute) * Je garderais bien la graisse sur les titres des grands menus quand même non ? * Même peut être sur son nom ? (ou pas) * La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique) * L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A) * Je pense que les grandes icones avaient la bordure blanche plus épaisse
Poster
Owner

Je garderais bien la graisse sur les titres des grands menus quand même non ?

Ok. D'autant plus que le texte est gris foncé, donc ça va aider.

Même peut être sur son nom ? (ou pas)

Je trouvais un peu inutile d'avoir des disparités de graisse au sein du même menu. Mais on peut revenir dessus. Là tout est en font-weight: 500

La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique)

C'est le seul angle droit ajouté :p
Mais bon, ça peut se re-arrondir s'il faut.

L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A)

Il faut une icône lisible en petite taille, c'est pour ça que j'ai repris langue-small-xx.svg
Et une icône en rapport avec les langues, pas la worldmap donc.

Je pense que les grandes icones avaient la bordure blanche plus épaisse

Oui, je l'ai légèrement réduite pour "affiner" un peu tout ça.

> Je garderais bien la graisse sur les titres des grands menus quand même non ? Ok. D'autant plus que le texte est gris foncé, donc ça va aider. > Même peut être sur son nom ? (ou pas) Je trouvais un peu inutile d'avoir des disparités de graisse au sein du même menu. Mais on peut revenir dessus. Là tout est en font-weight: 500 > La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique) C'est le seul angle droit ajouté :p Mais bon, ça peut se re-arrondir s'il faut. > L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A) Il faut une icône lisible en petite taille, c'est pour ça que j'ai repris langue-small-xx.svg Et une icône en rapport avec les langues, pas la worldmap donc. > Je pense que les grandes icones avaient la bordure blanche plus épaisse Oui, je l'ai légèrement réduite pour "affiner" un peu tout ça.
Owner

J'avais dit : vu qu'on m'édite !

Cool !
Magnifique !

  • Je garderais bien la graisse sur les titres des grands menus quand même non ?
  • Même peut être sur son nom ? (ou pas)
  • La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique)
  • L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A)
  • Je pense que les grandes icones avaient la bordure blanche plus épaisse
J'avais dit : vu qu'on m'édite ! > > Cool ! > Magnifique ! > > - Je garderais bien la graisse sur les titres des grands menus quand même non ? > - Même peut être sur son nom ? (ou pas) > - La maison n'a plus le toit arrondi (ça rendait choubidou) (mais pas dramatique) > - L'icone de langue sera à reprendre pour mettre le même code que les logos d'erational ? (sorte de phi + A) > - Je pense que les grandes icones avaient la bordure blanche plus épaisse >
marcimat force-pushed dev/bando_ajustements from 610f0a3e61 to 139f15ec39 2 weeks ago
Owner

Magnifique !

Oui, c'est pas mal du tout :)

  • Je garderais bien la graisse sur les titres des grands menus quand même non ?

+1

  • Même peut être sur son nom ? (ou pas)

+1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante.

  • Je pense que les grandes icones avaient la bordure blanche plus épaisse

Peut être, subtilement, mais en comparant les deux je trouve celles de cette PR mieux définies finalement, plus "précises".

> > Magnifique ! Oui, c'est pas mal du tout :) > > - Je garderais bien la graisse sur les titres des grands menus quand même non ? +1 > > - Même peut être sur son nom ? (ou pas) +1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante. > > - Je pense que les grandes icones avaient la bordure blanche plus épaisse Peut être, subtilement, mais en comparant les deux je trouve celles de cette PR mieux définies finalement, plus "précises".
tcharlss added 1 commit 2 weeks ago
Poster
Owner

J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page. Ça doit être possible en trichant un peu, mais ça veut dire qu'au survol on se rend compte de la supercherie, soit parcequ'il n'y a pas de padding à gauche comme sur l'image, soit parceque ça dépasse (ça dépend comment ça serait fait).
Des avis ?

Supercherie visible au survol :


+1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante.

Alors moi j'ai toujours trouvé ça superflu à cet endroit là.
Ce sont des menus avec juste 4 et 2 entrées, il n'y a pas de risque que l'une d'elle un peu plus importante que les autres soit "noyée" et invisible.
Les seules fois où je vois différentes graisses employées au même niveau dans ce genre de menu, c'est pour indiquer la page active.

Ça, c'est une remarque générale que je me fais pour toute l'interface d'ailleurs : dans un même composant ou sur une même ligne on passe sans arrêt d'une taille de police à une autre, d'une graisse à une autre, parce que tel ou tel élément est censé être un poil plus important que son voisin. Jamais d'unité, ça fait des disparités de partout qui finissent par nuire à la lecture.

Un autre exemple où c'est bien visible c'est nos listes d'objets, à comparer avec les exemples donnés dans les articles traitant de l'UX des data-tables :

J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page. Ça doit être possible en trichant un peu, mais ça veut dire qu'au survol on se rend compte de la supercherie, soit parcequ'il n'y a pas de padding à gauche comme sur l'image, soit parceque ça dépasse (ça dépend comment ça serait fait). Des avis ? ![](https://git.spip.net/attachments/b1331cf8-2577-4e09-bc2c-8a675c56bcec) Supercherie visible au survol : ![](https://git.spip.net/attachments/9933b6ef-1346-42fb-bd10-6319c8fdb80f) ---- > +1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante. Alors moi j'ai toujours trouvé ça superflu à cet endroit là. Ce sont des menus avec juste 4 et 2 entrées, il n'y a pas de risque que l'une d'elle un peu plus importante que les autres soit "noyée" et invisible. Les seules fois où je vois différentes graisses employées au même niveau dans ce genre de menu, c'est pour indiquer la page active. Ça, c'est une remarque générale que je me fais pour toute l'interface d'ailleurs : dans un même composant ou sur une même ligne on passe sans arrêt d'une taille de police à une autre, d'une graisse à une autre, parce que tel ou tel élément est censé être un poil plus important que son voisin. Jamais d'unité, ça fait des disparités de partout qui finissent par nuire à la lecture. Un autre exemple où c'est bien visible c'est nos listes d'objets, à comparer avec les exemples donnés dans les articles traitant de l'UX des data-tables : * https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e * https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a
Owner

J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page. Ça doit être possible en trichant un peu, mais ça veut dire qu'au survol on se rend compte de la supercherie, soit parcequ'il n'y a pas de padding à gauche comme sur l'image, soit parceque ça dépasse (ça dépend comment ça serait fait).
Des avis ?

Oui, il y a un bug visuel d'alignement.
Mais si tu cales l'icone et que ça dépasse au survol, ça peut être très bien.

+1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante.

Alors moi j'ai toujours trouvé ça superflu à cet endroit là.
Ce sont des menus avec juste 4 et 2 entrées, il n'y a pas de risque que l'une d'elle un peu plus importante que les autres soit "noyée" et invisible.
Les seules fois où je vois différentes graisses employées au même niveau dans ce genre de menu, c'est pour indiquer la page active.

Je disais ça parce qu'il me semble que c'est le lien le plus utile parmi les quatre de ce mini bandeau, avec "Voir le site".
Sinon, ajout d'une icône light ?

Ça, c'est une remarque générale que je me fais pour toute l'interface d'ailleurs : dans un même composant ou sur une même ligne on passe sans arrêt d'une taille de police à une autre, d'une graisse à une autre, parce que tel ou tel élément est censé être un poil plus important que son voisin. Jamais d'unité, ça fait des disparités de partout qui finissent par nuire à la lecture.

Oui, d'ailleurs, si tu vas au hasard sur /ecrire/?exec=configurer_urls, dans la colonne de gauche tous les liens sont en gras sauf la page active...

> J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page. Ça doit être possible en trichant un peu, mais ça veut dire qu'au survol on se rend compte de la supercherie, soit parcequ'il n'y a pas de padding à gauche comme sur l'image, soit parceque ça dépasse (ça dépend comment ça serait fait). > Des avis ? Oui, il y a un bug visuel d'alignement. Mais si tu cales l'icone et que ça dépasse au survol, ça peut être très bien. > > +1 aussi sur le nom, c'est la page perso, où on va retrouver ses infos, ses objets etc, elle est assez importante. > > Alors moi j'ai toujours trouvé ça superflu à cet endroit là. > Ce sont des menus avec juste 4 et 2 entrées, il n'y a pas de risque que l'une d'elle un peu plus importante que les autres soit "noyée" et invisible. > Les seules fois où je vois différentes graisses employées au même niveau dans ce genre de menu, c'est pour indiquer la page active. Je disais ça parce qu'il me semble que c'est le lien le plus utile parmi les quatre de ce mini bandeau, avec "Voir le site". Sinon, ajout d'une icône light ? > Ça, c'est une remarque générale que je me fais pour toute l'interface d'ailleurs : dans un même composant ou sur une même ligne on passe sans arrêt d'une taille de police à une autre, d'une graisse à une autre, parce que tel ou tel élément est censé être un poil plus important que son voisin. Jamais d'unité, ça fait des disparités de partout qui finissent par nuire à la lecture. Oui, d'ailleurs, si tu vas au hasard sur /ecrire/?exec=configurer_urls, dans la colonne de gauche tous les liens sont en gras sauf la page active...

Je suis pour aligner aussi, ça fait bien plus fini. Mais dans ce cas il y a deux options, sans couper le padding :

  • soit le padding dépasse, et on ne voit se dépassement qu'au survol : c'est mieux qu'un padding coupé
  • soit tu trouves une autre manière de mettre en avant le survol/focus sans rajouter de fond derrière : c'est ce qu'on a pour l'instant, et il me semble que si on peut trouver ça c'est mieux

Surtout que cette mise en avant ne vaut vraiment qu'en focus, car le focus nécessite plus de visibilité qu'un survol. En survol tu sais où est ta souris, et en plus t'as le menu qui s'ouvre donc "tu sais où t'es" ya pas besoin d'appuyer excessivement. En focus c'est bien de le voir plus fort car l'élément focussé peut être n'importe où à l'écran, ça doit sauter au yeux (mais là encore : dans le cadre spécifique du menu, ya les sous menus qui s'ouvrent donc ça nécessite pas forcément un fond en plus).

Pour les gras, je suis d'accord avec @tcharlss de pas multiplier les graisses. On peut trouver d'autres méthodes peut-être :

  • ajouter un picto sur ce qui est plus important
  • mettre des éléments dans un sous-menu : dans 95% des applis, le nom d'utilisateurice n'est pas un lien direct mais ouvre un menu déroulant avec différent point configurable : mon profil, ma langue, mes préférences d'affichage, se déconnecter… (avec bien sûr un caret montrant que ça se déplie) => pour moi à terme ça serait à privilégier

(Et pour comparaison, ni dans WP ni Drupal, dans la barre fine en haut qui contient "Nom du site" et "Mon nom", il n'y a aucune diff de graisse mais : des pictos + parfois des sous-menus, justement.)

Je suis pour aligner aussi, ça fait bien plus fini. Mais dans ce cas il y a deux options, sans couper le padding : - soit le padding dépasse, et on ne voit se dépassement qu'au survol : c'est mieux qu'un padding coupé - soit tu trouves une autre manière de mettre en avant le survol/focus sans rajouter de fond derrière : c'est ce qu'on a pour l'instant, et il me semble que si on peut trouver ça c'est mieux Surtout que cette mise en avant ne vaut vraiment qu'en focus, car le focus nécessite plus de visibilité qu'un survol. En survol tu sais où est ta souris, et en plus t'as le menu qui s'ouvre donc "tu sais où t'es" ya pas besoin d'appuyer excessivement. En focus c'est bien de le voir plus fort car l'élément focussé peut être n'importe où à l'écran, ça doit sauter au yeux (mais là encore : dans le cadre spécifique du menu, ya les sous menus qui s'ouvrent donc ça nécessite pas forcément un fond en plus). Pour les gras, je suis d'accord avec @tcharlss de pas multiplier les graisses. On peut trouver d'autres méthodes peut-être : - ajouter un picto sur ce qui est plus important - mettre des éléments dans un sous-menu : dans 95% des applis, le nom d'utilisateurice n'est pas un lien direct mais ouvre un menu déroulant avec différent point configurable : mon profil, ma langue, mes préférences d'affichage, se déconnecter… (avec bien sûr un caret montrant que ça se déplie) => pour moi à terme ça serait à privilégier (Et pour comparaison, ni dans WP ni Drupal, dans la barre fine en haut qui contient "Nom du site" et "Mon nom", il n'y a aucune diff de graisse mais : des pictos + parfois des sous-menus, justement.)
Owner

J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page.

C'est pas hyper choquant la maison décallée.
Mais surtout l'alignement à gauche ne sera jamais parfait, notamment pour le titre "Accueil" qui change selon la langue. Genre, tu passes en italien, déjà t'es content…

Et tu alignes le bando_outils comment du coup ?

> J'hésite sur un truc : essayer d'aligner la 1ère icône avec le reste de la page. C'est pas hyper choquant la maison décallée. Mais surtout l'alignement à gauche ne sera jamais parfait, notamment pour le titre "Accueil" qui change selon la langue. Genre, tu passes en italien, déjà t'es content… Et tu alignes le bando_outils comment du coup ? ![](https://git.spip.net/attachments/55b2dbdb-92fe-46dc-ac47-eeb01b0a6b5a)
Owner

Pour les gras, je suis d'accord avec @tcharlss de pas multiplier les graisses.

Certes, mais je pense pas que l'idée de @tcharlss soit de tout refaire (nouveau menu), et ajouter trop d'icones, c'est pas mieux non plus.

> Pour les gras, je suis d'accord avec @tcharlss de pas multiplier les graisses. Certes, mais je pense pas que l'idée de @tcharlss soit de tout refaire (nouveau menu), et ajouter trop d'icones, c'est pas mieux non plus.

@marcimat tu vois bien sur la capture de @tcharlss qu'en français aussi le texte dépasse de l'icone : ce n'est donc pas l'icone qui est alignée mais bien le contenu complet, donc le titre s'il dépasse.

C'est juste un enlevage du padding à gauche.

Et moi je suis carrément pour : si si c'est super choquant le fait que ça zigzague à l'œil car pas aligné ! :)
Pour moi ça fait une impression de "pas fini", pas clean.

@marcimat tu vois bien sur la capture de @tcharlss qu'en français *aussi* le texte dépasse de l'icone : ce n'est donc pas l'icone qui est alignée mais bien le contenu complet, donc le titre s'il dépasse. C'est juste un enlevage du padding à gauche. Et moi je suis carrément pour : si si c'est super choquant le fait que ça zigzague à l'œil car pas aligné ! :) Pour moi ça fait une impression de "pas fini", pas clean.
Owner

Bah je vois surtout que sur la proposition en capture de tcharles c'est que c'est n'est pas parfaitement

  • aligné avec le nom,
  • ni avec l'icone de plan (qui a disparu de sa capture) ou l'icone rubrique rapide,
  • ni avec le bord gauche des boites infos du contenu,
  • ni avec l'icone des boites infos après.

Donc : je vois pas en quoi c'est hyper mieux, sinon que c'est resserré à gauche, et que c'est "presque" aligné. Mais c'est toujours pas bien aligné sur la capture là et ça se voit.

Je pense que la volonté est de tout aligner, mais c'est pas ce qui est montré encore (et pas sûr de la faisabilité).

Ceci dit, ce que tu dis pour le hover des grosses icones est jouable (de juste colorier l'icone mais pas le fond)

Bah je vois surtout que sur la proposition en capture de tcharles c'est que c'est n'est pas parfaitement - aligné avec le nom, - ni avec l'icone de plan (qui a disparu de sa capture) ou l'icone rubrique rapide, - ni avec le bord gauche des boites infos du contenu, - ni avec l'icone des boites infos après. Donc : je vois pas en quoi c'est hyper mieux, sinon que c'est resserré à gauche, et que c'est "presque" aligné. Mais c'est toujours pas bien aligné sur la capture là et ça se voit. Je pense que la volonté est de tout aligner, mais c'est pas ce qui est montré encore (et pas sûr de la faisabilité). Ceci dit, ce que tu dis pour le hover des grosses icones est jouable (de juste colorier l'icone mais pas le fond)
Poster
Owner

Pour les menus outils et identité, c'est une marge négative à gauche égale au padding.

Pour le menu principal ça pourrait être la même astuce en ajustant un peu, il faudrait virer le flex-grow et définir la largeur uniquement avec le padding. Et ainsi ça marcherait quelque soit la taille du texte.

Sinon pour représenter le hover et le focus, je vois pas beaucoup d'autres solutions que le fond et l'outline. Enfin disons que c'est des solutions qui fonctionnent bien.
Si c'est un peu décalé juste au survol/focus, c'est pas trop gênant non plus je pense.

Pour les menus outils et identité, c'est une marge négative à gauche égale au padding. Pour le menu principal ça pourrait être la même astuce en ajustant un peu, il faudrait virer le flex-grow et définir la largeur uniquement avec le padding. Et ainsi ça marcherait quelque soit la taille du texte. Sinon pour représenter le hover et le focus, je vois pas beaucoup d'autres solutions que le fond et l'outline. Enfin disons que c'est des solutions qui fonctionnent bien. Si c'est un peu décalé juste au survol/focus, c'est pas trop gênant non plus je pense.

euh @marcimat je pige absolument pas ta liste, qu'est-ce que tu ne vois pas d'aligné sur cette capture ? ya littéralement chaque point de ta liste qui est aligné au pixel près avec le bord gauche du "accueil"

euh @marcimat je pige absolument pas ta liste, qu'est-ce que tu ne vois pas d'aligné sur cette capture ? ya littéralement chaque point de ta liste qui est aligné au pixel près avec le bord gauche du "accueil"
Poster
Owner

Heu marcimat, t'as vraiment vérifié là ?

Tous les éléments que tu listes sont alignés au pixel près sur la capture (bon allez, le nom est décalé d'1 pixel).
On aligne ce qu'on peut aligner, c'est à dire l'extérieur des blocs.

Heu marcimat, t'as vraiment vérifié là ? Tous les éléments que tu listes sont alignés au pixel près sur la capture (bon allez, le nom est décalé d'1 pixel). On aligne ce qu'on peut aligner, c'est à dire l'extérieur des blocs. ![](https://git.spip.net/attachments/59e1ecbe-6e36-4d9f-8667-3e23dfc2d884)
Owner

Ah mais pardon, j'avais pas compris cela : tu parles de l'alignement du texte.

Tcharles disait :

essayer d'aligner la 1ère icône avec le reste de la page.

Il semblait parler de l'icone.

Moi ça me fait bizarre que ça soit pas aligné avec le texte ou l'icone de la boite dessous par exemple

Ah mais pardon, j'avais pas compris cela : tu parles de l'alignement du texte. Tcharles disait : > essayer d'aligner la 1ère icône avec le reste de la page. Il semblait parler de l'icone. Moi ça me fait bizarre que ça soit pas aligné avec le texte ou l'icone de la boite dessous par exemple
Owner

Mais ok ok. Je comprends… mais avec l'icone centrée sur le texte, ça fait toujours un décallage visible pour l'œil, et j'ai bien l'impression qu'on voit l'alignement de l'icone en premier, pas forcément le texte.

Mais ok ok. Je comprends… mais avec l'icone centrée sur le texte, ça fait toujours un décallage visible pour l'œil, et j'ai bien l'impression qu'on voit l'alignement de l'icone en premier, pas forcément le texte.
Owner

Amha, y a un truc à trouver pour aligner mieux cela.

  • Dans ce qu'il y a actuellement dans la branche, le padding-left du nom ne correspond pas au padding de la boite.
  • Dans ta capture, tu alignes avec la bordure de la boite, et donc le padding du nom dépasse à gauche (margin négatif ?) sur du conteneur ? C'est pas bizarre au survol ?
Amha, y a un truc à trouver pour aligner mieux cela. - Dans ce qu'il y a actuellement dans la branche, le padding-left du nom ne correspond pas au padding de la boite. - Dans ta capture, tu alignes avec la bordure de la boite, et donc le padding du nom dépasse à gauche (margin négatif ?) sur du conteneur ? C'est pas bizarre au survol ?

Ça va être difficile de trouver un truc qui cale 100% car il y a un gros mélange :

  • du texte brut directement
  • possiblement un picto avant (si on faisait comme pour la langue, sur le nom de la personne)
  • des icones au dessus avec le texte dessous qui dépasse forcément
  • des images seules
  • des boites dont on voit donc le bord, avec le texte à l'intérieur donc avec un padding

Il me semble que l'œil a tendence à vouloir aligner texte avec texte, image avec image mais… pas toujours. Par ex la ligne du haut, ya aucun picto, le nom de la personne directement à gauche, donc c'est directement le texte qui "crée" le bord gauche. Si yavait un picto on trouverait immédiatement logique que ce soit aligné avec l'icone de plan dessous, pas avec un autre texte.

Tellement d'éléments disparates…

C'est bien pour ça qu'un menu vertical c'est mieux :p

Et surtout que même sans menu vertical, dans les entêtes comme ça, on essaye de ne pas mélanger 12 manières à la fois (texte seul, texte avec picto à gauche, texte sous l'image…) dans une même zone proche. Là ça fait des plombes qu'on se tape ce mélange chelou, que j'ai toujours trouvé branlant.

Ça va être difficile de trouver un truc qui cale 100% car il y a un gros mélange : - du texte brut directement - possiblement un picto avant (si on faisait comme pour la langue, sur le nom de la personne) - des icones au dessus avec le texte dessous qui dépasse forcément - des images seules - des boites dont on voit donc le bord, avec le texte à l'intérieur donc avec un padding Il me semble que l'œil a tendence à vouloir aligner texte avec texte, image avec image mais… pas toujours. Par ex la ligne du haut, ya aucun picto, le nom de la personne directement à gauche, donc c'est directement le texte qui "crée" le bord gauche. Si yavait un picto on trouverait immédiatement logique que ce soit aligné avec l'icone de plan dessous, pas avec un autre texte. Tellement d'éléments disparates… C'est bien pour ça qu'un menu vertical c'est mieux :p Et surtout que même sans menu vertical, dans les entêtes comme ça, on essaye de ne pas mélanger 12 manières à la fois (texte seul, texte avec picto à gauche, texte sous l'image…) dans une même zone proche. Là ça fait des plombes qu'on se tape ce mélange chelou, que j'ai toujours trouvé branlant.
Poster
Owner

Dans ce qu'il y a actuellement dans la branche, le padding-left du nom ne correspond pas au padding de la boite.

Par défaut le padding à gauche du 1er item est "invisible", c'est le texte lui-même qu'il faut aligner. Et pourquoi faudrait-il reprendre le même padding que celui des boîtes ?

Dans ta capture, [...] le padding du nom dépasse à gauche (margin négatif ?) sur du conteneur ? C'est pas bizarre au survol ?

Mais... Oui c'est exactement ce que j'expliquais depuis le début. Oui ça fait bizarre. Oui.

> Dans ce qu'il y a actuellement dans la branche, le padding-left du nom ne correspond pas au padding de la boite. Par défaut le padding à gauche du 1er item est "invisible", c'est le **texte** lui-même qu'il faut aligner. Et pourquoi faudrait-il reprendre le même padding que celui des boîtes ? > Dans ta capture, [...] le padding du nom dépasse à gauche (margin négatif ?) sur du conteneur ? C'est pas bizarre au survol ? Mais... Oui c'est exactement ce que j'expliquais depuis le début. Oui ça fait bizarre. Oui.
Collaborator

très sympa tout ça ! bravo tcharlss

Pour obtenir l'alignement de l'icone accueil, il faudrait peut-être donner au div englobant le menu horizontal la même largeur que le contenu + la largeur du padding au survol nop ?

très sympa tout ça ! bravo tcharlss Pour obtenir l'alignement de l'icone accueil, il faudrait peut-être donner au div englobant le menu horizontal la même largeur que le contenu + la largeur du padding au survol nop ?
Poster
Owner

Ça va être difficile de trouver un truc qui cale 100% car il y a un gros mélange

Alors oui, mais je veux tempérer quand même : là dans la capture on voit juste un petit bloc.
Mais dans la page entière, on voit beaucoup mieux la limite à gauche dans son ensemble.
Et donc qu'il s'agisse de blocs avec des bordures, de texte ou de pictos, on voit mieux si un élément est aligné ou pas, ça saute plus aux yeux.

Mais donc pour en revenir au sujet @marcimat : tu préfères que le 1er bloc icône soit complètement décalé comme actuellement ?
Parcequ'on peut pas faire de miracle non plus : on peut aligner le bloc entier icône + texte, pas juste l'icône à l'intérieur du bloc. Et même dans ce cas là tu voudrais quoi, que le texte déborde à gauche ? Franchement je vois pas trop ce que tu attends.

> Ça va être difficile de trouver un truc qui cale 100% car il y a un gros mélange Alors oui, mais je veux tempérer quand même : là dans la capture on voit juste un petit bloc. Mais dans la page entière, on voit beaucoup mieux la limite à gauche dans son ensemble. Et donc qu'il s'agisse de blocs avec des bordures, de texte ou de pictos, on voit mieux si un élément est aligné ou pas, ça saute plus aux yeux. Mais donc pour en revenir au sujet @marcimat : tu préfères que le 1er bloc icône soit complètement décalé comme actuellement ? Parcequ'on peut pas faire de miracle non plus : on peut aligner le bloc entier icône + texte, pas juste l'icône à l'intérieur du bloc. Et même dans ce cas là tu voudrais quoi, que le texte déborde à gauche ? Franchement je vois pas trop ce que tu attends.
Owner

J'ai dit que j'attendais quelque chose ? :p

Je pense que j'aimerais que les textes soit alignés verticalement. Mais bon, c'est juste ma vision hein. Mais la ligne de grandes icones continue d'être perturbante.

Un peu comme :

Le padding de l'accueil au survol reste assez désagréable je trouve de se décaller en dehors du conteneur

J'ai dit que j'attendais quelque chose ? :p Je pense que j'aimerais que les textes soit alignés verticalement. Mais bon, c'est juste ma vision hein. Mais la ligne de grandes icones continue d'être perturbante. Un peu comme : ![](https://git.spip.net/attachments/93968df2-5f47-48a1-9cc3-ca009195e606) Le padding de l'accueil au survol reste assez désagréable je trouve de se décaller en dehors du conteneur ![](https://git.spip.net/attachments/50d33ad1-26c0-412b-9731-a275e3619aea)
Collaborator

Et si on centre le bandeau principal, au lieu d'essayer de l'aligner à gauche?

Et si on centre le bandeau principal, au lieu d'essayer de l'aligner à gauche?
Poster
Owner

@touti : merci:) Je sais pas si j'ai bien compris la solution proposée. Mais je crois qu'indépendamment du comment, c'est l'objectif final qui à l'air de différer de l'un⋅e à l'autre : aligner quoi avec quoi exactement.

Par ailleurs @marcimat je vois l'idée, mais ça me paraît irréalisable : selon la page on sait pas si sur le côté on va avoir une boîte, ou un simple paragraphe de texte, ou une liste... Ça peut être tout et n'importe quoi. On sort du seul sujet du bandeau là.

@arno : ça résoudrait certes cette équation :)
Pour avoir essayé je trouve que ça fonctionne moins bien qu'avec l'alignement identique au reste des contenus de la page, ça donne une impression de « flottement ». Bien sûr ça dépend un peu de la place prise par ce menu par rapport au reste de la page, et donc de la largeur de l'écran. Mais en général, c'est cette impression qui ressort je trouve.

@touti : merci:) Je sais pas si j'ai bien compris la solution proposée. Mais je crois qu'indépendamment du comment, c'est l'objectif final qui à l'air de différer de l'un⋅e à l'autre : aligner quoi avec quoi exactement. Par ailleurs @marcimat je vois l'idée, mais ça me paraît irréalisable : selon la page on sait pas si sur le côté on va avoir une boîte, ou un simple paragraphe de texte, ou une liste... Ça peut être tout et n'importe quoi. On sort du seul sujet du bandeau là. @arno : ça résoudrait certes cette équation :) Pour avoir essayé je trouve que ça fonctionne moins bien qu'avec l'alignement identique au reste des contenus de la page, ça donne une impression de « flottement ». Bien sûr ça dépend un peu de la place prise par ce menu par rapport au reste de la page, et donc de la largeur de l'écran. Mais en général, c'est cette impression qui ressort je trouve.
Poster
Owner

Bon pour essayer d'avancer/débloquer un peu : oui finalement la couleur de fond au survol n'est pas obligatoire, on peut la retirer, ainsi le décalage ne serait plus visible à ce moment.
Et le survol est toujours indiqué avec le souligné des liens ou la couleur de fond des icônes.

Le survol uniquement donc, si le cadre visible au focus est décalé ça me semble pas grave du tout par contre, il n'est pas là pour « faire joli » mais pour l'accessibilité.

Mais déjà avec ça, dans l'ensemble ça serait déjà plus aligné que ce qu'il y actuellement.

Bon pour essayer d'avancer/débloquer un peu : oui finalement la couleur de fond au survol n'est pas obligatoire, on peut la retirer, ainsi le décalage ne serait plus visible à ce moment. Et le survol est toujours indiqué avec le souligné des liens ou la couleur de fond des icônes. Le survol uniquement donc, si le cadre visible au focus est décalé ça me semble pas grave du tout par contre, il n'est pas là pour « faire joli » mais pour l'accessibilité. Mais déjà avec ça, dans l'ensemble ça serait déjà plus aligné que ce qu'il y actuellement.
tcharlss added 1 commit 2 weeks ago
tcharlss added 1 commit 2 weeks ago
tcharlss added 1 commit 2 weeks ago
tcharlss added 1 commit 2 weeks ago
tcharlss added 1 commit 2 weeks ago
tcharlss added 1 commit 2 weeks ago
Owner

Je propose qu'on passe en icone + texte sur la même ligne. ça résout beaucoup de soucis. Notamment l'alignement gauche.

Ça donnerait :

Je propose qu'on passe en icone + texte sur la même ligne. ça résout beaucoup de soucis. Notamment l'alignement gauche. Ça donnerait : ![](https://git.spip.net/attachments/7b4b1f51-01d0-4f09-b1fa-2a0f226e9f8b) ![](https://git.spip.net/attachments/a5bd9cac-0caa-486c-ac3d-d3e1899b54fb) ![](https://git.spip.net/attachments/cbdfddb4-f03b-45f4-8688-bae0f4576ecc) ![](https://git.spip.net/attachments/daa6f47a-8003-49c9-ac99-07920385d7e8)

En ce qui me concerne : TOTALEMENT pour depuis le début pour ce genre :

  • énooorme amélioration de cohérence entre les compostants (cf mon message plus haut sur la disparité)
  • bien plus facile à aligner
  • et en plus c'est moins haut, donc bandeau complet moins haut, donc on atteint le contenu plus vite (en grand écran)
En ce qui me concerne : TOTALEMENT pour depuis le début pour ce genre : - énooorme amélioration de cohérence entre les compostants (cf mon message plus haut sur la disparité) - bien plus facile à aligner - et en plus c'est moins haut, donc bandeau complet moins haut, donc on atteint le contenu plus vite (en grand écran)
Owner

Pas mal tout ça.

Mais pourquoi, dans les liens du tout premier bandeau, seule le lien vers la langue a une icone ? c'est loin d'être le lien le plus utile / utilisé.

Pas mal tout ça. Mais pourquoi, dans les liens du tout premier bandeau, seule le lien vers la langue a une icone ? c'est loin d'être le lien le plus utile / utilisé.
Poster
Owner

Oui ça me va aussi, ça résoud intelligemment les problèmes d'alignement (sans hack), et ça fait gagner de la place.
Faudra veiller à ce que ça bascule par sur 2 lignes trop tôt quand même, avec ce type d'affichage les icônes pourraient être légèrement plus petites.

Oui ça me va aussi, ça résoud intelligemment les problèmes d'alignement (sans hack), et ça fait gagner de la place. Faudra veiller à ce que ça bascule par sur 2 lignes trop tôt quand même, avec ce type d'affichage les icônes pourraient être légèrement plus petites.
Poster
Owner

Mais pourquoi, dans les liens du tout premier bandeau, seule le lien vers la langue a une icone ?

Pour l'instant c'est juste une reprise de l'antérieur.
Et aussi, on n'a pas encore de jeu d'icônes symboliques.
Mais sur le principe, j'ai rien contre.

> Mais pourquoi, dans les liens du tout premier bandeau, seule le lien vers la langue a une icone ? Pour l'instant c'est juste une reprise de l'antérieur. Et aussi, on n'a pas encore de jeu d'icônes symboliques. Mais sur le principe, j'ai rien contre.
Collaborator

Moi j'ai un peu de mal, surtout si l'argument premier c'est de régler un problème d'alignement… (problème dont je ne trouve pas vraiment qu'il soit un problème, surtout si on ne recourt pas au fond coloré au survol, que je trouve déjà ni joli ni nécessaire).

En fait, c'est proche de l'option d'affichage «Afficher uniquement le texte», c'est pas super-folichon, je trouve qu'on perd une signature graphique typique du SPIP des origines. Qui n'a pas que des qualités, évidemment, mais qui marque l'esprit du lieu.

Un autre aspect est qu'il me semble que ça va provoquer encore plus tôt le retour à la ligne des éléments du bandeau principal, qui n'est pas idéal du tout.

=> En revanche, une fois qu'on a le retour à la ligne qui se déclenche, je trouve pour le coup que cette forme de présentation est nettement plus adaptée que les grosses icones. L'interface italienne ci-dessus, quand on passe sur deux lignes, c'est chic…

Du coup, est-ce que ça ne pourrait pas plutôt être un comportement responsive: sur écran suffisant grand, la présentation traditionnelle; sur écran qui provoque le retour chariot, l'icone passe ne petit à côté du texte.

Moi j'ai un peu de mal, surtout si l'argument premier c'est de régler un problème d'alignement… (problème dont je ne trouve pas vraiment qu'il soit un problème, surtout si on ne recourt pas au fond coloré au survol, que je trouve déjà ni joli ni nécessaire). En fait, c'est proche de l'option d'affichage «Afficher uniquement le texte», c'est pas super-folichon, je trouve qu'on perd une signature graphique typique du SPIP des origines. Qui n'a pas que des qualités, évidemment, mais qui marque l'esprit du lieu. Un autre aspect est qu'il me semble que ça va provoquer encore plus tôt le retour à la ligne des éléments du bandeau principal, qui n'est pas idéal du tout. => En revanche, une fois qu'on a le retour à la ligne qui se déclenche, je trouve pour le coup que cette forme de présentation est nettement plus adaptée que les grosses icones. L'interface italienne ci-dessus, quand on passe sur deux lignes, c'est chic… Du coup, est-ce que ça ne pourrait pas plutôt être un comportement responsive: sur écran suffisant grand, la présentation traditionnelle; sur écran qui provoque le retour chariot, l'icone passe ne petit à côté du texte.
Owner

Moi j'ai un peu de mal, surtout si l'argument premier c'est de régler un problème d'alignement… (problème dont je ne trouve pas vraiment qu'il soit un problème, surtout si on ne recourt pas au fond coloré au survol, que je trouve déjà ni joli ni nécessaire).

Pour le coup je suis assez d'accord. Je n'étais pas gêné non plus par le décallage de l'icone Accueil. Et après coup, je trouve que avec (icone + texte dessous) c'est mieux que ça ne soit pas calé à tout à gauche sans marge…

Et je préfère sans le background hover également. Le sorvol de l'icone qui change bien de couleur est suffisant.

En fait, c'est proche de l'option d'affichage «Afficher uniquement le texte», c'est pas super-folichon, je trouve qu'on perd une signature graphique typique du SPIP des origines. Qui n'a pas que des qualités, évidemment, mais qui marque l'esprit du lieu.

Je suis également assez d'accord. Il faut qu'il y ait une certaine identité marquée. Et si possible qu'elle se démarque un peu des autres d'une manière à trouver. Ces grandes icones sont effectivement assez originales.

Il y a quelques années quand le bandeau avait été repris c'était déjà un événement assez sensible. À chaque modification il faut jouer de compromis, il y a beaucoup d'éléments que l'on souhaite garder afficher, ce qui n'aide pas.

Pour ma part je suppose que j'aurais préféré qu'il n'y ait que 2 lignes de bandeau au lieu de 3, donc 1 de grosses icones + menu) et une seconde pour le reste… sauf que y a tellement de choses à mettre que ça ne semble pas jouable en l'état actuel.

Enfin c'est un autre sujet encore !

Un autre aspect est qu'il me semble que ça va provoquer encore plus tôt le retour à la ligne des éléments du bandeau principal, qui n'est pas idéal du tout.

C'est effectivement le cas.

=> En revanche, une fois qu'on a le retour à la ligne qui se déclenche, je trouve pour le coup que cette forme de présentation est nettement plus adaptée que les grosses icones. L'interface italienne ci-dessus, quand on passe sur deux lignes, c'est chic…

On ne peut pas savoir en CSS, à ma connaissance, à partir que quel moment un élément bascule ou va basculer. La seule chose qu'on pourrait dire c'est < telle largeur de viewport, passer en petites icones. Mais entre l'interface des rédactrices & rédacteurs, et celles des admins, il y a une grande différence dans la taille du menu. C'est difficile de trouver un point de basculement adapté.


Bref.

Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ?

Et voir pour (re)proposer quelque chose (ou pas) pour la suite dans une autre PR ?

Faudrait pas que ce point assez précis empêche la fusion de l'énorme autre travail de refactoring html / css quoi que tu as fait.

> Moi j'ai un peu de mal, surtout si l'argument premier c'est de régler un problème d'alignement… (problème dont je ne trouve pas vraiment qu'il soit un problème, surtout si on ne recourt pas au fond coloré au survol, que je trouve déjà ni joli ni nécessaire). Pour le coup je suis assez d'accord. Je n'étais pas gêné non plus par le décallage de l'icone Accueil. Et après coup, je trouve que avec (icone + texte dessous) c'est mieux que ça ne soit pas calé à tout à gauche sans marge… Et je préfère sans le background hover également. Le sorvol de l'icone qui change bien de couleur est suffisant. > En fait, c'est proche de l'option d'affichage «Afficher uniquement le texte», c'est pas super-folichon, je trouve qu'on perd une signature graphique typique du SPIP des origines. Qui n'a pas que des qualités, évidemment, mais qui marque l'esprit du lieu. Je suis également assez d'accord. Il faut qu'il y ait une certaine identité marquée. Et si possible qu'elle se démarque un peu des autres d'une manière à trouver. Ces grandes icones sont effectivement assez originales. Il y a quelques années quand le bandeau avait été repris c'était déjà un événement assez sensible. À chaque modification il faut jouer de compromis, il y a beaucoup d'éléments que l'on souhaite garder afficher, ce qui n'aide pas. Pour ma part je suppose que j'aurais préféré qu'il n'y ait que 2 lignes de bandeau au lieu de 3, donc 1 de grosses icones + menu) et une seconde pour le reste… sauf que y a tellement de choses à mettre que ça ne semble pas jouable en l'état actuel. Enfin c'est un autre sujet encore ! > Un autre aspect est qu'il me semble que ça va provoquer encore plus tôt le retour à la ligne des éléments du bandeau principal, qui n'est pas idéal du tout. C'est effectivement le cas. > => En revanche, une fois qu'on a le retour à la ligne qui se déclenche, je trouve pour le coup que cette forme de présentation est nettement plus adaptée que les grosses icones. L'interface italienne ci-dessus, quand on passe sur deux lignes, c'est chic… On ne peut pas savoir en CSS, à ma connaissance, à partir que quel moment un élément bascule ou va basculer. La seule chose qu'on pourrait dire c'est < telle largeur de viewport, passer en petites icones. *Mais* entre l'interface des rédactrices & rédacteurs, et celles des admins, il y a une grande différence dans la taille du menu. C'est difficile de trouver un point de basculement adapté. ---- Bref. Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ? Et voir pour (re)proposer quelque chose (ou pas) pour la suite dans une autre PR ? Faudrait pas que ce point assez précis empêche la fusion de l'énorme autre travail de refactoring html / css quoi que tu as fait.
b_b commented 2 weeks ago
Owner

Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ?

+1, pas mieux :)

Et voir pour (re)proposer quelque chose (ou pas) pour la suite dans une autre PR ?

'xactement, allons-y par étapes/itérations

> Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ? > +1, pas mieux :) > Et voir pour (re)proposer quelque chose (ou pas) pour la suite dans une autre PR ? > 'xactement, allons-y par étapes/itérations
Poster
Owner

Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ?

Oui. Mais il y a même pas de 2ème temps à avoir.

Cette PR est avant tout une refacto en arrière plan du html et du css.
Et au passage, on arrondit quelques angles sur le plan graphique.
Mais c'est tout. Pour l'instant ça reste le même bandeau, qui fonctionne de la même façon, avec les mêmes éléments.

La refonte complète, c'est un beau sujet, ça va prendre du temps et des discussions,
mais je voulais surtout pas l'aborder dans cette PR, c'est vraiment pas le but.

L'alignement c'était une suggestion. Mais si ça entraine des discussions sans fin, en enchainant sur un remaniement complet du machin... Stop ! J'ai pas le temps ni l'énergie.

Je remets l'alignement comme c'était avant, ça peut bien rester comme ça une version de plus.

Désolé je suis un peu énervé là, une partie des échanges était bien frustrante.

> Peut être qu'on peut faire en 2 temps tcharles : intégrer tout ce que tu as fait là dessus sauf cet alignement de la première grosse icone ? Oui. Mais il y a même pas de 2ème temps à avoir. Cette PR est avant tout une refacto en arrière plan du html et du css. Et au passage, on arrondit quelques angles sur le plan graphique. Mais c'est tout. Pour l'instant ça reste le même bandeau, qui fonctionne de la même façon, avec les mêmes éléments. La refonte complète, c'est un beau sujet, ça va prendre du temps et des discussions, mais je voulais surtout pas l'aborder dans cette PR, c'est vraiment pas le but. L'alignement c'était une suggestion. Mais si ça entraine des discussions sans fin, en enchainant sur un remaniement complet du machin... Stop ! J'ai pas le temps ni l'énergie. Je remets l'alignement comme c'était avant, ça peut bien rester comme ça une version de plus. Désolé je suis un peu énervé là, une partie des échanges était bien frustrante.
Owner

Désolé je suis un peu énervé là, une partie des échanges était bien frustrante.

Je m'en excuse si c'est moi qui ait provoqué cela.

> Désolé je suis un peu énervé là, une partie des échanges était bien frustrante. Je m'en excuse si c'est moi qui ait provoqué cela.

Je suis impressionné par le boulot qui a été fait !
Lorsque j'ai lu sur le décalage il m'a fallu relire plusieurs fois pour comprendre de quoi vous parliez. Ce décalage ne me gêne absolument pas.
Bravo et merci beaucoup pour cette interface beaucoup plus agréable :)

Je suis impressionné par le boulot qui a été fait ! Lorsque j'ai lu sur le décalage il m'a fallu relire plusieurs fois pour comprendre de quoi vous parliez. Ce décalage ne me gêne absolument pas. Bravo et merci beaucoup pour cette interface beaucoup plus agréable :)

Je trouve ça quand même mieux avec la partie menu alignée collée à gauche. :)
Ça fait plus peaufiné, fini.

Je trouve ça quand même mieux avec la partie menu alignée collée à gauche. :) Ça fait plus peaufiné, fini.
tcharlss added 3 commits 2 weeks ago
Poster
Owner

C'est revert, visuellement le bandeau ne bouge donc pas dans l'ensemble, à part quelques détails qui ont été expliqués.
Je touche plus à cette PR pour ma part, elle contient ce qui était prévu, ni plus, ni moins.

C'est revert, visuellement le bandeau ne bouge donc pas dans l'ensemble, à part quelques détails qui ont été expliqués. Je touche plus à cette PR pour ma part, elle contient ce qui était prévu, ni plus, ni moins.
Owner

Désolé je suis un peu énervé là, une partie des échanges était bien frustrante.

Soutien, tu as fait un chouette boulot.

On ne peut pas savoir en CSS, à ma connaissance, à partir que quel moment un élément bascule ou va basculer. La seule chose qu'on pourrait dire c'est < telle largeur de viewport, passer en petites icones. Mais entre l'interface des rédactrices & rédacteurs, et celles des admins, il y a une grande différence dans la taille du menu. C'est difficile de trouver un point de basculement adapté.

On a une classe selon le statut sur le body, .statut_0minirezo (et même .webmestre_oui).

> Désolé je suis un peu énervé là, une partie des échanges était bien frustrante. Soutien, tu as fait un chouette boulot. > On ne peut pas savoir en CSS, à ma connaissance, à partir que quel moment un élément bascule ou va basculer. La seule chose qu'on pourrait dire c'est < telle largeur de viewport, passer en petites icones. *Mais* entre l'interface des rédactrices & rédacteurs, et celles des admins, il y a une grande différence dans la taille du menu. C'est difficile de trouver un point de basculement adapté. On a une classe selon le statut sur le body, .statut_0minirezo (et même .webmestre_oui).
Poster
Owner

@marcimat @nicod_ Je crois que le confinement a finit par me rendre un peu tendax... Allez des poutous à tout le monde.

Et merci @Jack31 pour la remarque :)

@marcimat @nicod_ Je crois que le confinement a finit par me rendre un peu tendax... Allez des poutous à tout le monde. Et merci @Jack31 pour la remarque :)
marcimat merged commit 9185fe291d into master 2 weeks ago
Owner

Et voilà ! In the pocket !
Merci.

Et voilà ! In the pocket ! Merci.
marcimat deleted branch dev/bando_ajustements 2 weeks ago
The pull request has been merged as 9185fe291d.
Sign in to join this conversation.
No reviewers
No Label
No Milestone
No Assignees
8 Participants
Notifications
Due Date

No due date set.

Dependencies

This pull request currently doesn't have any dependencies.

Loading…
There is no content yet.