Development #55457
nouveau thème: Guérande
0%
Description
Ville du projet Cap Atlantique
ressource disponibles ticket #51826
Fichiers
Révisions associées
Historique
Mis à jour par Paul Marillonnet il y a presque 3 ans
- Echéance mis à 31 août 2021
- Assigné à changé de Thomas Jund (congés, retour le 29/04) à Paul Marillonnet
On me dit dans l’oreillette que ça n’a pas encore commencé. Je te déleste de ce thème Thomas.
Mis à jour par Paul Marillonnet il y a presque 3 ans
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.
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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.
Mis à jour par Marie Kuntz il y a plus de 2 ans
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
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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.
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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.
Mis à jour par Paul Marillonnet il y a plus de 2 ans
- Fichier guerande_8.png guerande_8.png ajouté
- Fichier guerande_4.png guerande_4.png ajouté
- Fichier 0001-theme-add-guerande-55457.patch 0001-theme-add-guerande-55457.patch ajouté
- Fichier box-sizing-glitch.png box-sizing-glitch.png ajouté
- Fichier guerande_6.png guerande_6.png ajouté
- Fichier guerande_5.png guerande_5.png ajouté
- Fichier guerande_7.png guerande_7.png ajouté
- Fichier guerande_3.png guerande_3.png ajouté
- Fichier guerande_2.png guerande_2.png ajouté
- Fichier guerande_1.png guerande_1.png ajouté
- Statut changé de En cours à Solution proposée
- Patch proposed changé de Non à Oui
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.
- 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.
Mis à jour par Marie Kuntz il y a plus de 2 ans
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 :(
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Statut changé de Solution proposée à En cours
- Assigné à changé de Paul Marillonnet à Thomas Jund (congés, retour le 29/04)
Je reprends sur cette base.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Assigné à changé de Thomas Jund (congés, retour le 29/04) à Paul Marillonnet
Mis à jour par Paul Marillonnet il y a plus de 2 ans
- Fichier export_page_index_20210811.json export_page_index_20210811.json ajouté
- Fichier site_export_20210811.tar site_export_20210811.tar ajouté
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Fichier 0002-guerande-use-combo-asset-to-manage-header-logo.patch 0002-guerande-use-combo-asset-to-manage-header-logo.patch ajouté
- Fichier 0003-guerande-use-combo-asset-to-manage-footer-logo.patch 0003-guerande-use-combo-asset-to-manage-footer-logo.patch ajouté
- Fichier 0005-guerande-remove-font-size-var.patch 0005-guerande-remove-font-size-var.patch ajouté
- Fichier 0007-guerande-use-core-sass-vars-to-manage-cell-foldable-.patch 0007-guerande-use-core-sass-vars-to-manage-cell-foldable-.patch ajouté
- Fichier 0008-guerande-globalize-page-header-block.patch 0008-guerande-globalize-page-header-block.patch ajouté
- Fichier 0009-guerande-fixe-column-size.patch 0009-guerande-fixe-column-size.patch ajouté
- Fichier 0011-guerande-blanc-sur-blanc-tout-fout-le-camp.patch 0011-guerande-blanc-sur-blanc-tout-fout-le-camp.patch ajouté
- Fichier 0010-guerande-hamonize-cell-display-and-color-contrast-of.patch 0010-guerande-hamonize-cell-display-and-color-contrast-of.patch ajouté
- Statut changé de En cours à Solution proposée
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 ?
Mis à jour par Paul Marillonnet il y a plus de 2 ans
- Statut changé de Solution proposée à 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…
Mis à jour par Paul Marillonnet il y a plus de 2 ans
- Fichier 0001-theme-add-guerande-55457.patch 0001-theme-add-guerande-55457.patch ajouté
- Statut changé de Solution validée à Solution proposée
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
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.
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Statut changé de Solution proposée à Solution validée
Mis à jour par Paul Marillonnet il y a plus de 2 ans
- Statut changé de Solution validée à 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)
Mis à jour par Frédéric Péters il y a plus de 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
Mis à jour par Marie Kuntz il y a plus de 2 ans
Quels sont les styles spéciaux à utiliser ? par exemple, pour avoir un fond beige dans le footer
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Statut changé de Solution déployée à Information nécessaire
Mis à jour par Paul Marillonnet il y a plus de 2 ans
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".
Mis à jour par Marie Kuntz il y a plus de 2 ans
- Statut changé de Information nécessaire à Fermé
Pardon, je n'avais pas vu ton export de site.
theme: add guerande (#55457)