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
numerique-gouv · May 23, 2024 · 8012c62 · 8012c62
1 parent 7aba4bb
commit 8012c62
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 273 deletions.
diff --git 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
@@ -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 <br /> 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
@@ -38,15 +38,15 @@
             </ul>
           {% endif %}
           {% if self.top_detail.detail %}
-            <p class="fr-card__detail{% if self.top_detail.detail.icon_class %} self.top_detail.detail.icon_class{% endif %}">
+            <p class="fr-card__detail{% if self.top_detail.detail.icon_class %} {{ self.top_detail.detail.icon_class }}{% endif %}">
               {{ self.top_detail.detail.text }}
             </p>
           {% endif %}
         </div>
       {% endif %}
       {% if self.bottom_detail %}
         <div class="fr-card__end">
-          <p class="fr-card__detail{% if self.bottom_detail.icon_class %} self.bottom_detail.icon_class{% endif %}">
+          <p class="fr-card__detail{% if self.bottom_detail.icon_class %} {{ self.bottom_detail.icon_class }}{% endif %}">
             {{ self.bottom_detail.text }}
           </p>
         </div>
@@ -77,7 +77,7 @@
   <div class="fr-card__header">
     {% if self.image_url %}
       <div class="fr-card__img">
-        <img class="fr-responsive-img"
+        <img class="fr-responsive-img {% if self.ratio_class %}{{ self.ratio_class }}{% endif %}"
              src="{{ self.image_url }}"
              alt="{{ self.image_alt }}" />
       </div>

diff --git a/dsfr/templates/dsfr/footer.html b/dsfr/templates/dsfr/footer.html
@@ -57,10 +57,10 @@
           <li class="fr-footer__content-item">
             <a target="_blank"
                rel="noopener external"
-               title="gouvernement.fr - {{ new_window_label }}"
+               title="info.gouv.fr - {{ new_window_label }}"
                id="footer__content-link-gouvernement"
                class="fr-footer__content-link"
-               href="https://gouvernement.fr">gouvernement.fr</a>
+               href="https://www.info.gouv.fr">info.gouv.fr</a>
           </li>
           <li class="fr-footer__content-item">
             <a target="_blank"

diff --git a/dsfr/templatetags/dsfr_tags.py b/dsfr/templatetags/dsfr_tags.py
@@ -433,6 +433,7 @@ def dsfr_card(*args, **kwargs) -> 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
@@ -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
diff --git a/example_app/locale/fr/LC_MESSAGES/django.po b/example_app/locale/fr/LC_MESSAGES/django.po
@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-04-10 16:17+0200\n"
-"PO-Revision-Date: 2024-04-10 16:20+0200\n"
+"POT-Creation-Date: 2024-05-23 11:01+0200\n"
+"PO-Revision-Date: 2024-05-23 11:01+0200\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: fr\n"
@@ -107,3 +107,7 @@ msgstr "Fermer"
 #: example_app/templates/example_app/blocks/language_selector.html:10
 msgid "Select language"
 msgstr "Sélectionner une langue"
+
+#: example_app/templates/example_app/blocks/main_menu.html:13
+msgid "Main menu"
+msgstr "Menu principal"
diff --git a/example_app/templates/example_app/blocks/main_menu.html b/example_app/templates/example_app/blocks/main_menu.html
@@ -1,3 +1,4 @@
+{% load i18n %}
 <div class="fr-header__menu fr-modal"
      id="fr-menu-mobile"
      aria-labelledby="fr-btn-menu-mobile">
@@ -9,10 +10,11 @@
     </button>
     <div class="fr-header__menu-links">
     </div>
+    {% translate "Main menu" as main_menu_label %}
     <nav role="navigation"
          class="fr-nav"
          id="fr-navigation"
-         aria-label="Menu principal">
+         aria-label="{{ main_menu_label }}">
       <ul class="fr-nav__list">
         <li class="fr-nav__item">
           {% url 'index' as home_url %}

diff --git a/example_app/templates/example_app/page_component.html b/example_app/templates/example_app/page_component.html
@@ -83,15 +83,15 @@ <h3>
           {% elif tag_name == "callout" %}
             {% dsfr_callout sample_data_item %}
           {% elif tag_name == "card" %}
-            {% if not "horizontal" in sample_data_item.extra_classes %}
+            {% if "horizontal" in sample_data_item.extra_classes %}
               <div class="fr-grid-row fr-grid-row--gutters">
-                <div class="fr-col-12 fr-col-md-4">
-                  {% dsfr_card sample_data_item %}
-                </div>
+                {% dsfr_card sample_data_item %}
               </div>
             {% else %}
               <div class="fr-grid-row fr-grid-row--gutters">
-                {% dsfr_card sample_data_item %}
+                <div class="fr-col-12 fr-col-md-6">
+                  {% dsfr_card sample_data_item %}
+                </div>
               </div>
             {% endif %}
           {% elif tag_name == "consent" %}