Projet

Général

Profil

Development #68742

MNHN : Intégration graphique initiale

Ajouté par A. Berriot il y a plus d'un an. Mis à jour il y a plus d'un an.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
06 septembre 2022
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Cf tâche parente


Fichiers

charteMNHN_web_avril2021.pdf (15 Mo) charteMNHN_web_avril2021.pdf A. Berriot, 06 septembre 2022 08:46
Peek 2022-09-07 10-06.mp4 (4,15 Mo) Peek 2022-09-07 10-06.mp4 Demo compléte A. Berriot, 07 septembre 2022 10:08
Screenshot 2022-09-07 at 09-55-24 Portail - Accueil.png (50,5 ko) Screenshot 2022-09-07 at 09-55-24 Portail - Accueil.png Mobile - menu A. Berriot, 07 septembre 2022 10:08
Screenshot 2022-09-07 at 09-55-04 Portail - Accueil.png (85,6 ko) Screenshot 2022-09-07 at 09-55-04 Portail - Accueil.png Desktop 1 A. Berriot, 07 septembre 2022 10:09
Screenshot 2022-09-07 at 10-09-38 Portail - Mes demandes.png (260 ko) Screenshot 2022-09-07 at 10-09-38 Portail - Mes demandes.png Desktop 2 A. Berriot, 07 septembre 2022 10:10
0001-mnhn-int-gration-graphique-initiale-68742.patch (9,05 ko) 0001-mnhn-int-gration-graphique-initiale-68742.patch A. Berriot, 07 septembre 2022 10:22
wcs-steps-desktop.png (20,6 ko) wcs-steps-desktop.png Paul Marillonnet, 07 septembre 2022 11:22
wcs-steps-mobile.png (25,5 ko) wcs-steps-mobile.png Paul Marillonnet, 07 septembre 2022 11:22
Screenshot_20220907_135258-shadows.png (90,1 ko) Screenshot_20220907_135258-shadows.png Rendu ombrages Chrome A. Berriot, 07 septembre 2022 14:45
Screenshot 2022-09-07 at 14-44-52 Portail - Accueil.png (114 ko) Screenshot 2022-09-07 at 14-44-52 Portail - Accueil.png Footer en dur A. Berriot, 07 septembre 2022 14:46
0001-mnhn-int-gration-graphique-initiale-68742.patch (9,93 ko) 0001-mnhn-int-gration-graphique-initiale-68742.patch A. Berriot, 07 septembre 2022 14:47
0001-mnhn-new-theme-68742.patch (9,78 ko) 0001-mnhn-new-theme-68742.patch A. Berriot, 07 septembre 2022 16:02

Demandes liées

Lié à Intégrations graphiques Publik - Support #68795: Chevauchement champ carte sur un menu responsive défini dans le thèmeNouveau07 septembre 2022

Actions
Lié à Intégrations graphiques Publik - Bug #68796: La définition d’une variable $font-line-height dans le _vars.scss du thème reste sans effet (?)Fermé07 septembre 2022

Actions
Lié à Intégrations graphiques Publik - Development #68808: Marge basse en trop sur l'élement #side d'un formulaireNouveau07 septembre 2022

Actions

Révisions associées

Révision 16fd0b6c (diff)
Ajouté par A. Berriot il y a plus d'un an

mnhn: new theme (#68742)

Historique

#1

Mis à jour par A. Berriot il y a plus d'un an

Sur la base de https://www.mnhn.fr/ et de la charte graphique ci-jointe

#5

Mis à jour par A. Berriot il y a plus d'un an

#6

Mis à jour par Frédéric Péters il y a plus d'un an

gérer le multi-footer

Souvent on peut très bien juste avoir un niveau mais pour un exemple où ça va plus loin, il y a https://meudon.test.entrouvert.org/

Ce qu'on y a c'est templates/variants/meudon-2021/theme.html avec comme partie utile ici :

{% block footer-pre %}
<div id="theme-gray-footer-wrapper">
  <div id="theme-gray-footer" class="clearfix">
    {% placeholder "gray-footer" name="Pied de page gris" optional=True %}
  </div>
</div>
{% endblock %}

C'est le {% placeholder %} qui joue, il déclare une nouvelle zone d'édition possible dans combo.

Concernant la première partie "Tout l'univers du muséum" je serais pour réaliser une variante en dur, qui serait la même présentation logo / fond noir mais tout ça avec un texte/lien type "Retourner sur le site du muséum".

#7

Mis à jour par Paul Marillonnet il y a plus d'un an

En complément des remarques de Fred sur le pied-de-page, j’ai appliqué en local le thème et je note que :

· Je trouve l’effet d’ombre sous la nav un peu forcé par rapport au site institutionnel.

· Je retrouve pas sur le site institutionnel les effets de hover que tu as défini sur les liens. Je loupe un truc ?

· J’aurais bien vu une inversion des couleurs entre fond de la page et fond des cellules
(sur le site institutionnel les "cellules" sont sur un fond plus clair que le fond de la page, voir par exemple cette page https://www.mnhn.fr/fr/les-plantes-de-nos-jardins)

· Peut-être accroître le ratio entre la taille des titres et la taille du texte ? Sur le site institutionnel les titres sont bien plus massifs que le texte.

· Dans le formulaire, en mode desktop sur l’affichage des étapes à droit des champs, il y a une étrange marge entre la dernière étape et la fin de l’encadré. J’ai jamais constaté ça auparavant mais j’ai l’impression que c’est dans base-theme directement que c’est défini (voir capture wcs-steps-desktop.png). Étrange.

· En mode mobile, toujours cet affichage des étapes me paraît bizarre (voir capture wcs-steps-mobile.png, l’effet d’ombre est présent partout sauf sur la limite inférieure, laquelle présente une simple bordure 1px solide). Je serais pour retirer cet effet d’ombrage en mode mobile.

· Pas super fan de l’input text qui n’apparaît que par une bordure inférieure, sans effet de survol. À première vue je l’avais pas vu, et je croyais à un bogue d’affichage de mon formulaire de test. Sans savoir si je préfère la version du site institutionnel, celle-ci diffère avec ce que tu proposes, voir par exemple le formulaire d’inscription à la newsletter : https://www.mnhn.fr/fr/recevez-nos-actualites (formulaire pour lequel les champs présentent trop peu de contraste avec le fond, pas fan non plus, peut-être une autre solution à trouver).

· Pour le footer je pense que tu peux simplement prendre la partie du milieu ("Nous suivre", "Professionnels", "Où nous trouver"). Peut-être par exemple s’inspirer du thème de la Corrèze : https://services-en-ligne.correze.fr/ ? (lequel reprend lui aussi un affichage en trois pans horizontaux et des icônes / liens vers les réseaux sociaux)

· Plutôt que de déclarer une police distante (je ne vois ça fait que pour les thèmes de Quimper et Toulouse dans nos dépôts), je crois qu’assez systématiquement on cherche à proposer au client une police libre qui ressemble à celle initialement voulue.

· Pour le patche en lui-même, des plus puristes de la css te reprocheraient de mélanger espaces et tabulations pour l’indentation (je crois qu’ici on est plutôt team tab), mais perso ça ne me choque pas plus que ça :)

· Tu définis dans le config.json une ressource de bannière (header:background) que je ne retrouve pas reprise par la suite, ni dans la css ni dans tes captures. Je loupe un truc ?

–––––

Rien à voir avec la relecture du thème en lui-même, mais je vois au passage qu’il y a un glitch de chevauchement du champ carte sur le menu responsive en left-to-right. Je vais faire un ticket. Je vais ticketter aussi le $font-line-height que je n’arrive toujours pas à déclarer avec succès dans _vars.scss.

#8

Mis à jour par Paul Marillonnet il y a plus d'un an

  • Lié à Support #68795: Chevauchement champ carte sur un menu responsive défini dans le thème ajouté
#9

Mis à jour par Paul Marillonnet il y a plus d'un an

  • Lié à Bug #68796: La définition d’une variable $font-line-height dans le _vars.scss du thème reste sans effet (?) ajouté
#10

Mis à jour par A. Berriot il y a plus d'un an

Paul Marillonnet a écrit :

En complément des remarques de Fred sur le pied-de-page, j’ai appliqué en local le thème et je note que :

· Je trouve l’effet d’ombre sous la nav un peu forcé par rapport au site institutionnel.

Étonnant, le rendu semble différent chez toi. Sous chrome 105 ça rend ça chez moi (cf screenshot), justement j'avais fait gaffe que ça matche leur site. J'ai un rendu similaire sur Firefox 104. Tu utilise quel navigateur ?

· Je retrouve pas sur le site institutionnel les effets de hover que tu as défini sur les liens. Je loupe un truc ?

On les voit ponctuellement par exemple sur https://www.mnhn.fr/en/our-research-themes

· J’aurais bien vu une inversion des couleurs entre fond de la page et fond des cellules
(sur le site institutionnel les "cellules" sont sur un fond plus clair que le fond de la page, voir par exemple cette page https://www.mnhn.fr/fr/les-plantes-de-nos-jardins)

J'ai vu plusieurs versions, celle que tu as partagée (fond cellule plus clair que le fond de page), celle ci (https://www.mnhn.fr/fr/l-enseignement-et-la-formation), ou même https://www.mnhn.fr/fr ou on voit les deux. Je suis un peu embétée parce que leurs pages de contenus un peu plus classiques, typiquement https://www.mnhn.fr/fr/faq-contacts ou https://www.mnhn.fr/fr/familles, sont en fond blanc.

· Peut-être accroître le ratio entre la taille des titres et la taille du texte ? Sur le site institutionnel les titres sont bien plus massifs que le texte.

Je viens de changer ça, ça devrait être mieux (j'ai pas mis à leur niveau, nos cellules sont plus esquichées ça déborde vraiment trop)

· Dans le formulaire, en mode desktop sur l’affichage des étapes à droit des champs, il y a une étrange marge entre la dernière étape et la fin de l’encadré. J’ai jamais constaté ça auparavant mais j’ai l’impression que c’est dans base-theme directement que c’est défini (voir capture wcs-steps-desktop.png). Étrange.

Oui je l'ai vu aussi, ce n'est pas lié au thème MNHN a priori, je vais faire un ticket dédié.

· En mode mobile, toujours cet affichage des étapes me paraît bizarre (voir capture wcs-steps-mobile.png, l’effet d’ombre est présent partout sauf sur la limite inférieure, laquelle présente une simple bordure 1px solide). Je serais pour retirer cet effet d’ombrage en mode mobile.

Je l'ai enlevée sur mobile (c'était beaucoup plus visible chez toi à cause de cette histoire de rendu d'ombrage qui diffère entre nos navigateurs)

· Pas super fan de l’input text qui n’apparaît que par une bordure inférieure, sans effet de survol. À première vue je l’avais pas vu, et je croyais à un bogue d’affichage de mon formulaire de test. Sans savoir si je préfère la version du site institutionnel, celle-ci diffère avec ce que tu proposes, voir par exemple le formulaire d’inscription à la newsletter : https://www.mnhn.fr/fr/recevez-nos-actualites (formulaire pour lequel les champs présentent trop peu de contraste avec le fond, pas fan non plus, peut-être une autre solution à trouver).

J'avais activé le mode light pour les formulaires, mais tu as raison, c'est trop peu visible. Je suis repassé sur le mode normal, qui est plus accessible (leurs formulaires du site institutionnel me semblent mauvais de ce point de vue). J'ai aussi assombri légèrement la couleur de fond des input pour que ça ressorte plus.

· Pour le footer je pense que tu peux simplement prendre la partie du milieu ("Nous suivre", "Professionnels", "Où nous trouver"). Peut-être par exemple s’inspirer du thème de la Corrèze : https://services-en-ligne.correze.fr/ ? (lequel reprend lui aussi un affichage en trois pans horizontaux et des icônes / liens vers les réseaux sociaux)

J'ai intégré le footer en dur suggéré par Frédéric, je pense que je vais attendre le retour client pour intégrer un footer plus complexe, car je ne suis pas certaine de leur besoin en termes de contenus.

· Plutôt que de déclarer une police distante (je ne vois ça fait que pour les thèmes de Quimper et Toulouse dans nos dépôts), je crois qu’assez systématiquement on cherche à proposer au client une police libre qui ressemble à celle initialement voulue.

Assez d'accord aussi, je garde Montserrat.

· Pour le patche en lui-même, des plus puristes de la css te reprocheraient de mélanger espaces et tabulations pour l’indentation (je crois qu’ici on est plutôt team tab), mais perso ça ne me choque pas plus que ça :)

J'utilise effectivement des espaces systématiquement, les tabs sont probablement des résidus de copier coller (j'ai harmonisé en espaces).

· Tu définis dans le config.json une ressource de bannière (header:background) que je ne retrouve pas reprise par la suite, ni dans la css ni dans tes captures. Je loupe un truc ?

Bien vu, c'est corrigé.

–––––

Rien à voir avec la relecture du thème en lui-même, mais je vois au passage qu’il y a un glitch de chevauchement du champ carte sur le menu responsive en left-to-right. Je vais faire un ticket. Je vais ticketter aussi le $font-line-height que je n’arrive toujours pas à déclarer avec succès dans _vars.scss.

Merci !

#12

Mis à jour par A. Berriot il y a plus d'un an

  • Lié à Development #68808: Marge basse en trop sur l'élement #side d'un formulaire ajouté
#13

Mis à jour par Paul Marillonnet il y a plus d'un an

  • Statut changé de Solution proposée à Solution validée

Agate Berriot a écrit :

Étonnant, le rendu semble différent chez toi. Sous chrome 105 ça rend ça chez moi (cf screenshot), justement j'avais fait gaffe que ça matche leur site. J'ai un rendu similaire sur Firefox 104. Tu utilise quel navigateur ?

C’est plus en amont que le problème se pose : c’est mon compilo sassc qui n’aime pas la valeur de l’alpha '10%' passée en dernier argument de la fonction rgba(). Il ne prend pas en compte cette valeur d’alpha et la couleur générée est du noir opaque 100%.
J’ai remplacé par 0.1 et ça passe nickel. Est-ce que tu peux en faire de même dans le patche stp ? Je ne vois cet usage de l’alpha exprimé en pourcents nulle part dans la doc sass.

Pour info j’ai

$ sassc --version
sassc: [NA]
libsass: 3.6.5+20211226
sass2scss: 1.1.1
sass: 3.5

On les voit ponctuellement par exemple sur https://www.mnhn.fr/en/our-research-themes

Ok, j’avais loupé ça, désolé.

J'ai vu plusieurs versions, celle que tu as partagée (fond cellule plus clair que le fond de page), celle ci (https://www.mnhn.fr/fr/l-enseignement-et-la-formation), ou même https://www.mnhn.fr/fr ou on voit les deux. Je suis un peu embétée parce que leurs pages de contenus un peu plus classiques, typiquement https://www.mnhn.fr/fr/faq-contacts ou https://www.mnhn.fr/fr/familles, sont en fond blanc.

Oui, ok, restons sur le plus classique.

Je viens de changer ça, ça devrait être mieux (j'ai pas mis à leur niveau, nos cellules sont plus esquichées ça déborde vraiment trop)

Ok.

Oui je l'ai vu aussi, ce n'est pas lié au thème MNHN a priori, je vais faire un ticket dédié.

D’ac, merci.

Je l'ai enlevée sur mobile (c'était beaucoup plus visible chez toi à cause de cette histoire de rendu d'ombrage qui diffère entre nos navigateurs)

Ok, en mettant la valeur du canal alpha en décimal plutôt qu’en pourcents sans doute que ça doit être mieux, à toi de voir si on laisse comme dans la première version ou la seconde version du patche, pas d’avis sur la question.

J'avais activé le mode light pour les formulaires, mais tu as raison, c'est trop peu visible. Je suis repassé sur le mode normal, qui est plus accessible (leurs formulaires du site institutionnel me semblent mauvais de ce point de vue). J'ai aussi assombri légèrement la couleur de fond des input pour que ça ressorte plus.

C’est top comme ça, merci.

J'ai intégré le footer en dur suggéré par Frédéric, je pense que je vais attendre le retour client pour intégrer un footer plus complexe, car je ne suis pas certaine de leur besoin en termes de contenus.

Oui ok je pense que c’est déjà très bien.

Assez d'accord aussi, je garde Montserrat.

D’ac.

J'utilise effectivement des espaces systématiquement, les tabs sont probablement des résidus de copier coller (j'ai harmonisé en espaces).

Ah oui ok c’est du copier-coller, j’avais pas capté. Merci pour l’harmonisation :)

––––

Modulo le tout petit ajustement sur le format de la valeur du canal alpha pour les appels à la fonction rgba dans le scss, c’est tout bon pour moi, ack.

#14

Mis à jour par Frédéric Péters il y a plus d'un an

(ne pas oublier de réécrire le message de commit)

#15

Mis à jour par A. Berriot il y a plus d'un an

#16

Mis à jour par A. Berriot il y a plus d'un an

Frédéric Péters a écrit :

(ne pas oublier de réécrire le message de commit)

Fait, j'espère que j'ai le bon format.

Paul, j'ai corrigé le souci d'alpha exprimé en pourcent, j'utilise scss et pas sassc d'où la différence de comportement à mon avis.

#17

Mis à jour par Corentin Séchet il y a plus d'un an

Ça ne demande pas de nouvelle version du patch, je laisse Paul relire, mais pour l'avenir :

Agate Berriot a écrit :

J'utilise effectivement des espaces systématiquement, les tabs sont probablement des résidus de copier coller (j'ai harmonisé en espaces).

La grosse majorité des thèmes utilisent des tabs, de mémoire Thomas J. m'avait demandé d'en utiliser.

j'utilise scss et pas sassc d'où la différence de comportement à mon avis.

On utilise une vieille version de sassc (qui n'est plus mis à jour), parce que c'est dans les paquets Debian j'imagine. Il vaut mieux s'en tenir à ça, il y a des différences selon les implémentations (#67858 par ex.)

#18

Mis à jour par Paul Marillonnet il y a plus d'un an

  • Statut changé de Solution proposée à Solution validée

Je valide, et je pousse en l’absence d’Agate tel qu’elle me l’a demandé hier.

#19

Mis à jour par Paul Marillonnet il y a plus d'un an

  • Statut changé de Solution validée à Résolu (à déployer)
commit 16fd0b6cffdab482a4cb4c3996e51229b4e684e3
Author: Agate Berriot <aberriot@entrouvert.com>
Date:   Tue Sep 6 11:43:42 2022 +0200

    mnhn: new theme (#68742)
#20

Mis à jour par Transition automatique il y a plus d'un an

  • Statut changé de Résolu (à déployer) à Solution déployée
#21

Mis à jour par Transition automatique il y a plus d'un an

Automatic expiration

Formats disponibles : Atom PDF