[ui] Intégrer la charte graphique de l'INSEE à la template de note

ETQ futur responsable de la maintenance du package, je voudrais pouvoir modifier facilement le template de PDF en cas d'évolution de la charte graphique de l'Insee

Pour cela...

Il était initialement prévu (issue #10 (closed)) d'utiliser un css récupéré sur le site web (#9 (closed)) pour tenir compte de la charte graphique et de ses évolutions, et d'y ajouter un style.css complémentaire spécifique au template de PDF.

MAIS les futures évolutions du .css du site web étant inconnues il apparait risqué de se baser dessus dans le template du PDF En effet, les conséquences de ces évolutions sur la mise en page du PDF seraient peu prévisibles et leurs sources difficiles à diagnostiquer (le css du site fait actuellement 1069 lignes), tout particulièrement si les personnes en charge du maintien du package ne sont pas spécialistes du css.

DONC il semble plus pertinent de ne se baser que sur un seul css dans lequel les paramètres susceptibles de changer avec la charte graphique (police, couleurs, images, ...) sont explicitement définis en haut du css, afin de faciliter leur mise à jour en cas d'évolution de la charte graphique.

Issues parentes:

Les issues #10 (closed) et #20 (closed) sont traitées par la présente issue.

Validation

Aspect général

• Je valide que le CI construit automatiquement la note au format html: https://propre-conj.pages.lab.sspcloud.fr/conj.region/_pagedown.html

• Je valide que la mise en page finale (résultant de multiples modifications du template html et du css utilisés) contient toujours les éléments validés en issue #18 (closed) à savoir :

  • Le document par défaut est une page au format A4.
  • l'en-tête comporte : le logo de l'Insee, le nom de la [Région] et le [Titre] de la note
  • la bandeau comporte :
    • un sous titre de la forme "Insee Conjoncture [Région] - n°[Numero] - [Mois][Année]
    • ce sous-titre est inclut dans une image occupant toute la largeur de la page
  • le paragraphe introductif sur 1 colonne
  • le corps du document est sur 2 colonnes, avec des titres colorés et des encadrés colorés de deux couleurs pour "Avertissement" et "Contexte"
  • l'espace "Pour en savoir plus" est sur toute la largeur de la page et sur fond coloré

Implémentation de la charte INSEE via CSS

• Je valide que dans le code source de la fonction qui compile le template retrouvé ici il n'y a plus qu'un seul fichier .css utilisé : style_conj.css

Voir capture d'écran ci-dessous pour référence:

• Je valide qu'en tête du fichier style_conj.css retrouvé ici on retrouve dans la partie :root{} les paramètres de css suivants :

  • police : --main-font
  • couleur principale du texte : --main-text-color
  • couleur des titres : --color-headers
  • couleur du sous-titre du bandeau : --color-bandeau
  • couleur des cadres "avertissement" : --color-avertissement
  • couleur des cadres "contexte" : --color-contexte
  • couleur des de fond des graphiques : --background-color-graph
  • couleur de fond "pour en savoir plus" : --background-color-ref

Voir capture d'écran ci-dessous pour référence:

Paramètres modifiables par l'utilisateur final

• Je valide que la manière de modifier le logo et le bandeau de titre est décrite dans le README utilisateur retrouvé ici voir capture d'écran ci-dessous:

• Je valide que la manière de modifier le titre, la région, la date et le numéro de note est décrite dans le README utilisateur retrouvé ici voir capture d'écran ci-dessous:

Comment technique

• supprimer la dépendance du template au css du site application.css
• paramétriser les éléments susceptibles d'évoluer avec la charte :
  • police et couleurs dans le css du template style_paged_conj.css
  • images dans paged_conj()
• paramétriser les éléments évoluant entre chaque note dans le yaml de l'index du book (titre, région, date, numéro)
• modifier style_paged_conj.css pour retrouver la mise en page initiale avec style_paged_conj.css + application.css en n'utilisant que style_paged_conj.css et le template html template_paged.html