Project

General

Profile

Development #68742

MNHN : Intégration graphique initiale

Added by A. B. over 1 year ago. Updated over 1 year ago.

Status:
Fermé
Priority:
Normal
Assignee:
Target version:
-
Start date:
06 September 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

Cf tâche parente


Files

charteMNHN_web_avril2021.pdf (15 MB) charteMNHN_web_avril2021.pdf A. B., 06 September 2022 08:46 AM
Peek 2022-09-07 10-06.mp4 (4.15 MB) Peek 2022-09-07 10-06.mp4 Demo compléte A. B., 07 September 2022 10:08 AM
Screenshot 2022-09-07 at 09-55-24 Portail - Accueil.png (50.5 KB) Screenshot 2022-09-07 at 09-55-24 Portail - Accueil.png Mobile - menu A. B., 07 September 2022 10:08 AM
Screenshot 2022-09-07 at 09-55-04 Portail - Accueil.png (85.6 KB) Screenshot 2022-09-07 at 09-55-04 Portail - Accueil.png Desktop 1 A. B., 07 September 2022 10:09 AM
Screenshot 2022-09-07 at 10-09-38 Portail - Mes demandes.png (260 KB) Screenshot 2022-09-07 at 10-09-38 Portail - Mes demandes.png Desktop 2 A. B., 07 September 2022 10:10 AM
0001-mnhn-int-gration-graphique-initiale-68742.patch (9.05 KB) 0001-mnhn-int-gration-graphique-initiale-68742.patch A. B., 07 September 2022 10:22 AM
wcs-steps-desktop.png (20.6 KB) wcs-steps-desktop.png Paul Marillonnet, 07 September 2022 11:22 AM
wcs-steps-mobile.png (25.5 KB) wcs-steps-mobile.png Paul Marillonnet, 07 September 2022 11:22 AM
Screenshot_20220907_135258-shadows.png (90.1 KB) Screenshot_20220907_135258-shadows.png Rendu ombrages Chrome A. B., 07 September 2022 02:45 PM
Screenshot 2022-09-07 at 14-44-52 Portail - Accueil.png (114 KB) Screenshot 2022-09-07 at 14-44-52 Portail - Accueil.png Footer en dur A. B., 07 September 2022 02:46 PM
0001-mnhn-int-gration-graphique-initiale-68742.patch (9.93 KB) 0001-mnhn-int-gration-graphique-initiale-68742.patch A. B., 07 September 2022 02:47 PM
0001-mnhn-new-theme-68742.patch (9.78 KB) 0001-mnhn-new-theme-68742.patch A. B., 07 September 2022 04:02 PM

Related issues

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

Actions
Related to 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 September 2022

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

Actions

Associated revisions

Revision 16fd0b6c (diff)
Added by A. B. over 1 year ago

mnhn: new theme (#68742)

History

#1

Updated by A. B. over 1 year ago

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

#5

Updated by A. B. over 1 year ago

#6

Updated by Frédéric Péters (de retour le 27 mai) over 1 year ago

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

Updated by Paul Marillonnet over 1 year ago

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

Updated by Paul Marillonnet over 1 year ago

  • Related to Support #68795: Chevauchement champ carte sur un menu responsive défini dans le thème added
#9

Updated by Paul Marillonnet over 1 year ago

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

Updated by A. B. over 1 year ago

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

Updated by A. B. over 1 year ago

  • Related to Development #68808: Marge basse en trop sur l'élement #side d'un formulaire added
#13

Updated by Paul Marillonnet over 1 year ago

  • Status changed from Solution proposée to 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

Updated by Frédéric Péters (de retour le 27 mai) over 1 year ago

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

#15

Updated by A. B. over 1 year ago

#16

Updated by A. B. over 1 year ago

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

Updated by Corentin Séchet over 1 year ago

Ç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

Updated by Paul Marillonnet over 1 year ago

  • Status changed from Solution proposée to Solution validée

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

#19

Updated by Paul Marillonnet over 1 year ago

  • Status changed from Solution validée to 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

Updated by Transition automatique over 1 year ago

  • Status changed from Résolu (à déployer) to Solution déployée
#21

Updated by Transition automatique over 1 year ago

Automatic expiration

Also available in: Atom PDF