Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Améliorations du composant "Section promotionnelle" #61

Merged
merged 5 commits into from
Dec 12, 2023
Merged

Améliorations du composant "Section promotionnelle" #61

merged 5 commits into from
Dec 12, 2023

Conversation

Ash-Crow
Copy link
Collaborator

@Ash-Crow Ash-Crow commented Dec 6, 2023

🎯 Objectif

Le composant "Section promotionnelle" a des limitations, qui peuvent être levées en le rendant plus modulaire pour permettre d'obtenir un rendu similaire à celui utilisé sur le site du CNR : https://conseil-refondation.fr/

🔍 Implémentation

  • Ajout de la possibilité d'assombrir l'image (et donc forcer le texte en blanc)
  • Ajout de la possibilité de mettre le titre en pleine largeur (et centré et plus grand au passage)

⚠️ Informations supplémentaires

  • Le site du CNR a une icône sur le bouton. Je peux ajouter un champ où on peut ajouter une classe de manière libre pour l'icône (mais pas simple pour les utilisateurs) ou faire un sélecteur d'icône qui pourrait servir pour d'autres composants (mais c'est potentiellement assez gros comme développement, à voir dans un second temps ?)

🏕 Amélioration continue

  • Fin du paramétrage de sass pour la gestion du CSS personnalisé du site.

🖼️ Images

Capture d’écran du 2023-12-07 11-40-47
Capture d’écran du 2023-12-07 16-05-42

@Ash-Crow Ash-Crow marked this pull request as ready for review December 7, 2023 14:49
@@ -158,9 +158,9 @@
# https://whitenoise.evans.io/en/latest/

STATICFILES_FINDERS = [
"django.contrib.staticfiles.finders.FileSystemFinder",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'ai dû mettre les fichiers dans le même ordre que la doc de django-sass-processor sinon il ne trouvait pas le fichier https://github.com/jrief/django-sass-processor/blob/master/README.md

Comment on lines +3 to +13
<div class="cmsfr-hero{% if block.value.large %} cmsfr-hero-large{% endif %}{% if block.value.darken %} cmsfr-hero-dark{% endif %}"
style="background-image: {% if block.value.darken %}linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), {% endif %}url({{ bg_img.url }});
background-color: {{ block.value.bg_color }};
">
<div class="fr-container fr-py-14w">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col fr-col-12 fr-col-md-6">
<h1>{{ block.value.title }}</h1>
<div class="fr-col fr-col-12{% if not block.value.large %}fr-col-md-6{% endif %}">
<h1{% if block.value.large%} class="fr-display--sm"{% endif %}>{{ block.value.title }}</h1>
{% if block.value.text %}<p>{{ block.value.text }}</p>{% endif %}
{% if block.value.cta_link and block.value.cta_label %}
<a class="fr-btn fr-btn--primary fr-btn--lg"
<a class="fr-btn {% if block.value.darken %}fr-btn--secondary fr-background-alt--blue-france fr-btn--lg{% else %}fr-btn--primary{% endif %} fr-btn--lg"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bon, je ne connais aucune de ces classes mais j'ai grande confiance !

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tu peux voir le résultat sur la capture d'écran (en mode "assombrir", le bouton est plus pâle sinon ça manque de contraste)

@mjeammet mjeammet merged commit c32a62b into main Dec 12, 2023
4 checks passed
@mjeammet mjeammet deleted the hero branch December 12, 2023 17:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants