saumur: allow custom banner for commune via card (#70620)

static/saumur/_custom.scss

@@ -23,49 +23,48 @@ main {
 
 // header and navigation
 
-#logo {
-    @media screen and ($max-mobile-viewport) { 
-        padding: 0 $space-small;
-        display: inline-block;
-        
-    }
-}
-
-#logo.has-logo a {
-    z-index: 2;
-    height: $logo-height / 2;
-    min-width: $logo-height;
-    @media screen and ($min-desktop-viewport) { 
-        height: $logo-height;
-        min-width: $logo-height * 2;
-    }
-}
-
-.site-nav {
-    z-index: 101;
-}
-.gru-nav-wrapper {
-    margin-top: -$logo-height * 0.85;
-}
-
-div.gru-nav {
-    background: transparent;
+.site-header {
+    background-color: white;
+    height: 150px;
     @media screen and ($min-desktop-viewport) {
-        > ul {
-            text-align: right;
-            float: right;
+        height: 300px;
+    }
+}
+
+body.has-header-background .site-header {
+    background-color: white;
+    background-image: var(--banner-url);
+    background-size: cover;
+    background-position: center;
+}
+#logo.has-logo a {
+    height: 100px;
+    width: 250px;
+    @media screen and ($max-mobile-viewport) {
+        margin-top: $space-medium;
+    }
+    @media screen and ($min-desktop-viewport) { 
+        height: 200px;
+        width: 500px;
+    }
+}
+
+div#nav {
+    max-width: 100%;
+    @media screen and ($min-desktop-viewport) {
+        text-align: center;
         }
+    & > ul {
+        margin: 0;
     }
-    & > ul > li:first-child > a {
-        border-radius: $border-radius-1;
     }
-    & > ul > li a {
-        font-weight: 500;
+
+#toplinks {
+    @media screen and ($max-mobile-viewport) {
+        right: $space-xlarge * 2;
     }
-    .menu--link {
-        border-radius: $border-radius-1;
-        
     }
+div.gru-nav {
     @media screen and ($max-mobile-viewport) {
         .gru-nav-button {
             top: $space-small;
@@ -84,30 +83,9 @@ div.gru-nav {
     }
 }
 
-#toplinks {
-    @media screen and ($max-mobile-viewport) {
-        position: static;
-        display: inline-block;
-        margin-right: $nav-menu-side;
-        background: transparent;
-    }
-}
-
-//  banner
-
-.banner {
-    background-image: url(/assets/banner:background);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: $banner-height / 1.5;
-    @media screen and ($min-desktop-viewport) {
-        height: $banner-height;
-    }
-}
 // content and cells
 
-h1, h2, h3, h4, h5, h6 {
+h1:not(.has-logo), h2, h3, h4, h5, h6 {
     @extend %title;
 }
 h1 {

static/saumur/config.json

@@ -8,7 +8,8 @@
     "combo": {
       "COMBO_ASSET_SLOTS.update": {
         "header:logo": { "label": "Têtière : logo" },
-        "banner:background": {"label": "Bannière : image de fond"}
+        "header:background": {"label": "Têtière : image de fond"}
+      },
       }
     }
   }

templates/variants/saumur/combo/page_template.html

@@ -1,9 +1,23 @@
 {% extends 'combo/page_template.html' %}
 {% load assets combo i18n %}
 
+
+
 {% block before-main-content %}
+  <style>
+    :root {
+      {% if code_postal_commune %}
+      {% with cards|objects:"commune"|filter_by:"code_postal"|filter_value:code_postal_commune|include_fields|first|get:"fields" as commune_card %}  
+      {% with commune_card|get:'banner' as banner %}
+      --banner-url: url('{% make_public_url banner.url %}');
+      {% endwith %}
+      {% endwith %}
+      {% else %}
+      --banner-url: url(/assets/header:background);
+      {% endif %}
+    }
+  </style>
   {{ block.super }}
-  {% get_asset "banner:background" as banner_background %}
   {% if banner_background %}
     <div class="banner"></div>
   {% endif %}