Project

General

Profile

Development #55457

nouveau thème: Guérande

Added by Thomas Jund 3 months ago. Updated 27 days ago.

Status:
Fermé
Priority:
Normal
Target version:
-
Start date:
07 Jul 2021
Due date:
31 Aug 2021
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

Ville du projet Cap Atlantique
ressource disponibles ticket #51826


Files

guerande_8.png (99.8 KB) guerande_8.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_4.png (134 KB) guerande_4.png Paul Marillonnet, 03 Aug 2021 04:15 PM
0001-theme-add-guerande-55457.patch (44.7 KB) 0001-theme-add-guerande-55457.patch Paul Marillonnet, 03 Aug 2021 04:15 PM
box-sizing-glitch.png (44.3 KB) box-sizing-glitch.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_6.png (207 KB) guerande_6.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_7.png (108 KB) guerande_7.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_5.png (2.47 MB) guerande_5.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_3.png (134 KB) guerande_3.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_2.png (373 KB) guerande_2.png Paul Marillonnet, 03 Aug 2021 04:15 PM
guerande_1.png (2.4 MB) guerande_1.png Paul Marillonnet, 03 Aug 2021 04:15 PM
export_page_index_20210811.json (13.3 KB) export_page_index_20210811.json Paul Marillonnet, 11 Aug 2021 11:04 AM
site_export_20210811.tar (14.7 MB) site_export_20210811.tar Paul Marillonnet, 11 Aug 2021 11:05 AM
0002-guerande-use-combo-asset-to-manage-header-logo.patch (20 KB) 0002-guerande-use-combo-asset-to-manage-header-logo.patch Thomas Jund, 11 Aug 2021 05:30 PM
0003-guerande-use-combo-asset-to-manage-footer-logo.patch (1.23 KB) 0003-guerande-use-combo-asset-to-manage-footer-logo.patch Thomas Jund, 11 Aug 2021 05:32 PM
0005-guerande-remove-font-size-var.patch (695 Bytes) 0005-guerande-remove-font-size-var.patch Thomas Jund, 11 Aug 2021 05:33 PM
0007-guerande-use-core-sass-vars-to-manage-cell-foldable-.patch (1.43 KB) 0007-guerande-use-core-sass-vars-to-manage-cell-foldable-.patch Thomas Jund, 11 Aug 2021 05:35 PM
0008-guerande-globalize-page-header-block.patch (3.02 KB) 0008-guerande-globalize-page-header-block.patch Thomas Jund, 11 Aug 2021 05:37 PM
0009-guerande-fixe-column-size.patch (639 Bytes) 0009-guerande-fixe-column-size.patch Thomas Jund, 11 Aug 2021 05:39 PM
0011-guerande-blanc-sur-blanc-tout-fout-le-camp.patch (782 Bytes) 0011-guerande-blanc-sur-blanc-tout-fout-le-camp.patch Thomas Jund, 11 Aug 2021 05:49 PM
0010-guerande-hamonize-cell-display-and-color-contrast-of.patch (2.6 KB) 0010-guerande-hamonize-cell-display-and-color-contrast-of.patch Thomas Jund, 11 Aug 2021 05:49 PM
0001-theme-add-guerande-55457.patch (18.2 KB) 0001-theme-add-guerande-55457.patch Paul Marillonnet, 30 Aug 2021 04:24 PM
0001-theme-add-guerande-55457.patch (18.3 KB) 0001-theme-add-guerande-55457.patch Paul Marillonnet, 31 Aug 2021 04:09 PM

Associated revisions

Revision 32fc5e98 (diff)
Added by Paul Marillonnet 28 days ago

theme: add guerande (#55457)

History

#2

Updated by Paul Marillonnet 2 months ago

  • Assignee changed from Thomas Jund to Paul Marillonnet
  • Due date set to 31 Aug 2021

On me dit dans l’oreillette que ça n’a pas encore commencé. Je te déleste de ce thème Thomas.

#3

Updated by Paul Marillonnet 2 months ago

Premier vrai obstacle pour moi, le symbole "+" directement à droite du nom de la catégorie de démarches dans la page d’accueil.

Dans notre framework de thème on voit vraiment ça comme deux choses séparées — d’abord le titre de catégorie avec possiblement une image et une description, ensuite viennent la liste des démarches.
Pour faire les choses bien il faudrait fournir un fichier forms_of_category.html dédié judicieusement modifié ; mais après quelques essais infructueux il faut que je me documente un peu plus avant de revenir à la charge.

Bien sûr, il faudra faire ça de manière à ce que les boîtes flex ne soient pas toutes moches quand on clique sur le "+" et qu’on dépile la liste démarches de la catégorie.

#9

Updated by Paul Marillonnet 2 months ago

Pour info encore, il faudra un bout de gabarit personnalisé pour le footer.
En deux parties comme celui visible dans la maquette, à ma connaissance on ne fait pas ça dans les thèmes natifs.

#10

Updated by Marie Kuntz 2 months ago

Paul Marillonnet a écrit :

Pour info encore, il faudra un bout de gabarit personnalisé pour le footer.
En deux parties comme celui visible dans la maquette, à ma connaissance on ne fait pas ça dans les thèmes natifs.

Prévu en utilisation grid, donc footer "normal" à prévoir

#23

Updated by Paul Marillonnet 2 months ago

Marie, il y a des variations entre le menu de la maquette png et le pdf de zonings.
Je me fie à la maquette png en tant que document le moins générique des deux, mais ça laisse en suspens la question des liens de connexion/inscription, et d’autres choses qui n’apparaisse pas sur la maquette, par exemple les entrées "Mon profil" et "Toutes les démarches".
Pour te donner une idée, sur mon devinst actuellement ça s’affiche comme cela

Autre question qui va se poser aussi : les pictos en bas de page, à gauche des liens "Nous contacter" et "Venir à l’hôtel de ville", sur le site institutionnel, qui j’imagine sont la propriété de la boîte de créa graphique ayant fait le site institutionnel, auquel cas on ne peut pas les inclure dans le dépôt devinst de thème.

#24

Updated by Paul Marillonnet about 2 months ago

Paul Marillonnet a écrit :

[…]
Pour te donner une idée, sur mon devinst actuellement ça s’affiche comme cela

Et en mode mobile, ce serait ça.

#25

Updated by Paul Marillonnet about 2 months ago

On pourrait partir de cette base pour discuter de ce qui va et de ce qu’il faut encore modifier.
Huit captures numérotées, respectivement la page principale, un formulaire, les infos de compte et l’écran de connexion ; le tout en modes desktop et mobile.

Trois choses à signaler :
  • un glitch sur la dernière div du pied de page en mode desktop en écran relativement étroit (cf. en bas à droite de la capture box-sizing-glitch.png), j’ai joué avec le box-sizing de la div et le padding de la div parente, sans succès, je capte pas le truc pour l’instant ;
  • en l'état les cellules de catégories de démarches se déplient en instantané, sans transition ;
  • j’ai testé avec l’ajout d’une cellule de code de suivi sur la page principale, ça m’a l’air bon.
#26

Updated by Marie Kuntz about 2 months ago

Je vois qu'il te manquait une info essentielle : les pages authentik sont gérées par une autre instance, et elles seront chartées de manière très neutre. Je suis désolée pour l'oubli :(

#27

Updated by Paul Marillonnet about 2 months ago

Marie Kuntz a écrit :

Je vois qu'il te manquait une info essentielle : les pages authentik sont gérées par une autre instance, et elles seront chartées de manière très neutre. Je suis désolée pour l'oubli :(

Pas de souci Marie, le gros du travail est allé sur tout ce qui se voit sur les captures 1 et 5.

#28

Updated by Thomas Jund about 2 months ago

  • Assignee changed from Paul Marillonnet to Thomas Jund
  • Status changed from Solution proposée to En cours

Je reprends sur cette base.

#30

Updated by Thomas Jund about 2 months ago

  • Assignee changed from Thomas Jund to Paul Marillonnet
#35

Updated by Thomas Jund about 2 months ago

Permière série de patchs (branch à jour)

Patch 002 :
gérer le logo du header depuis un asset combo plutôt qu'en dur.

Patch 003:
Idem pour le logo du footer.

Patch 005:
Pour la variable $font-size, 1em === 100%, donc inutile.

Patch 007:
Réponse à une question précédement posée, il y a 2 variables sass pour modifier l'icon open et close des foldable cells.

Patch 008:
Ne sachant pas du tout ce que le client va vouloir faire avec sa plateforme, j'ai exposé le bloc "page-header" à tous les templates.

Patch 009:
Fix la taille des colonnes sur template 3 colonnes. Tu étais en flex auto, ce qui peut donner des largeurs différentes à chaque colonne en fonction du contenu.

Patch 010:
Tu styles uniquement les cellules "form-of-category". Mais les pages seront très certainement composées dez cellules diverses. J'ai donc appliqué le layout mobile à toutes les cellules (avec une préférence pour max-width plutôt que 7% sur les margins) et appliqué le même border radius à toutes les cellules.
Je simplifie les styles des links-list que tu appliques à 'forms-of-category' pour rendre plus proche des links-list présentes dans les autre cellules.
J'applique les styles des cells 'forms-of-category' à sa soeur 'links list cell' et je donne un peu plus de contraste aux
liens pour des raisons d'a11y.

Patch 011:
Mettre les liens en blanc sur un background blanc, quelle drôle d'idée :) Tu voulais faire quoi ?

#37

Updated by Paul Marillonnet about 1 month ago

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

Thomas Jund a écrit :

Permière série de patchs (branch à jour)

Patch 002 :
gérer le logo du header depuis un asset combo plutôt qu'en dur.

Patch 003:
Idem pour le logo du footer.

Ok, je virerai ce des fichiers de l’index git.

Patch 005:
Pour la variable $font-size, 1em === 100%, donc inutile.

Ok.

Patch 007:
Réponse à une question précédement posée, il y a 2 variables sass pour modifier l'icon open et close des foldable cells.

Top, j’avais pas capté le truc, merci.

Patch 008:
Ne sachant pas du tout ce que le client va vouloir faire avec sa plateforme, j'ai exposé le bloc "page-header" à tous les templates.

Ok.

Patch 009:
Fix la taille des colonnes sur template 3 colonnes. Tu étais en flex auto, ce qui peut donner des largeurs différentes à chaque colonne en fonction du contenu.

Ok.

Patch 010:
Tu styles uniquement les cellules "form-of-category". Mais les pages seront très certainement composées dez cellules diverses. J'ai donc appliqué le layout mobile à toutes les cellules (avec une préférence pour max-width plutôt que 7% sur les margins) et appliqué le même border radius à toutes les cellules.
Je simplifie les styles des links-list que tu appliques à 'forms-of-category' pour rendre plus proche des links-list présentes dans les autre cellules.
J'applique les styles des cells 'forms-of-category' à sa soeur 'links list cell' et je donne un peu plus de contraste aux
liens pour des raisons d'a11y.

Top, merci.

Patch 011:
Mettre les liens en blanc sur un background blanc, quelle drôle d'idée :) Tu voulais faire quoi ?

Un oubli de ma part, j’avais pas constaté l’erreur dans mes tests…

Tout testé en local, c’est ok pour moi pour cette série de patches, on peut squasher et retirer les fichiers images devenus inutiles car gérés depuis les ressources combo.
Merci beaucoup pour les corrections. J’espère que ça t’a quand même pris moins de temps que de faire le thème à partir de zéro…

#40

Updated by Paul Marillonnet 29 days ago

#42

Updated by Thomas Jund 28 days ago

Quelques dernières retouches :

Tu as fixé la hauteur de l'image via CSS à 250px de haut. J'ai baissé un poil à 220px;
J'ai contraint l'image à toujours occuper les 220px de haut et toute la largeur de picture

    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
    }

J'ai amélioré le selecteur `grid-*

  // discard grid properties in mobile mode
  div[class^="grid-"],
  div[class*=" grid-"] { 

pour être certains que cela ne rentrera aps en conflit avec les class `fx-grid-*` du nouveéau system de grille.

J'ai légèrement augmenté la taille des titres des cellules

$title-font-size: 1.2em;

Et j'ai corrigé un peu la mise en forme (espaces, tab, etc.)

Branche à jour avec mon commit.

#43

Updated by Paul Marillonnet 28 days ago

Thomas Jund a écrit :

Quelques dernières retouches :

Tu as fixé la hauteur de l'image via CSS à 250px de haut. J'ai baissé un poil à 220px;
J'ai contraint l'image à toujours occuper les 220px de haut et toute la largeur de picture

Ok.

J'ai amélioré le selecteur `grid-*

[...]

pour être certains que cela ne rentrera aps en conflit avec les class `fx-grid-*` du nouveéau system de grille.

Ok.

J'ai légèrement augmenté la taille des titres des cellules
[...]

D’ac.

Et j'ai corrigé un peu la mise en forme (espaces, tab, etc.)

Ok.

Branche à jour avec mon commit.

Merci. Tout squashé ici et dans la branche. Si c’est bon pour toi, on envoie.

#44

Updated by Thomas Jund 28 days ago

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

Updated by Paul Marillonnet 28 days ago

  • Status changed from Solution validée to Résolu (à déployer)
commit 32fc5e98c5ee6ca8990cb12bbcc1e6f71c15adb3
Author: Paul Marillonnet <pmarillonnet@entrouvert.com>
Date:   Mon Jul 19 11:57:07 2021 +0200

    theme: add guerande (#55457)
#46

Updated by Frédéric Péters 28 days ago

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

Updated by Marie Kuntz 27 days ago

Quels sont les styles spéciaux à utiliser ? par exemple, pour avoir un fond beige dans le footer

#48

Updated by Thomas Jund 27 days ago

  • Status changed from Solution déployée to Information nécessaire
#49

Updated by Paul Marillonnet 27 days ago

Les classes css pour les différents éléments de page sont toujours ceux de l’export que Thomas m’avait demandé (#55457-32), en l’occurrence celles de la troisième celle du footer, apparaissant en beige, sont "grid-1-3 menu-cross".

#50

Updated by Marie Kuntz 27 days ago

  • Status changed from Information nécessaire to Fermé

Pardon, je n'avais pas vu ton export de site.

Also available in: Atom PDF