Assistant V2 - Responsive - Nouvelle vague (#1136)

incubateur-ademe · Dec 13, 2024 · 106df69 · 106df69
1 parent eacd9e4
commit 106df69
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/static/to_compile/entrypoints/qfdmd.css b/static/to_compile/entrypoints/qfdmd.css
@@ -26,10 +26,12 @@
         "left middle right";
 
         .top {
+            --col-size: 7.5rem;
+            --row-size: 7rem;
             @apply qf-grid;
             grid-area: top;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            grid-auto-rows: 7rem;
+            grid-template-columns: repeat(auto-fit, minmax(var(--col-size), 1fr));
+            grid-auto-rows: var(--row-size);
         }
 
         .middle {
@@ -40,9 +42,6 @@
 
         .right, .left {
             @apply qf-flex qf-flex-wrap qf-items-center qf-justify-center qf-flex-row-reverse;
-            /* grid-area: right;
-            grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-            grid: auto-flow dense / 40px 40px 1fr; */
             > .icon {
                 flex: 0 1 calc(50% - 16px);
             }
@@ -51,7 +50,7 @@
         .icon {
             --scale: 1;
             --rotate-factor: 1;
-            @apply qf-p-2w;
+            @apply md:qf-p-2w;
 
             a {
                 &:hover {
@@ -74,6 +73,20 @@
             }
         }
     }
+    @media (max-width: 768px) {
+        .patchwork .top {
+            --col-size: 5rem;
+            --row-size: 5rem;
+            /* @apply qf-pb-6w; */
+        }
+        .icon a {
+            --scale: 0.75;
+
+            &:hover {
+                --scale: 0.75;
+            }
+        }
+    }
     @media (max-width: 1247px) {
         .patchwork .top .icon:nth-last-child(-n + 1) {
             @apply qf-hidden;
@@ -91,8 +104,32 @@
             @apply qf-hidden;
         }
     }
+    @media (min-width: 768px) and (max-width: 860px) {
+        .patchwork .top .icon:nth-last-child(-n + 5) {
+            @apply qf-hidden;
+        }
+    }
+    @media (max-width: 591px) {
+        .patchwork .top .icon:nth-last-child(-n + 4) {
+            @apply qf-hidden;
+        }
+    }
+    @media (max-width: 512px) {
+        .patchwork .top .icon:nth-last-child(-n + 5) {
+            @apply qf-hidden;
+        }
+    }
+    @media (max-width: 480px) {
+        .patchwork .top .icon:nth-last-child(-n + 6) {
+            @apply qf-hidden;
+        }
+    }
+    @media (max-width: 360px) {
+        .patchwork .top .icon:nth-last-child(-n + 7) {
+            @apply qf-hidden;
+        }
+    }
     @media (max-width: 860px) {
-        .patchwork .top .icon:nth-last-child(-n + 4),
         .patchwork .right,
         .patchwork .left {
             @apply qf-hidden;

diff --git a/templates/components/produit/_detail.html b/templates/components/produit/_detail.html
@@ -11,9 +11,8 @@
     <section id="ou-l-apporter" class="qf-mb-4w">
         <h2>Où l'apporter</h2>
         <iframe
-            class="qf-aspect-[9/16] md:qf-aspect-[4/3]
-            qf-w-full
-            max-md:qf-min-h-[80vh] md:qf-min-h-[46em] md:qf-max-h-[50em]"
+            class="max-md:qf-aspect-[9/20] qf-max-h-[90vh] md:qf-max-h-[90svh]
+            md:qf-max-h-[90vh] md:qf-h-[50em] qf-w-full"
             src="{{ url_carte|default:produit.sous_categories.first.url_carte }}"></iframe>
     </section>
     {% endif %}

diff --git a/templates/qfdmd/synonyme_detail.html b/templates/qfdmd/synonyme_detail.html
@@ -10,7 +10,7 @@
 {% with object.produit as produit %}
 <article
     class="qf-flex qf-flex-col
-    qf-gap-4w"
+    qf-gap-4w max-xl:qf-pr-6w"
 >
     <header class="qf-mt-3w md:qf-mt-5w">
         <h1 class="qf-m-0">