Produits Entr'ouvert » Intégrations graphiques Publik

Quelques captures pour une idée de ce que ça à quoi ça pourrait ressembler, avec notamment l’ajout du gabarit combo trois colonnes, car structuration récurrente sur le site institutionnel.

Qui d'autre peut porter un regard avisé sur cette proposition de Paul avec moi ?

• très ok de manière générale.

• manque en en-tête un titre du genre "Démarches en ligne"
• pour la proposition "mobile", la différence de bordures g/d entre l'en-tête et le corps de la page ne va pas : captures #68676, 68678 et 68675
• Question en-tête mobile, si je regarde des sites comme https://vosdemarches.cannes.com/ ou demarches.cantal.fr on a des conflits entre le logo, les boutons de connexion, le titre, etc. Le site https://portail-angouleme.test.entrouvert.org/ est plutôt pas mal avec le menu burger à droite, le logo sous les boutons de connexion, et un éventuel titre "Démarches en ligne". On peut caser tout ça ? Je mets en pj un exemple bidouillé par mes soins, qui ne vaut, grosso modo que pour les proportions.
• Question en-tête desktop, je garderais le "Ville de" au-dessus de Le Plessis-Trévise. Je garderais autour du logo les mêmes agencements du texte, en remplaçant "Toute l'info de votre ville au quotidien" par "Démarches en ligne".

• le version page d'accueil sur 3 colonnes me plaît. Intégrer la recherche et le code de suivi à ces 3 colonnes ?

Pour les deux versions : a priori il n'y aura pas besoin de menus déroulants mais juste trois liens dans le menu du haut : Accueil, Mes demandes, Mon compte.

D'autres choses que je n'aurais pas vues ?

En complément des retours de Chloé et Thomas, je fais une relecture plus complète (avec test en local).

Je n'ai rien vu de bloquant, ce sont surtout des petites choses / différences avec le site https://www.leplessistrevise.fr/ :

- Le line-height semble différent (un peu moins compact sur leur site), il est à 1.5em chez eux et 1.4 dans le thème. Ça vaut peut être le coup d'utiliser le tout nouveau https://dev.entrouvert.org/issues/68540 pour uniformiser
- Le style des boutons diffère (couleur, radius), je pense qu'on pourrait garder ce qui est présenté sur https://www.leplessistrevise.fr/ma-ville/autres/offres-demplois/ par exemple (cf pièce jointe)
- le thème applique un border radius assez important sur les input, que je ne retrouve pas sur https://www.leplessistrevise.fr/nous-contacter/envoyer-une-candidature/ par exemple. La couleur de focus est aussi différente (bleu sur leur site, pas de changement dans le thème)
- les titres 1 et 2 manquent parfois de padding, ce qui les colle à la bordure du contenant (cf pièce jointe)
- les titres de cellules sont peut-être un peu gros (cf pièce jointes). Je ne trouve pas d'équivalent à leurs cellules chez nous, mais sur des layouts à deux ou trois colonnes, avec les bordures, ça me parait trop chargé
- je constate une différence de largeur entre le header/nav et le main, cf pièce jointe. À mon sens, le header devrait faire la même taille que le main
- le width a 60% pose problème sur des écrans un peu étroits, cela fait beaucoup d'espace perdu. Je pense qu'on pourrait mettre un max width à 840 (pour matcher la taille d'une colonne principale de leur site, par exemple celle de https://www.leplessistrevise.fr/temps-libre/culture/mediatheque-jacques-duhamel/) et simplement passer à width = 100% sur les écrans plus étroits

Je reprends point par point les retours faits ici :

–––––

• manque en en-tête un titre du genre "Démarches en ligne"

Ok, j’ai ajouté l’html nécessaire pour l’entête dans le gabarit trois colonnes.

• pour la proposition "mobile", la différence de bordures g/d entre l'en-tête et le corps de la page ne va pas : captures #68676, 68678 et 68675

Pas compris, désolé, je ne vois pas de quoi tu parles sur les captures :/

• Question en-tête mobile, si je regarde des sites comme https://vosdemarches.cannes.com/ ou demarches.cantal.fr on a des conflits entre le logo, les boutons de connexion, le titre, etc. Le site https://portail-angouleme.test.entrouvert.org/ est plutôt pas mal avec le menu burger à droite, le logo sous les boutons de connexion, et un éventuel titre "Démarches en ligne". On peut caser tout ça ? Je mets en pj un exemple bidouillé par mes soins, qui ne vaut, grosso modo que pour les proportions.

Sur le portail d’Angoulême moi j’ai le menu burger à gauche (?)
Par contre oui, le menu responsive qui s’ouvre de gauche à droite c’est plus propre et ça colle davantage au site institutionnel. C’est natif dans base-theme et configuré dans cette nouvelle version de ce patche.
Pour le sous titre du site, à ma connaissance c’est pas natif par contre. Je ne me sens pas trop de modifier le gabarit là-dessus, j’ai peur que ça casse des trucs :/

• Question en-tête desktop, je garderais le "Ville de" au-dessus de Le Plessis-Trévise. Je garderais autour du logo les mêmes agencements du texte, en remplaçant "Toute l'info de votre ville au quotidien" par "Démarches en ligne".

Même remarque que ci-dessus : pas natif sauf erreur de ma part.

Version desktop :

• le version page d'accueil sur 3 colonnes me plaît. Intégrer la recherche et le code de suivi à ces 3 colonnes ?

Oui, le gabarit est modifié dans cette nouvelle version du patch pour y inclure un espace d’entête sur cette page à 3 colonnes.

Pour les deux versions : a priori il n'y aura pas besoin de menus déroulants mais juste trois liens dans le menu du haut : Accueil, Mes demandes, Mon compte.

Ok, je laisse quand même en l’état au cas où les sous-menu s’avèrent nécessaires par la suite.

–––––

Pour la taille du logo et l'affichage du titre du site, tu peux maintenant regarder du côté des variables
$header-logo-size
$show-site-title

Tu peux gagner quelques lignes de code custom.
Ticket avec exemple #64893

Top, merci, je ne connaissais pas ces deux variables, que j’ai incluses dans cette nouvelle version du patche.

––––––

- Le line-height semble différent (un peu moins compact sur leur site), il est à 1.5em chez eux et 1.4 dans le thème. Ça vaut peut être le coup d'utiliser le tout nouveau https://dev.entrouvert.org/issues/68540 pour uniformiser

Bien vu, c’est corrigé, avec la nouvelle variable que tu mentionnes ici.

- Le style des boutons diffère (couleur, radius), je pense qu'on pourrait garder ce qui est présenté sur https://www.leplessistrevise.fr/ma-ville/autres/offres-demplois/ par exemple (cf pièce jointe)

Corrigé aussi.

- le thème applique un border radius assez important sur les input, que je ne retrouve pas sur https://www.leplessistrevise.fr/nous-contacter/envoyer-une-candidature/ par exemple. La couleur de focus est aussi différente (bleu sur leur site, pas de changement dans le thème)

Oui, craquage de mon côté, c’est pas du tout présent sur le site institutionnel. J’ai corrigé.

- les titres 1 et 2 manquent parfois de padding, ce qui les colle à la bordure du contenant (cf pièce jointe)

Un style spécifique aux titres, sans bordure ni fond pour la cellule parente, à l’aide de la classe css custom page-title sur la cellule texte posée dans la page combo (classe stylée dans cette nouvelle version du patche).

- les titres de cellules sont peut-être un peu gros (cf pièce jointes). Je ne trouve pas d'équivalent à leurs cellules chez nous, mais sur des layouts à deux ou trois colonnes, avec les bordures, ça me parait trop chargé

Ok, je suis passé de 30px à 20px, ça a l’air mieux, en effet.

- je constate une différence de largeur entre le header/nav et le main, cf pièce jointe. À mon sens, le header devrait faire la même taille que le main

Ok, ça ne me choquait pas en l’état mais je n’ai pas l’œil pour ce genre de choses. Je modifie pour uniformiser la largeur.

- le width a 60% pose problème sur des écrans un peu étroits, cela fait beaucoup d'espace perdu. Je pense qu'on pourrait mettre un max width à 840 (pour matcher la taille d'une colonne principale de leur site, par exemple celle de https://www.leplessistrevise.fr/temps-libre/culture/mediatheque-jacques-duhamel/) et simplement passer à width = 100% sur les écrans plus étroits

Oui tu as raison, c’est corrigé.

––––––

Nouvelle version du patche et les captures à jour qui vont avec.

Discussion de vive-voix avec Chloé sur ses retours que je ne comprenais pas par écrit. La seule chose qui reste est le titre dans l’entête qu’elle trouve affiché de façon trop austère par rapport au site institutionnel.
Je vais voir dans quelle mesure je peux adapter l’affichage du texte (ou carrément prendre une image à la place, et remettre le texte aligné à -10000px).

Paul Marillonnet a écrit :

Je vais voir dans quelle mesure je peux adapter l’affichage du texte (ou carrément prendre une image à la place, et remettre le texte aligné à -10000px).

Allez, plutôt que d’inventer un truc plus ou moins (surtout moins) compatible base-theme natif, je prends une image.

commit 99f5b0a32e9ed2d92dfe6f98815cdf67ae86c8cd
Author: Paul Marillonnet <pmarillonnet@entrouvert.com>
Date:   Fri Aug 12 10:48:11 2022 +0200

    leplessistrevise: add theme (#67231)