wip

incubateur-ademe · Nov 1, 2024 · 5baea3a · 5baea3a
1 parent 620412d
commit 5baea3a
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 20 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -178,7 +178,7 @@
         "filename": "jinja2/layout/base.html",
         "hashed_secret": "057dece35d736a3ae1e710a9cba3f080bd101cde",
         "is_verified": false,
-        "line_number": 73
+        "line_number": 74
       }
     ],
     "static/to_compile/src/analytics.ts": [
@@ -207,5 +207,5 @@
       }
     ]
   },
-  "generated_at": "2024-10-31T21:28:37Z"
+  "generated_at": "2024-11-01T12:17:15Z"
 }
diff --git a/jinja2/layout/base.html b/jinja2/layout/base.html
@@ -66,6 +66,7 @@ <h3 class="fr-alert__title">Une mise à jour de votre navigateur est nécessaire
             {% endblock %}
         {% endif %}
 
+        {% block modals %}{% endblock modals %}
         {% block js %}
             {% if is_embedded %}
                 <script

diff --git a/jinja2/qfdmo/_addresses_partials/filters/_modal.html b/jinja2/qfdmo/_addresses_partials/filters/_modal.html
@@ -1,8 +1,8 @@
 <div class='fr-container
             qfdmo-px-0
-            qfdmo-fixed qfdmo-z-[10010] qfdmo-top-auto qfdmo-left-0 qfdmo-right-0 qfdmo-mt-auto
+            qfdmo-fixed qfdmo-z-50 qfdmo-top-auto qfdmo-left-0 qfdmo-right-0 qfdmo-mt-auto
             qfdmo-hidden
-            qfdmo-h-[90vh] qfdmo-h-[90svh] {# Keep both values help keep support for vh in firefox #}
+            qfdmo-h-[80vh] qfdmo-h-[80svh] {# Keep both values help keep support for vh in firefox #}
             qfdmo-drop-shadow-[0_0_100px_rgba(0,0,0,0.5)]
             qfdmo-inset-0 qfdmo-font-black qfdmo-bg-white
             qfdmo-flex-col

diff --git a/jinja2/qfdmo/carte.html b/jinja2/qfdmo/carte.html
@@ -7,18 +7,21 @@
 {% endblock content_header %}
 
 {% block everything_else %}
-    {# Panel «Filtres» #}
-    {% include 'qfdmo/carte/modals/filters.html' %}
 
     {# Panel «Legend» #}
     {# TODO: refacto turbo, should be moved outside of form #}
     {% include 'qfdmo/carte/panels/legend_mobile.html' %}
-
-    {# Panel À propos #}
-    {# TODO: refacto turbo, should be moved outside of form #}
-    {% include 'qfdmo/carte/modals/a_propos.html' %}
 {% endblock everything_else %}
 
+{% block content_modals %}
+{# Panel «Filtres» #}
+{% include 'qfdmo/carte/modals/filters.html' %}
+
+{# Panel À propos #}
+{# TODO: refacto turbo, should be moved outside of form #}
+{% include 'qfdmo/carte/modals/a_propos.html' %}
+{% endblock content_modals %}
+
 {% block form %}
     {{ super() }}
     {{ form.epci_codes }}

diff --git a/jinja2/qfdmo/carte/panels/acteur_detail.html b/jinja2/qfdmo/carte/panels/acteur_detail.html
@@ -1,10 +1,10 @@
 {# Détail de l'adresse #}
 {# Barre visible en mobile uniquement #}
 <span
-    class="md:qfdmo-hidden qfdmo-rounded-full qfdmo-w-12w qfdmo-h-1v qfdmo-bg-[#DFDFDF] qfdmo-my-2w qfdmo-mx-auto"
+    class="qfdmo-snap-start md:qfdmo-hidden qfdmo-block qfdmo-rounded-full qfdmo-w-12w qfdmo-h-1v qfdmo-bg-[#DFDFDF] qfdmo-my-2w qfdmo-mx-auto"
 ></span>
 {# Content #}
-<div class="qfdmo-flex-grow qfdmo-relative qfdmo-snap-center">
+<div class="qfdmo-flex-grow qfdmo-relative qfdmo-snap-start">
     {# Close button #}
     <span
         class="qfdmo-cursor-pointer fr-icon fr-icon-close-line qfdmo-absolute qfdmo-top-0 qfdmo-right-0 qfdmo-text-blue-france-sun-113"

diff --git a/jinja2/qfdmo/shared/_main.html b/jinja2/qfdmo/shared/_main.html
@@ -23,8 +23,10 @@
         <section class="map-grid">
             <header
                 class="
+                qfdmo-bg-white
                 qfdmo-flex qfdmo-flex-row sm:qfdmo-items-center
-                max-md:qfdmo-sticky qfdmo-top-0 qfdmo-left-0 qfdmo-right-0 qfdmo-z-0"
+                max-md:qfdmo-sticky qfdmo-top-0 qfdmo-left-0 qfdmo-right-0
+                qfdmo-z-20"
             >
                 {% block content_header %}
                 {% endblock content_header %}
@@ -44,7 +46,6 @@
                 {% else %}
                 max-md:qfdmo-h-[calc(100vh_-_250px)]
                 {% endif %}
-                qfdmo-overflow-scroll
                 qfdmo-flex
                 max-md:qfdmo-sticky
                 qfdmo-z-0
@@ -74,17 +75,19 @@
             </main>
             {# Part of this tag style is defined in qfdmo.css because it would have been a bit unreadable as tailwind classes #}
             <aside class="
-                qfdmo-relative qfdmo-z-50
+                qfdmo-relative qfdmo-z-30
                 qfdmo-flex qfdmo-flex-col
-                max-md:qfdmo-min-h-screen
                 {% if is_carte %}md:qfdmo-h-[calc(100vh_-_120px)]{% else %}md:qfdmo-h-[calc(100vh_-_250px)]{% endif %}
                 max-md:qfdmo-snap-y md:qfdmo-overflow-scroll qfdmo-scroll-mt-[65vh]
-                max-md:qfdmo-drop-shadow-xl
+                max-md:qfdmo-snap-mandatory
                 qfdmo-bg-white
                 qfdmo-px-2w
+                qfdmo-drop-shadow-[0_0_100px_rgba(0,0,0,0.3)]
                 aria-[hidden=true]:max-md:qfdmo-animate-out
                 aria-[hidden=true]:max-md:qfdmo-slide-out-to-bottom
                 aria-[hidden=true]:data-[exit-animation-ended=true]:qfdmo-hidden
+                aria-[hidden=false]:max-md:qfdmo-min-h-[calc(100vh_-_200px)]
+                aria-[hidden=true]:max-md:qfdmo-hidden
             "
             tabindex="0"
             id="acteurDetailsPanel"
@@ -99,8 +102,13 @@
             {% endblock content_footer %}
             </footer>
         </section>
+        {% block content_modals %}
+        {% endblock content_modals %}
     </form>
 </turbo-frame>
 
-{% include 'qfdmo/reparacteur_modale.html' %}
 {% endblock content %}
+
+{% block modals %}
+    {% include 'qfdmo/reparacteur_modale.html' %}
+{% endblock modals %}
diff --git a/jinja2/qfdmo/shared/_map_container.html b/jinja2/qfdmo/shared/_map_container.html
@@ -28,7 +28,7 @@
                 <a class="qfdmo-flex lg:qfdmo-hidden
                             qfdmo-bg-white
                             fr-mb-1w fr-btn fr-btn--icon-left fr-icon-epingle-plus fr-btn--tertiary qfdmo-whitespace-nowrap qfdmo-w-auto qfdmo-justify-center
-                            qfdmo-absolute qfdmo-left-2w qfdmo-right-2w qfdmo-bottom-3w qfdmo-z-[1000]"
+                            qfdmo-absolute qfdmo-left-2w qfdmo-right-2w qfdmo-bottom-3w qfdmo-z-30"
                     href="{{ url('qfdmo:address-suggestion-form') }}"
                     target="_blank"
                     rel="noreferrer"

diff --git a/jinja2/qfdmo/shared/_search_in_zone.html b/jinja2/qfdmo/shared/_search_in_zone.html
@@ -3,7 +3,7 @@
     data-turbo-frame="adresses"
     data-action="click -> search-solution-form#advancedSubmit"
     class="fr-btn fr-btn--sm fr-btn--secondary fr-m-1w fr-p-1v
-            qfdmo-absolute qfdmo-z-[1010] qfdmo-right-0 qfdmo-hidden qfdmo-bg-white"
+            qfdmo-absolute qfdmo-z-30 qfdmo-right-0 qfdmo-hidden qfdmo-bg-white"
     type="button"
     data-with-controls={{"false" if is_carte else "true"}}
     data-testid="searchInZone"

diff --git a/static/to_compile/entrypoints/qfdmo.css b/static/to_compile/entrypoints/qfdmo.css
@@ -289,6 +289,20 @@ DSFR customization for tabs
 
   > aside {
     grid-area: detail;
+
+    &[aria-hidden=false]:after {
+        /* content: ''; */
+        ---size: 130px;
+        display: block;
+        background: #5555;
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: -1;
+        height: var(---size);
+        top: calc(-1 * var(---size));
+        background: linear-gradient(transparent, #3332);
+    }
   }
 
   > footer {