From 7d063e45db1b2c53a0a6965e9916c40d18457b69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Mon, 16 Jul 2018 12:06:47 +0200 Subject: [PATCH] general: add support for a banner with page picture in all themes (#25352) --- help/fr/misc-scss.page | 11 +++++++++++ static/amiens-metropole/_vars.scss | 1 + static/grandlyon-sau/_vars.scss | 1 + static/grenoble-metropole/_vars.scss | 1 + static/grosboule-les-bains/_custom.scss | 8 -------- static/grosboule-les-bains/_vars.scss | 1 + static/grosboule-les-bains/extra.js | 5 ----- static/includes/_nav.scss | 19 +++++++++++++++++++ static/moselle/_vars.scss | 1 + static/nancy-2017/_vars.scss | 1 + static/strasbourg-2018/_vars.scss | 1 + static/toodego/_vars.scss | 1 + templates/combo/page_template.html | 7 +++++++ 13 files changed, 45 insertions(+), 13 deletions(-) diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page index 2f1935e..52f3ab2 100644 --- a/help/fr/misc-scss.page +++ b/help/fr/misc-scss.page @@ -246,6 +246,17 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.

Style de la bordure de l'élément survolé.

$nav-item-selected-border

+ +

$nav-after-image

+

Ajout sous la navigation d'un bandeau avec l'image associée à la page. + (ne fonctionne pas avec Internet Explorer)

+

true

+ + +

$nav-after-image-image

+

Hauteur de l'éventuel bandeau image.

+

300px

+ diff --git a/static/amiens-metropole/_vars.scss b/static/amiens-metropole/_vars.scss index e681493..f0baa79 100644 --- a/static/amiens-metropole/_vars.scss +++ b/static/amiens-metropole/_vars.scss @@ -14,6 +14,7 @@ $nav-color: $font-color; $nav-active-color: $primary-color; $nav-item-selected-color: white; $nav-item-hover-color: white; +$nav-after-image: false; $button-background: darken($primary-color, 10%); $title-font-family: 'AbrilFatface-Regular', Arial, Helvetica, sans-serif; $title-background: $primary-color; diff --git a/static/grandlyon-sau/_vars.scss b/static/grandlyon-sau/_vars.scss index ce9de1b..f1c7dc0 100644 --- a/static/grandlyon-sau/_vars.scss +++ b/static/grandlyon-sau/_vars.scss @@ -14,6 +14,7 @@ $nav-color: #050707; $nav-active-color: white; $nav-item-selected-color: $primary-color; $nav-menu-color: $primary-color; +$nav-after-image: false; $button-background: $link-color; $title-color: #000; $title-font-size: 2em; diff --git a/static/grenoble-metropole/_vars.scss b/static/grenoble-metropole/_vars.scss index 204d35b..b94609a 100644 --- a/static/grenoble-metropole/_vars.scss +++ b/static/grenoble-metropole/_vars.scss @@ -18,6 +18,7 @@ $nav-item-selected-mode: bottom-border; $nav-item-selected-border: 5px solid $primary-color; $nav-item-hover-background: transparent; $nav-item-hover-color: $primary-color; +$nav-after-image: false; $button-background: $primary-color; $button-color: #000; $title-color: #000; diff --git a/static/grosboule-les-bains/_custom.scss b/static/grosboule-les-bains/_custom.scss index b668d6e..77d3e8b 100644 --- a/static/grosboule-les-bains/_custom.scss +++ b/static/grosboule-les-bains/_custom.scss @@ -54,14 +54,6 @@ div#main-content-wrapper { } body.has-picture { - nav::after { - content: ""; - display: block; - width: 100%; - height: 600px; - background: white center center no-repeat; - background-size: cover; - } div#main-content-wrapper { padding-top: 1rem; } diff --git a/static/grosboule-les-bains/_vars.scss b/static/grosboule-les-bains/_vars.scss index ac7c808..6eb43a7 100644 --- a/static/grosboule-les-bains/_vars.scss +++ b/static/grosboule-les-bains/_vars.scss @@ -5,6 +5,7 @@ $border-radius: 3px; $nav-active-color: $primary-color; $nav-item-selected-mode: bottom-border; $nav-submenu-color: $font-color; +$nav-after-image-height: 600px; $button-background: $primary-color; $cell-border: 1px solid transparent; diff --git a/static/grosboule-les-bains/extra.js b/static/grosboule-les-bains/extra.js index bad6fbf..9f499cf 100644 --- a/static/grosboule-les-bains/extra.js +++ b/static/grosboule-les-bains/extra.js @@ -1,9 +1,4 @@ $(function() { - /* set page picture as background */ - if (document.body.attributes['data-picture']) { - var sheet = document.head.appendChild(document.createElement("style")).sheet; - sheet.insertRule('body.has-picture nav::after { background-image: url(' + document.body.attributes['data-picture'].value + ')', 0); - } /* add a class to body when the page got scrolled */ $(window).on('scroll', function() { if ($(window).scrollTop() == 0) { diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss index 823cd73..1a7faac 100644 --- a/static/includes/_nav.scss +++ b/static/includes/_nav.scss @@ -34,6 +34,9 @@ $nav-item-spacing: 0px !default; $border-radius: 0 !default; $responsive-menu: top-to-bottom !default; /* or left-to-right */ +$nav-after-image: true !default; +$nav-after-image-height: 300px !default; + @if $nav-full-width-background == true { div.gru-nav-wrapper { @@ -321,3 +324,19 @@ div.menucell { } } } + +@if $nav-after-image == true { + @supports (background-image: var(--page-picture)) { + body.has-picture nav::after { + content: ""; + display: block; + width: 100%; + height: $nav-after-image-height; + background: transparent center center no-repeat; + background-image: var(--page-picture); + background-size: cover; + position: relative; + top: -0.5rem; + } + } +} diff --git a/static/moselle/_vars.scss b/static/moselle/_vars.scss index 7faf8e8..155b183 100644 --- a/static/moselle/_vars.scss +++ b/static/moselle/_vars.scss @@ -8,6 +8,7 @@ $nav-color: white; $nav-active-color: $primary-color; $nav-submenu-color: white; $nav-item-hover-background: lighten($primary-color, 10%); +$nav-after-image: false; $footer-background: white; $footer-color: $font-color; diff --git a/static/nancy-2017/_vars.scss b/static/nancy-2017/_vars.scss index 2d44862..c879586 100644 --- a/static/nancy-2017/_vars.scss +++ b/static/nancy-2017/_vars.scss @@ -7,6 +7,7 @@ $font-color: #282d33; $font-family: "Poppins", sans-serif; $nav-background: transparent; $nav-active-color: transparent; +$nav-after-image: false; $border-radius: 0px; $title-background: transparent;; $title-color: $red; diff --git a/static/strasbourg-2018/_vars.scss b/static/strasbourg-2018/_vars.scss index be1024b..7783eec 100644 --- a/static/strasbourg-2018/_vars.scss +++ b/static/strasbourg-2018/_vars.scss @@ -11,3 +11,4 @@ $button-background: $core-color; $button-color: white; $cell-border: 0; $cell-title-cover-border: false; +$nav-after-image: false; diff --git a/static/toodego/_vars.scss b/static/toodego/_vars.scss index c6f0e8e..fa26f4f 100644 --- a/static/toodego/_vars.scss +++ b/static/toodego/_vars.scss @@ -18,6 +18,7 @@ $title-padding: 1rem; $nav-item-selected-mode: bottom-border; $nav-item-hover-mode: bottom-border; $nav-item-selected-border: 14px solid $red; +$nav-after-image: false; $footer-background: black; $footer-color: white; diff --git a/templates/combo/page_template.html b/templates/combo/page_template.html index ce06527..a55fe23 100644 --- a/templates/combo/page_template.html +++ b/templates/combo/page_template.html @@ -6,6 +6,13 @@ {% skeleton_extra_placeholder extra-top-head %} {% end_skeleton_extra_placeholder %} +{% if page.picture %} + +{% endif %} {% endblock %} {% block extra_scripts %} -- 2.18.0