From 8012c629de412000ef88cb7a4d65dedf006ce317 Mon Sep 17 00:00:00 2001 From: Sylvain Boissel Date: Thu, 23 May 2024 11:35:18 +0200 Subject: [PATCH] Cartes : gestion du ratio de l'image (#147) * Cards: Add ratio management and fix the detail icon class * Update dependencies * Replace gouvernement.fr with info.gouv.fr * Fix documentation * Fix URL --- dsfr/constants.py | 17 + dsfr/locale/fr/LC_MESSAGES/django.po | 16 +- dsfr/templates/dsfr/card.html | 6 +- dsfr/templates/dsfr/footer.html | 4 +- dsfr/templatetags/dsfr_tags.py | 16 + example_app/dsfr_components.py | 3 +- example_app/locale/fr/LC_MESSAGES/django.mo | Bin 1285 -> 1350 bytes example_app/locale/fr/LC_MESSAGES/django.po | 8 +- .../example_app/blocks/main_menu.html | 4 +- .../templates/example_app/page_component.html | 10 +- poetry.lock | 485 +++++++++--------- pyproject.toml | 2 +- 12 files changed, 298 insertions(+), 273 deletions(-) diff --git a/dsfr/constants.py b/dsfr/constants.py index 6255d292d..378db3f06 100644 --- a/dsfr/constants.py +++ b/dsfr/constants.py @@ -56,3 +56,20 @@ (_("System colors"), COLOR_CHOICES_SYSTEM), (_("Illustration colors"), COLOR_CHOICES_ILLUSTRATION), ] + +# Ratio classes used for medias and cards +IMAGE_RATIOS = [ + ("fr-ratio-32x9", "32x9"), + ("fr-ratio-16x9", "16x9"), + ("fr-ratio-3x2", "3x2"), + ("fr-ratio-4x3", "4x3"), + ("fr-ratio-1x1", "1x1"), + ("fr-ratio-3x4", "3x4"), + ("fr-ratio-2x3", "2x3"), +] + +VIDEO_RATIOS = [ + ("fr-ratio-16x9", "16x9"), + ("fr-ratio-4x3", "4x3"), + ("fr-ratio-1x1", "1x1"), +] diff --git a/dsfr/locale/fr/LC_MESSAGES/django.po b/dsfr/locale/fr/LC_MESSAGES/django.po index 3846df56a..bc4ae6836 100644 --- a/dsfr/locale/fr/LC_MESSAGES/django.po +++ b/dsfr/locale/fr/LC_MESSAGES/django.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: \n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2024-04-10 16:17+0200\n" +"POT-Creation-Date: 2024-05-23 11:01+0200\n" "PO-Revision-Date: 2024-04-10 16:19+0200\n" "Last-Translator: \n" "Language-Team: \n" @@ -276,32 +276,32 @@ msgstr "Suivez-nous
sur les réseaux sociaux" msgid "Back to home page" msgstr "Retour à l’accueil du site" -#: dsfr/templates/dsfr/footer.html:93 +#: dsfr/templates/dsfr/footer.html:92 msgid "Sitemap" msgstr "Plan du site" -#: dsfr/templates/dsfr/footer.html:98 +#: dsfr/templates/dsfr/footer.html:97 #, python-format msgid "Accessibility: %(accessibility_status)s compliant" msgstr "Accessibilité : %(accessibility_status)s conforme" -#: dsfr/templates/dsfr/footer.html:103 +#: dsfr/templates/dsfr/footer.html:102 msgid "Legal notice" msgstr "Mentions légales" -#: dsfr/templates/dsfr/footer.html:106 +#: dsfr/templates/dsfr/footer.html:105 msgid "Personal data" msgstr "Données personnelles" -#: dsfr/templates/dsfr/footer.html:109 +#: dsfr/templates/dsfr/footer.html:108 msgid "Cookie management" msgstr "Gestion des cookies" -#: dsfr/templates/dsfr/footer.html:115 +#: dsfr/templates/dsfr/footer.html:114 msgid "etalab-2.0 license" msgstr "licence etalab-2.0" -#: dsfr/templates/dsfr/footer.html:116 +#: dsfr/templates/dsfr/footer.html:115 msgid "" "Unless explicit mention of intellectual property held by third parties, the " "contents of this site are offered under" diff --git a/dsfr/templates/dsfr/card.html b/dsfr/templates/dsfr/card.html index 000600d04..241291c34 100644 --- a/dsfr/templates/dsfr/card.html +++ b/dsfr/templates/dsfr/card.html @@ -38,7 +38,7 @@ {% endif %} {% if self.top_detail.detail %} -

+

{{ self.top_detail.detail.text }}

{% endif %} @@ -46,7 +46,7 @@ {% endif %} {% if self.bottom_detail %}
-

+

{{ self.bottom_detail.text }}

@@ -77,7 +77,7 @@
{% if self.image_url %}
- {{ self.image_alt }}
diff --git a/dsfr/templates/dsfr/footer.html b/dsfr/templates/dsfr/footer.html index 07ccb1ada..be1655888 100644 --- a/dsfr/templates/dsfr/footer.html +++ b/dsfr/templates/dsfr/footer.html @@ -57,10 +57,10 @@
  • gouvernement.fr + href="https://www.info.gouv.fr">info.gouv.fr
  • dict: "description": "Text of the card item", "image_url": "(Optional) url of the image", "image_alt": "(Optional) alt text of the image", + "ratio_class": "(Optional) string with the name of a ratio class for the image", "media_badges": "(Optional) list of badges for the media area (similar to a badge_group tag)" "new_tab": "(Optional) if True, forces links to open in a new tab", "link": "(Optional) link of the card item", @@ -458,6 +459,18 @@ def dsfr_card(*args, **kwargs) -> dict: - `fr-card--no-background`: removes the card background - `fr-card--shadow`: adds a shadow to the card border + Relevant ratio classes for images: + + - `fr-ratio-32x9` + - `fr-ratio-16x9` + - `fr-ratio-3x2` + - `fr-ratio-4x3` + - `fr-ratio-1x1` + - `fr-ratio-3x4` + - `fr-ratio-2x3` + + A constant is provided for these classes in dsfr/constants.py: IMAGE_RATIOS + Format of the top_detail dict (every field is optional): ```python @@ -493,6 +506,7 @@ def dsfr_card(*args, **kwargs) -> dict: "description", "image_url", "image_alt", + "ratio_class", "media_badges", "new_tab", "link", @@ -601,6 +615,8 @@ def dsfr_content(*args, **kwargs) -> dict: - `fr-ratio-4x3` - `fr-ratio-1x1` + Constants are provided for these classes in dsfr/constants.py: IMAGE_RATIOS and VIDEO_RATIOS + **Tag name**: dsfr_content diff --git a/example_app/dsfr_components.py b/example_app/dsfr_components.py index d499e4730..d3c074d90 100644 --- a/example_app/dsfr_components.py +++ b/example_app/dsfr_components.py @@ -302,13 +302,14 @@ }, }, { - "title": "Carte avec image et détails d’en-tête (badges)", + "title": "Carte avec image, ratio, et détails d’en-tête (badges)", "description": """Texte de la carte. Il peut prendre jusqu’à 200 caractères. """, "link": "https://www.systeme-de-design.gouv.fr/", "new_tab": True, "image_url": "/django-dsfr/static/img/placeholder.16x9.svg", + "ratio_class": "fr-ratio-1x1", "top_detail": { "detail": { "icon_class": "fr-icon-warning-fill", diff --git a/example_app/locale/fr/LC_MESSAGES/django.mo b/example_app/locale/fr/LC_MESSAGES/django.mo index 2542647594bf6fd08d52d662983c9224f39a79a8..74618ae0554e7c6d93aa4db512c64604afe7cf7f 100644 GIT binary patch delta 614 zcmZ9}KP-bm7{~Faf8MGWMX5hYMHi7sNMF)KOg4#CEGCU~XwXy>5rcGLu^1W>iGf&H zEEbc5K_W4jx)7U54Bd>rzt>GJ?{lAf@4dU{?%o6c$*+H;#aZ-m5#zXw9JK|>2%VLRS9@0^d$7gWL~ zcH&Rm@s!rTN?Q|c9@dyX; z8g;S<)VycZMqV+6P51p1$!*`RzlA*EU>(3?QiA-Jp`k=s)NdF^9-F6fe<4grS6Bw9 zHC~JN5g9_`b$gnxO(=n`T_sG4{o&hR#U)vi2y}w~rOS2bKkBMXxzsaegQC|F?j$0 delta 554 zcmX}oy-EW?6o%oG-A&A{e=!<=K#AHfBvC{If(RCtT5ID4*os)h##DmBBBF&@q_IvF zQlybwLC`|6^eTk-eqoYf&pfj;yXVYIH@b;xKl$LnXbZ$L(Ibk)ZHkVT^~^FD;tb|6 z!gUNV#xz#k`!8u#zM;Nvp*GfW z^IbRpfkig|?biQ%vlYJcNumR+q5j{%4E1e?0gvs`P2d4)hsU^tr>NVxK%M9gRrnE= z=mn>+;ntf-O=}~Mb?CJ5chrA9RQ@kqq`v(!P@+ES*0rdc&^0QtimEB;ERiR45;a{d z2OTvP$Py}87|oi^Gu9y}F*xLKDOBM(Vls)n*W}Z?iZ @@ -9,10 +10,11 @@
    + {% translate "Main menu" as main_menu_label %}