Projet

Général

Profil

Development #69791

Saumur Agglomération: intégration graphique initiale

Ajouté par A. Berriot il y a plus d'un an. Mis à jour il y a plus d'un an.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
03 octobre 2022
Echéance:
20 octobre 2022
% réalisé:

0%

Temps estimé:
Patch proposed:
Oui
Planning:
Non

Description

Cf tâche parente


Fichiers

Screenshot 2022-10-06 at 11-35-35 Portail - Démarches.png (309 ko) Screenshot 2022-10-06 at 11-35-35 Portail - Démarches.png Accueil mobile A. Berriot, 06 octobre 2022 11:37
0001-saumur-new-theme-69791.patch (102 ko) 0001-saumur-new-theme-69791.patch A. Berriot, 06 octobre 2022 17:27
screenshot.png (16 ko) screenshot.png Corentin Séchet, 11 octobre 2022 10:31
Screenshot 2022-10-11 at 10-39-15 Portail - Démarches.png (1,08 Mo) Screenshot 2022-10-11 at 10-39-15 Portail - Démarches.png A. Berriot, 11 octobre 2022 11:00
0001-saumur-new-theme-69791.patch (9,11 ko) 0001-saumur-new-theme-69791.patch A. Berriot, 11 octobre 2022 11:05
0004-font-fixed-typo-in-manrope-include-69851.patch (1006 octets) 0004-font-fixed-typo-in-manrope-include-69851.patch A. Berriot, 11 octobre 2022 11:05
0002-fix-pk-button-pk-big-button-link-cell-border.patch (710 octets) 0002-fix-pk-button-pk-big-button-link-cell-border.patch A. Berriot, 11 octobre 2022 11:05
0003-disable-nav-after-image-it-hides-the-navigation.patch (697 octets) 0003-disable-nav-after-image-it-hides-the-navigation.patch A. Berriot, 11 octobre 2022 11:05
0001-saumur-new-theme-69791.patch (9,15 ko) 0001-saumur-new-theme-69791.patch A. Berriot, 11 octobre 2022 11:16
0004-font-fixed-typo-in-manrope-include-69851.patch (1006 octets) 0004-font-fixed-typo-in-manrope-include-69851.patch A. Berriot, 11 octobre 2022 11:16
0002-fix-pk-button-pk-big-button-link-cell-border.patch (710 octets) 0002-fix-pk-button-pk-big-button-link-cell-border.patch A. Berriot, 11 octobre 2022 11:16
0003-disable-nav-after-image-it-hides-the-navigation.patch (697 octets) 0003-disable-nav-after-image-it-hides-the-navigation.patch A. Berriot, 11 octobre 2022 11:16
nico_saumure_demarche.png (1,05 Mo) nico_saumure_demarche.png Nicolas Roche (absent jusqu'au 3 avril), 11 octobre 2022 19:33
nico_saumur_portail.png (1,08 Mo) nico_saumur_portail.png Nicolas Roche (absent jusqu'au 3 avril), 11 octobre 2022 19:33
nico_saumur_picto.png (4,66 ko) nico_saumur_picto.png Nicolas Roche (absent jusqu'au 3 avril), 11 octobre 2022 19:33
0006-fixup-saumur-new-theme-69791.patch (1,25 ko) 0006-fixup-saumur-new-theme-69791.patch A. Berriot, 13 octobre 2022 11:54
0001-saumur-new-theme-69791.patch (9,15 ko) 0001-saumur-new-theme-69791.patch A. Berriot, 13 octobre 2022 11:54
0004-font-fixed-typo-in-manrope-include-69851.patch (1006 octets) 0004-font-fixed-typo-in-manrope-include-69851.patch A. Berriot, 13 octobre 2022 11:54
0002-fix-pk-button-pk-big-button-link-cell-border.patch (710 octets) 0002-fix-pk-button-pk-big-button-link-cell-border.patch A. Berriot, 13 octobre 2022 11:54
0005-fixup-saumur-new-theme-69791.patch (1,63 ko) 0005-fixup-saumur-new-theme-69791.patch A. Berriot, 13 octobre 2022 11:54
0003-disable-nav-after-image-it-hides-the-navigation.patch (697 octets) 0003-disable-nav-after-image-it-hides-the-navigation.patch A. Berriot, 13 octobre 2022 11:54
0002-font-fixed-typo-in-manrope-include-69851.patch (1006 octets) 0002-font-fixed-typo-in-manrope-include-69851.patch A. Berriot, 14 octobre 2022 16:41
0001-saumur-new-theme-69791.patch (9,57 ko) 0001-saumur-new-theme-69791.patch A. Berriot, 14 octobre 2022 16:41

Révisions associées

Révision 37a4f07d (diff)
Ajouté par A. Berriot il y a plus d'un an

saumur: new theme (#69791)

Révision 6460b971 (diff)
Ajouté par A. Berriot il y a plus d'un an

font: fixed typo in manrope include (#69791)

Historique

#2

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier 0001-univ-nantes-new-theme-69791.patch ajouté
  • Tracker changé de Support à Development
  • Statut changé de Nouveau à Solution proposée
  • Patch proposed changé de Non à Oui
#3

Mis à jour par A. Berriot il y a plus d'un an

Premier jet pour le thème Saumur. J'ai du prendre quelques décisions sur la façon de procéder, puisqu'on est sur plusieurs portails combo différents:

- La bannière, facultative, est fournie par la ressource banner:background, pour permettre ce qui est demandé sur la maquette (une bannière spécifique à chaque commune de l'agglo, ou pas de bannière)

Pour le reste, c'est relativement standard, je vous essayer en local.

J'ai aussi fait certains choix qui diffèrent légèrement de la maquette fournie :

- la barre de recherche a un vrai bouton « rechercher » et pas juste un picto inclus dans l'input lui même. Je trouve ça plus accesible.
- Je n'ai pas changé l'apparence du bouton valider pour le formulaire de code de suivi (icone recherche demandé dans la maquette), par souci de simpliciter et de cohérence entre les différents styles de boutons
- la maquette demandait à ce que les différents status d'une démarche en cours apparaissent horizontablement. Ça ne me paraissait pas techniquement possible ni pratique (surtout pour des démarches longues, ou ça aurait débordé). Je n'ai rien touché, j'ai gardé le style actuel vertical.

Preneuse de vos retours :)

#5

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier Peek 2022-10-06 11-33.mp4 supprimé
#6

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier Screenshot 2022-10-06 at 11-34-47 Portail - Démarches.png supprimé
#7

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier Screenshot 2022-10-06 at 11-35-01 Portail - Cellules.png supprimé
#8

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier Screenshot 2022-10-06 at 11-35-47 Portail - Gestion du compte.png supprimé
#9

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier Screenshot 2022-10-06 at 11-42-56 Portail - Démarches - Demande d_autorisation d_occupation temporaire du domaine public (étalages terrasses).png supprimé
#10

Mis à jour par A. Berriot il y a plus d'un an

  • Fichier 0001-univ-nantes-new-theme-69791.patch supprimé
#12

Mis à jour par Nicolas Roche (absent jusqu'au 3 avril) il y a plus d'un an

Svp Agate, fais ton trie là dedans, parce que je ne suis pas encore bien calé sur les intégrations graphiques, et que je ne saurais pas discuter tes choix par exemple sur les étapes (pour cela il faudrait qu'un autre CPT passe par là).
En me basant sur https://dev.entrouvert.org/attachments/68749
edit: j'ai regardé la v1 au lieu de la v2 également dispo dans le ticket client #62576

  • Pour la police Manrope,
    je pense qu'il manque la correction évoquée dans https://dev.entrouvert.org/issues/69851
    et son import
    @import '../includes/fonts/manrope';
    

    à la place de montserrat dans style.scss, mais que je crois qu'il faut plutôt le placer en tête de _custom.scss.
    A ce propos, je dirais de déplacer les 2 variables logo-height et banner-height dans _vars.scss.
  • Pour les boutons, je les auraient laissés carrés.
    //$button-border-radius: $border-radius-1;
    

    Pour les doubles chevrons il y a éventuellement '\f101'.
  • Pour les étapes,
    on a des variables qui permettent de les afficher horizontalement, par exemple :
    $wcs-step-current-marker-background: $primary-color;
    $wcs-step-current-marker-color: white;
    $wcs-step-marker-background: $light-green;
    $wcs-step-border-bottom: none;
    $wcs-step-marker-tie-color: $light-green;
    
  • Pour les pictogrammes,
    on a un mécanisme qui consiste à ajouter des catégories dans wcs puis des démarches aux catégories.
    Cela crée des ressources dans combo "Image" où l'on peut uploader les pictos.
    Dans combo on ajoute des cellules "Démarche d'une catégorie" qui pointe sur ces catégories.
    Sur la page on bien le picto mais il est tronqué sur la hauteur, je n'ai pas trouvé pourquoi.
  • Pour le bandeau,
    on a déjà "image" dans les paramètre de la page (à droite dans le BO de la page dans combo) de prévu : ça permet éventuellement de changer d'image sur les différente pages, ou de la retirer, par exemple sur les démarches.
    Si on utilise ce mécanisme, ça vient se télescoper avec le menu, je pense que c'est dommage.
  • Pour le code de suivi avec la loupe en rouge,
    je pense qu'effectivement on n'a rien de générique et qu'il vaut mieux laisser ça de côté.
    Sinon, on pourrait éventuellement utiliser le gabarit templates/variants/villeneuve-dascq/combo/wcs/tracking_code_input.html
    pour retirer le texte Valider et le remplacer par une loupe :
    .wcs-tracking-code-input button {
        &::before {
            content: '\f002';
            font-family: FontAwesome;
            display: inline-block;
        }
    }
    
  • Pour le bas de page,
    perso j'essaye de l'intégrer dans une cellule texte de la section "Pied de page" dans combo, en prévoyant une classe CSS pour appliquer le style.
#14

Mis à jour par Corentin Séchet il y a plus d'un an

Ok avec Nico, sauf :

  • Pour les boutons, je les auraient laissés carrés.
    [...]

Ils ont un border-radius dans le guide de styles, je serai d'avis de le laisser.

  • Pour les étapes,
    on a des variables qui permettent de les afficher horizontalement, par exemple :
    [...]

Je ne vois pas ce qui va afficher les steps en horizontal dans le scss que tu cites. A ma connaissance, il n'y a que $wcs-steps-small-layout-limit, mais ça ne fera pas ce qui est suggéré sur la maquette.

  • Pour les pictogrammes,
    on a un mécanisme qui consiste à ajouter des catégories dans wcs puis des démarches aux catégories.
    Cela crée des ressources dans combo "Image" où l'on peut uploader les pictos.
    Dans combo on ajoute des cellules "Démarche d'une catégorie" qui pointe sur ces catégories.
    Sur la page on bien le picto mais il est tronqué sur la hauteur, je n'ai pas trouvé pourquoi.

Je ne sais pas si c'est le même souci : chez moi les images débordent du titre :

  • Pour le bandeau,
    on a déjà "image" dans les paramètre de la page (à droite dans le BO de la page dans combo) de prévu : ça permet éventuellement de changer d'image sur les différente pages, ou de la retirer, par exemple sur les démarches.
    Si on utilise ce mécanisme, ça vient se télescoper avec le menu, je pense que c'est dommage.

Ici si j'ai bien compris, c'est un bandeau par collectivité, pas par page et il ne me semble pas que les images soient héritées par les pages enfant. Je serai d'avis de laisser ce qu'Agate a fait et de désactiver le bandeau par page, du coup (c'est fait sur la branche).

Et j'ai aussi pushé la désactivation du background et des bordures pour les cellules lien avec une classe pk-button ou pk-big-button.

Et attention à ton titre de commit : sur la branche c'est "univ-nantes: new theme" sur la branche :)

#15

Mis à jour par A. Berriot il y a plus d'un an

Nicolas Roche a écrit :

Svp Agate, fais ton trie là dedans, parce que je ne suis pas encore bien calé sur les intégrations graphiques, et que je ne saurais pas discuter tes choix par exemple sur les étapes (pour cela il faudrait qu'un autre CPT passe par là).

Merci d'avoir regardé !

En me basant sur https://dev.entrouvert.org/attachments/68749

  • Pour la police Manrope,
    je pense qu'il manque la correction évoquée dans https://dev.entrouvert.org/issues/69851
    et son import
    [...]
    à la place de montserrat dans style.scss, mais que je crois qu'il faut plutôt le placer en tête de _custom.scss.

Effectivement, j'avais totalement oublié d'utiliser la bonne police… Je laisse dans style.scss, visiblement les deux se font (et même dans vars, des fois).

A ce propos, je dirais de déplacer les 2 variables logo-height et banner-height dans _vars.scss.

Comme ce sont des variables spécifiques à mon thème (et pas déclarées / utilisées par publik-base-theme), je préfère les laisser dans custom, c'est plus évident.

  • Pour les boutons, je les auraient laissés carrés.

Je me suis basée sur ce qui était demandé dans le ticket parent, et plus précisément https://dev.entrouvert.org/attachments/69555 (les boutons ont un radius assez important marqué dans ce document).

Pour les doubles chevrons il y a éventuellement '\f101'.

Bien vu, merci !

  • Pour les étapes,
    on a des variables qui permettent de les afficher horizontalement, par exemple :

J'ai l'impression, mais je peux me tromper, qu'on parle de deux choses différentes. Mon message faisait référénce au statut d'une demande en cours, déjà soumise (formulaire envoyé). Le déroulé des informations sur la page de la démarche est vertical.

Lors de la saisie initiale de la démarche, chez moi les étapes s'affichent verticalement dans la barre latérale. Les variable que tu évoque ne me semblent pas modifier ce comportement ?

  • Pour les pictogrammes,
    on a un mécanisme qui consiste à ajouter des catégories dans wcs puis des démarches aux catégories.
    Cela crée des ressources dans combo "Image" où l'on peut uploader les pictos.
    Dans combo on ajoute des cellules "Démarche d'une catégorie" qui pointe sur ces catégories.
    Sur la page on bien le picto mais il est tronqué sur la hauteur, je n'ai pas trouvé pourquoi.

C'est ce que j'ai fait (je crois), est-ce que tu as une capture qui montre le problème ? Le rendu est correct chez moi, a priori (cf pièce jointe).

  • Pour le bandeau,
    on a déjà "image" dans les paramètre de la page (à droite dans le BO de la page dans combo) de prévu : ça permet éventuellement de changer d'image sur les différente pages, ou de la retirer, par exemple sur les démarches.
    Si on utilise ce mécanisme, ça vient se télescoper avec le menu, je pense que c'est dommage.

Je suis d'accord. J'aurais bien aimé utiliser ce mécanisme mais si j'ai bien compris on va avoir un portail Combo par commune de l'agglo, avec une image systématique qui doit être affichée sur l'ensemble des pages du portail de la commune, je n'ai pas l'impression qu'on puisse arriver à ce résultat en utilisant le mécanisme d'image d'en-tête actuellement implémenté dans combo.

  • Pour le bas de page,
    perso j'essaye de l'intégrer dans une cellule texte de la section "Pied de page" dans combo, en prévoyant une classe CSS pour appliquer le style.

Là aussi, j'avais bricolé dans la mesure du possible pour éviter de devoir répliquer et maintenir la même cellule sur X portails combo (car le footer était commun pour l'agglo), mais finalement on en a pas besoin pour le moment, j'ai retiré le code en question.

@Corentin, merci pour tes retours / correctifs. Je n'arrive pas à reproduire ce problème de picto qui déborde du titre, même en utilisant d'autres icones / images avec des dimensions différentes. Je règle ces histoirs de noms de commits.

#18

Mis à jour par A. Berriot il y a plus d'un an

(dernière version du patch qui corrige ce problème de picto qui déborde)

#19

Mis à jour par Nicolas Roche (absent jusqu'au 3 avril) il y a plus d'un an

  • Pour les boutons
    Zut, j'ai regardé la v1 des "lignes directrices", pardon.
  • Pour les étapes
    > Les variables que tu évoques ne me semblent pas modifier ce comportement ?
    Re-zut, j'ai zappé la moitié des variables, désolé.
      $form-sidebar-position: top;
      $wcs-step-marker-type: disc tied;
      $wcs-step-current-marker-background: $primary-color;
      $wcs-step-current-marker-color: white;
      $wcs-step-marker-background: $light-green;
      $wcs-step-border-bottom: none;
      $wcs-step-marker-tie-color: $light-green;
    

    cf capture.
  • Pour les pictogrammes
    cf capture.
  • Pour le bandeau
    En effet, je pense pas que l'on puisse définir un unique bandeau pour toutes pages dans combo,
    à la manière dont les pages peuvent hériter du pied de page.
    Mais là, le bandeau va aussi apparaître sur les pages des démarches, ce qui n'est pas demandé sur la maquette.
    (désolé, mon intervention n'est pas constructive ici, j'espère qu'un autre CPT passera par là)
    cf cature.
  • Pour le bas de page
    > car le footer était commun pour l'agglo
    Détrompes-moi mais dans mon idée on n'aura que 3 communes, pas 45 ?
    Ou alors on ne parles pas ici de déploiement multi-collectivité ?
    https://dev.entrouvert.org/issues/69258
#21

Mis à jour par A. Berriot il y a plus d'un an

Merci nico, mes patchs 5 et 6 intégrent respectivement:

- Un correctif pour cette histoire de picto. Ils sont carrés, la thumbnail générée était tronquée, j'ai découvert l'existence d'une variable de thème pour controler ça
- Tes modifications pour avoir un affichage horizontal des étapes. Ça fonctionne parfaitement chez moi.

Mais là, le bandeau va aussi apparaître sur les pages des démarches, ce qui n'est pas demandé sur la maquette.
(désolé, mon intervention n'est pas constructive ici, j'espère qu'un autre CPT passera par là)

Pour autant que je puisse en juger, si (pour le bandeau et la constructivité de ton intervention ;). Par exemple pages 6 et 7 de leur doc "Lignes directrices v2", on voit bien le bandeau Ville de Saumur au dessus du formulaire.

Détrompes-moi mais dans mon idée on n'aura que 3 communes, pas 45 ?

Je n'avais pas connaisance du nombre de communes et je n'ai jamais fait de multi collectivité. Alexis m'a en tout cas assuré qu'il y aurait un portail combo par commune. Vu que le footer restant est relativement simple, je pense que le problème initial ne se pose plus et que ça pourra être géré dans une cellule de texte au sein de chaque portail.

#22

Mis à jour par Nicolas Roche (absent jusqu'au 3 avril) il y a plus d'un an

  • Statut changé de Solution proposée à Solution validée
  • Pour les étapes
    J'ai donné les variables à titre d'exemple, je n'avais encore jamais testé.
    (Peut-être que quelqu'un de plus avisé pourrait te donner d'autres indications ici ?)
  • Pour les pictogrammes
    Oui, même constat.
  • Pour le bandeau
    Ok pour moi.
#24

Mis à jour par A. Berriot il y a plus d'un an

Nicolas Roche a écrit :

  • Pour les étapes
    J'ai donné les variables à titre d'exemple, je n'avais encore jamais testé.
    (Peut-être que quelqu'un de plus avisé pourrait te donner d'autres indications ici ?)

Le rendu était très correct, j'ai gardé tel quel, on pourra faire des adaptations après le retour du client si besoin :)

(les derniers patchs du tickets sont la pour l'historique, c'est juste un squash des précédents)

#25

Mis à jour par A. Berriot il y a plus d'un an

  • Statut changé de Solution proposée à Résolu (à déployer)
commit 6460b971ba1eb15e73646203dfc46360c7568afd
Author: Agate Berriot <aberriot@entrouvert.com>
Date:   Tue Oct 11 09:58:44 2022 +0200

    font: fixed typo in manrope include (#69791)

commit 37a4f07d50d5aa0a44fd56ce05021586037a582c
Author: Agate Berriot <aberriot@entrouvert.com>
Date:   Tue Oct 4 16:39:37 2022 +0200

    saumur: new theme (#69791)
#26

Mis à jour par Transition automatique il y a plus d'un an

  • Statut changé de Résolu (à déployer) à Solution déployée
#27

Mis à jour par Transition automatique il y a plus d'un an

Automatic expiration

Formats disponibles : Atom PDF