WIP

Author: fabienheureux

core/templatetags/carte_tags.py

@@ -204,9 +204,9 @@ def render_acteur(acteur, context):
 def acteurs_table(context, acteurs):
     return {
         "table": {
-            "caption": "Tableau basique",
+            # "caption": "Tableau basique",
             "header": ["Nom", "Actions", "Caractéristiques", "Distance"],
             "content": [render_acteur(acteur, context) for acteur in acteurs],
-            "extra_classes": "fr-table--multiline qf-w-full",
+            "extra_classes": "fr-table--multiline fr-table--mode-liste qf-w-full",
         }
     }

pyproject.toml

@@ -110,7 +110,7 @@ default-groups = [
 ]
 
 [tool.uv.sources]
-django-dsfr = { git = "https://github.com/fabienheureux/django-dsfr", branch = "support-custom-attrs-in-components" }
+django-dsfr = { git = "https://github.com/fabienheureux/django-dsfr", rev = "6c3f91f282bd24f7e1a0135095138d0ed05ceed3" } # pragma: allowlist secret
 
 [tool.ruff]
 # Exclude a variety of commonly ignored directories.

static/to_compile/styles/dsfr-overrides.css

@@ -195,3 +195,20 @@ DSFR customization for tabs
 .fr-header__service {
   @apply qf-hidden;
 }
+
+.fr-table--mode-liste {
+  thead {
+    @apply max-md:qf-hidden;
+  }
+  tbody {
+    @apply max-md:qf-flex qf-flex-col qf-gap-1w;
+  }
+
+  tr {
+    @apply max-md:qf-flex qf-flex-col;
+  }
+
+  .fr-table__content table tbody td {
+    background: transparent !important;
+  }
+}

templates/ui/components/carte/header.html

@@ -1,10 +1,11 @@
+{% load dsfr_tags %}
 <header
     {# The z-index below can impact the shadow over #}
     class="{% block header_classes %}qf-z-20{% endblock %} qf-bg-white qf-shadow-lg"
 >
     <div
         class="
-        qf-flex qf-flex-row sm:qf-items-center"
+        qf-flex qf-flex-col md:qf-flex-row sm:qf-items-center"
     >
 
         {% if not carte_config or not carte_config.supprimer_branding %}
@@ -61,8 +62,11 @@
             {% endif %}
         </div>
 
-        <div class="-qf-mt-3w qf-pr-2w">
+        <div class="md:-qf-mt-3w md:qf-pr-2w max-md:qf-px-2w max-md:qf-pb-2w max-md:qf-flex qf-justify-between qf-items-center">
             {{ forms.view_mode }}
+            <div>
+            {% dsfr_button label="Filtres" extra_classes="fr-btn--sm fr-btn--secondary fr-ml-1w fr-btn--icon-left fr-icon-equalizer-line" data_action="search-solution-form#toggleAdvancedFilters" data_testid="advanced-filters" %}
+            </div>
         </div>
     </div>
 </header>

templates/ui/components/carte/mode_liste.html

@@ -1,9 +1,9 @@
 {% load carte_tags dsfr_tags %}
 <div class="qf-flex qf-flex-col qf-gap-1w qf-px-2w">
     <header class="qf-flex qf-justify-end qf-gap-1w qf-py-2w">
-        {% dsfr_button label="Filtres" extra_classes="fr-btn--icon-left fr-icon-equalizer-fill fr-btn--secondary" data_action="search-solution-form#toggleAPropos:prevent" %}
+        {% dsfr_button label="Filtres" extra_classes="fr-btn--icon-left fr-icon-equalizer-fill fr-btn--secondary" data_action="search-solution-form#toggleAdvancedFilters:prevent" data_testid="advanced-filters:prevent" %}
         {% dsfr_button label="Proposer un nouveau lieu" extra_classes="fr-btn--icon-left fr-icon-add-line" %}
-        {% dsfr_button label="Infos" extra_classes="fr-btn--icon-left fr-icon-info-line fr-btn--secondary" %}
+        {% dsfr_button label="Infos" extra_classes="fr-btn--icon-left fr-icon-info-line fr-btn--secondary" data_action="search-solution-form#toggleAPropos:prevent" %}
     </header>
     <main>
         {% acteurs_table paginated_acteurs_obj %}