headers

MTES-MCT · Jan 29, 2025 · 64dd622 · 64dd622
1 parent 2a3f7f6
commit 64dd622
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 37 deletions.
diff --git a/envergo/static/sass/project.scss b/envergo/static/sass/project.scss
@@ -1304,12 +1304,37 @@ footer {
     }
   }
 
+  img.fr-header__brand-top {
+    width: 100%;
+    max-width: 6rem;
+    flex: 1;
+    padding: 0.25rem;
+    margin-right: 1rem;
+    min-width: 3.5rem;
+  }
+
+  .fr-header__service {
+    margin-left: 0;
+
+    &::after {
+      display: none;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+
   .fr-nav__link,
   .fr-nav__btn {
     padding: 0.75rem 1rem;
     min-height: 2rem;
   }
 
+  .fr-header__brand-top {
+    width: auto;
+  }
+
   &.header-slim {
     @media (width >= 62em) {
       .fr-header__body-row {
@@ -1340,10 +1365,6 @@ footer {
         background-color: var(--active-tint);
       }
     }
-
-    .fr-header__service {
-      padding: 0.75rem 1rem;
-    }
   }
 
   // Makes the header stick at the top of the page

diff --git a/envergo/templates/amenagement/_header.html b/envergo/templates/amenagement/_header.html
@@ -6,21 +6,17 @@
   <div class="fr-container">
     <div class="fr-header__body-row">
       <div class="fr-header__brand fr-enlarge-link">
-        <div class="fr-header__brand-top">
+        <img class="fr-header__brand-top fr-hidden-md"
+             src="{% static 'images/marianne.svg' %}"
+             alt="République française">
+        <div class="fr-header__brand-top fr-hidden fr-unhidden-md">
           <div class="fr-header__logo">
             <p class="fr-logo">
               République
               <br>
               Française
             </p>
           </div>
-          <div class="fr-header__navbar">
-            <button class="fr-btn--menu fr-btn"
-                    data-fr-opened="false"
-                    aria-controls="modal-menu"
-                    aria-haspopup="menu"
-                    title="Menu">Menu</button>
-          </div>
         </div>
         <div class="fr-header__service">
           <a href="/">
@@ -32,6 +28,13 @@
             </span>
           </a>
         </div>
+        <div class="fr-header__navbar">
+          <button class="fr-btn--menu fr-btn"
+                  data-fr-opened="false"
+                  aria-controls="modal-menu"
+                  aria-haspopup="menu"
+                  title="Menu">Menu</button>
+        </div>
       </div>
 
       {% if user.is_authenticated %}

diff --git a/envergo/templates/amenagement/_slim_header.html b/envergo/templates/amenagement/_slim_header.html
@@ -6,23 +6,21 @@
   <div class="fr-container">
     <div class="fr-header__body-row">
       <div class="fr-header__brand fr-enlarge-link">
-        <div class="fr-header__brand-top">
-          <div class="fr-header__logo">
-            <img src="{% static 'images/marianne.svg' %}" alt="République française">
-          </div>
-          <div class="fr-header__navbar">
-            <button class="fr-btn--menu fr-btn"
-                    data-fr-opened="false"
-                    aria-controls="modal-menu-slim"
-                    aria-haspopup="menu"
-                    title="Menu">Menu</button>
-          </div>
-        </div>
+        <img class="fr-header__brand-top"
+             src="{% static 'images/marianne.svg' %}"
+             alt="République française">
         <div class="fr-header__service">
           <a href="/">
             <p class="fr-header__service-title">EnvErgo</p>
           </a>
         </div>
+        <div class="fr-header__navbar">
+          <button class="fr-btn--menu fr-btn"
+                  data-fr-opened="false"
+                  aria-controls="modal-menu-slim"
+                  aria-haspopup="menu"
+                  title="Menu">Menu</button>
+        </div>
       </div>
 
       <div id="slim-menu" class="fr-header__tools">

diff --git a/envergo/templates/haie/_header.html b/envergo/templates/haie/_header.html
@@ -4,7 +4,10 @@
   <div class="fr-container">
     <div class="fr-header__body-row">
       <div class="fr-header__brand fr-enlarge-link">
-        <div class="fr-header__brand-top">
+        <img class="fr-header__brand-top fr-hidden-md"
+             src="{% static 'images/marianne.svg' %}"
+             alt="République française">
+        <div class="fr-header__brand-top fr-hidden fr-unhidden-md">
           <div class="fr-header__logo">
             <p class="fr-logo">
               République

diff --git a/envergo/templates/haie/_slim_header.html b/envergo/templates/haie/_slim_header.html
@@ -4,18 +4,9 @@
   <div class="fr-container">
     <div class="fr-header__body-row">
       <div class="fr-header__brand fr-enlarge-link">
-        <div class="fr-header__brand-top">
-          <div class="fr-header__logo">
-            <img src="{% static 'images/marianne.svg' %}" alt="République française">
-          </div>
-          <div class="fr-header__navbar">
-            <button class="fr-btn--menu fr-btn"
-                    data-fr-opened="false"
-                    aria-controls="modal-menu-slim"
-                    aria-haspopup="menu"
-                    title="Menu">Menu</button>
-          </div>
-        </div>
+        <img class="fr-header__brand-top"
+             src="{% static 'images/marianne.svg' %}"
+             alt="République française">
         <div class="fr-header__service">
           <a href="/">
             <span class="fr-header__service-title">Guichet unique de la haie</span>