Skip to content

Commit

Permalink
Cartes : gestion du ratio de l'image (#147)
Browse files Browse the repository at this point in the history
* Cards: Add ratio management and fix the detail icon class

* Update dependencies

* Replace gouvernement.fr with info.gouv.fr

* Fix documentation

* Fix URL
  • Loading branch information
Ash-Crow authored May 23, 2024
1 parent 7aba4bb commit 8012c62
Show file tree
Hide file tree
Showing 12 changed files with 298 additions and 273 deletions.
17 changes: 17 additions & 0 deletions dsfr/constants.py
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
]
16 changes: 8 additions & 8 deletions dsfr/locale/fr/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions dsfr/templates/dsfr/card.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions dsfr/templates/dsfr/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 16 additions & 0 deletions dsfr/templatetags/dsfr_tags.py
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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
Expand Down Expand Up @@ -493,6 +506,7 @@ def dsfr_card(*args, **kwargs) -> dict:
"description",
"image_url",
"image_alt",
"ratio_class",
"media_badges",
"new_tab",
"link",
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion example_app/dsfr_components.py
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Binary file modified example_app/locale/fr/LC_MESSAGES/django.mo
Binary file not shown.
8 changes: 6 additions & 2 deletions example_app/locale/fr/LC_MESSAGES/django.po
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
4 changes: 3 additions & 1 deletion example_app/templates/example_app/blocks/main_menu.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{% load i18n %}
<div class="fr-header__menu fr-modal"
id="fr-menu-mobile"
aria-labelledby="fr-btn-menu-mobile">
Expand All @@ -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 %}
Expand Down
10 changes: 5 additions & 5 deletions example_app/templates/example_app/page_component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand Down
Loading

0 comments on commit 8012c62

Please sign in to comment.