Project

General

Profile

Development #67991

Nîmes : intégration graphique

Added by Corentin Séchet almost 2 years ago. Updated over 1 year ago.

Status:
Fermé
Priority:
Normal
Target version:
-
Start date:
05 August 2022
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

Sur la base de https://nimes.fr/


Files

logo.svg (18 KB) logo.svg Corentin Séchet, 10 August 2022 11:49 AM
combo-desktop.png (2.11 MB) combo-desktop.png Corentin Séchet, 10 August 2022 11:49 AM
combo-mobile.png (1.35 MB) combo-mobile.png Corentin Séchet, 10 August 2022 11:49 AM
wcs-desktop.png (418 KB) wcs-desktop.png Corentin Séchet, 10 August 2022 11:49 AM
wcs-mobile.png (1.51 MB) wcs-mobile.png Corentin Séchet, 10 August 2022 11:49 AM
0001-nimes-create-theme-67991.patch (6.54 KB) 0001-nimes-create-theme-67991.patch Corentin Séchet, 10 August 2022 11:50 AM
Screenshot 2022-08-23 at 10-19-45 Portail - Cellules.png (70.3 KB) Screenshot 2022-08-23 at 10-19-45 Portail - Cellules.png Header sur mobile A. B., 23 August 2022 10:41 AM
0001-nimes-create-theme-67991.patch (7.31 KB) 0001-nimes-create-theme-67991.patch Corentin Séchet, 29 August 2022 10:15 PM
Screenshot_20220830_093155.png (51.2 KB) Screenshot_20220830_093155.png Menu - body A. B., 30 August 2022 09:32 AM
Screenshot_20220830_094542.png (14.4 KB) Screenshot_20220830_094542.png Bordure menu A. B., 30 August 2022 09:46 AM
0001-nimes-create-theme-67991.patch (7.8 KB) 0001-nimes-create-theme-67991.patch Corentin Séchet, 30 August 2022 11:21 AM

Associated revisions

Revision 242adc54 (diff)
Added by Corentin Séchet over 1 year ago

nimes: create theme (#67991)

History

#2

Updated by Corentin Séchet almost 2 years ago

  • Status changed from Nouveau to En cours
#3

Updated by Corentin Séchet almost 2 years ago

#4

Updated by A. B. almost 2 years ago

Premier retour sur la base de mes tests en local, tes screenshots et ce que j'ai pu observer sur https://nimes.fr. Je trouve que leur site est assez fouilli et manque de cohérence, j'imagine que tu as du composer avec ça. Voici les trucs qui m'interrogent et méritent possiblement une adapation ?

1. Couleur body : #f6f5f4 (nimes.fr) vs #ffffff en local
2. Couleur menu: #ffffff (nimes.fr)
3. Footer semble plus petits sur nimes.fr (seule l'extrémité basse a un fond sombre) mais il semble y avoir deux sections de footer chez eux, une grande avec énormément de liens, et une autre sur une ligne.
4. Cellules : J'ai l'impression que les cellules me matchent pas les styles de nimes.fr (e.g https://www.nimes.fr/jeune/petite-enfance-0-3-ans.html)
- bordures et coin rouge rouges en local
- en tête de cellule avec un fond gris / rouge sur nimes.fr
5. Polices :
- Le corps est spécifié en arial sur nimes.fr vs liberation en local. Chez moi le rendu est le même, (j'ai l'impression que liberation sans n'est pas chargée du tout dans mon navigateur), mais ça gagnerait possiblement à être explicite
- le texte est plus petit mais aussi moins lisible sur nimes.fr, je ne sais pas quelle est la politique dans ce genre de cas, j'aurais tendance à garder ta version qui me paraît plus accessible
6. Inputs : sur nimes.fr (e.g https://www.nimes.fr/demarche.html) : fond blanc, focus bleu, pas de border-radius, bordure noire en bas
7. Boutons : Peut-être prendre le style du bouton de l'accueil, bloc latéral sur https://www.nimes.fr/jeune/inscriptions-scolaires.html ou contact dans le pied de page ?
8. Mobile :
- bordure blanche sous le headersuperflue en local ? (cf screenshot)
- réduire la taille du logo pour matcher nimes.fr

#5

Updated by Corentin Séchet over 1 year ago

Couleur body : #f6f5f4 (nimes.fr) vs #ffffff en local

Je pick bien du blanc sur le body, si tu parles du background

Couleur menu: #ffffff (nimes.fr)

le menu est en blanc chez moi

Footer semble plus petits sur nimes.fr

J'ai été un peu vite en besogne, j'ai ajouté une zone sous le footer en effet ("bas du pied de page" dans Combo)

J'ai l'impression que les cellules me matchent pas les styles de nimes.fr

J'ai trouvé ces cellules quelque part sur leur site, c'était rigolo à faire mais soit :) J'ai refait ça en mettant des fond gris dans la sidebar, un header rouge uniquement pour les cellules foldable, c'est très rouge sinon.

le texte est plus petit mais aussi moins lisible sur nimes.fr, je ne sais pas quelle est la politique dans ce genre de cas, j'aurais tendance à garder ta version qui me paraît plus accessible

Je suis de ton avis.

Inputs : sur nimes.fr (e.g https://www.nimes.fr/demarche.html) : fond blanc, focus bleu, pas de border-radius, bordure noire en bas

Mettre une border-bottom uniquement sous les inputs n'est pas trivial, on a beaucoup de widgets, et beaucoup de CSS qui utilise $widget-border (on a pas de $widget-border-width). Ça sort du cadre d'une inté native. J'ai passé le focus en bleu cependant.

Boutons : Peut-être prendre le style du bouton de l'accueil, bloc latéral sur https://www.nimes.fr/jeune/inscriptions-scolaires.html ou contact dans le pied de page ?

Oui, c'est fait

bordure blanche sous le headersuperflue en local ?

C'est parce que la page que tu as importée en local doit référencer un asset que tu n'as pas, supprimes l'image de la page et ça devrait s'en aller

réduire la taille du logo pour matcher nimes.fr

Ça m'ennuie parce que le sous-titre devient illisible si on fait ça. A voir avec les clients s'ils ont des retours là-dessus, qu'ils fournissent un logo adapté à une plus petite taille.

#6

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

Mettre une border-bottom uniquement sous les inputs n'est pas trivial, on a beaucoup de widgets, et beaucoup de CSS qui utilise $widget-border (on a pas de $widget-border-width). Ça sort du cadre d'une inté native. J'ai passé le focus en bleu cependant.

Éventuellement tu peux tester $form-style: light;

#7

Updated by Anaïs Ecuvillon over 1 year ago

Corentin Séchet a écrit :

Ça m'ennuie parce que le sous-titre devient illisible si on fait ça. A voir avec les clients s'ils ont des retours là-dessus, qu'ils fournissent un logo adapté à une plus petite taille.

en même temps, ce logo ainsi que le sous-titre sont dédiés au site de Nîmes.fr, je vais leur en demander un dédié pour le site de démarches, des recommandations ?

#8

Updated by A. B. over 1 year ago

Corentin Séchet a écrit :

Couleur body : #f6f5f4 (nimes.fr) vs #ffffff en local

Je pick bien du blanc sur le body, si tu parles du background

Waow, visiblement, il y a une inconsistence du rendu sur Chrome et Firefox. Sur Firefox, le body est légèrement grisé chez moi (cf capture ci jointe), sur Chrome il est bien blanc. J'imagine qu'il doit y avoir un style par défaut du navigateur qui diffère. Tu peux oublier ainsi que ma remarque et la suivante sur la couleur du menu.

J'ai été un peu vite en besogne, j'ai ajouté une zone sous le footer en effet ("bas du pied de page" dans Combo)

👌

J'ai l'impression que les cellules me matchent pas les styles de nimes.fr

J'ai trouvé ces cellules quelque part sur leur site, c'était rigolo à faire mais soit :) J'ai refait ça en mettant des fond gris dans la sidebar, un header rouge uniquement pour les cellules foldable, c'est très rouge sinon.

Ah, j'ai du les rater, j'ai croisé au moins 3 ou 4 styles différents sur leur site… Cette dernière version me parait bien

Inputs : sur nimes.fr (e.g https://www.nimes.fr/demarche.html) : fond blanc, focus bleu, pas de border-radius, bordure noire en bas

Mettre une border-bottom uniquement sous les inputs n'est pas trivial, on a beaucoup de widgets, et beaucoup de CSS qui utilise $widget-border (on a pas de $widget-border-width). Ça sort du cadre d'une inté native. J'ai passé le focus en bleu cependant.

Noté, top.

bordure blanche sous le headersuperflue en local ?

C'est parce que la page que tu as importée en local doit référencer un asset que tu n'as pas, supprimes l'image de la page et ça devrait s'en aller

J'avais bien une image inexistante qui avait sauté lors de l'import de ta page. Je l'ai enlevée (et il n'y a plus la 404 correspondante dans les logs navigateur), mais le problème semble toujours être là, cf capture ci-jointe. Si le souci ne se présente que chez moi, je suis okay pour considérer que c'est lié à mon environnement.

réduire la taille du logo pour matcher nimes.fr

Ça m'ennuie parce que le sous-titre devient illisible si on fait ça. A voir avec les clients s'ils ont des retours là-dessus, qu'ils fournissent un logo adapté à une plus petite taille.

Effectivement. Je suis okay pour laisser comme ça ou trouver un autre asset avec le client comme suggéré par Anaïs :)

#9

Updated by Corentin Séchet over 1 year ago

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

Éventuellement tu peux tester $form-style: light;

Magnifique, merci.

Anaïs Écuvillon a écrit:

en même temps, ce logo ainsi que le sous-titre sont dédiés au site de Nîmes.fr, je vais leur en demander un dédié pour le site de démarches, des recommandations ?

Du coup on pourra intégrer ça avec leur retours. S'ils pouvaient en faire un qui aille sur fond rouge juste, ça éviterai d'avoir trop de changements à faire.

Agate Berriot a écrit :

J'avais bien une image inexistante qui avait sauté lors de l'import de ta page. Je l'ai enlevée (et il n'y a plus la 404 correspondante dans les logs navigateur), mais le problème semble toujours être là, cf capture ci-jointe. Si le souci ne se présente que chez moi, je suis okay pour considérer que c'est lié à mon environnement.

C'est moi qui avait mal regardé, tu avais raison, c'est fixé.

#10

Updated by A. B. over 1 year ago

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

Corentin Séchet a écrit :

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

Éventuellement tu peux tester $form-style: light;

Magnifique, merci.

Testé en local, ça rend super bien !

Agate Berriot a écrit :

J'avais bien une image inexistante qui avait sauté lors de l'import de ta page. Je l'ai enlevée (et il n'y a plus la 404 correspondante dans les logs navigateur), mais le problème semble toujours être là, cf capture ci-jointe. Si le souci ne se présente que chez moi, je suis okay pour considérer que c'est lié à mon environnement.

C'est moi qui avait mal regardé, tu avais raison, c'est fixé.

Testé également, c'est nickel :)

#11

Updated by Corentin Séchet over 1 year ago

  • Status changed from Solution validée to Résolu (à déployer)
commit 43832f4ea83837e944b418232c05fcd5c9c3a175
Author: Corentin Séchet <csechet@entrouvert.com>
Date:   Fri Aug 5 16:05:16 2022 +0200

    nimes: create theme (#67991)
#12

Updated by Transition automatique over 1 year ago

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

Updated by Transition automatique over 1 year ago

Automatic expiration

Also available in: Atom PDF