From 3ac6a5f6134173720c34861bf464f78fc409fdc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?St=C3=A9phane=20Gigandet?= Date: Thu, 10 Aug 2023 16:44:57 +0200 Subject: [PATCH] chore: replace packagings banner with OFF days banner (#8831) * chore: replace packagings banner with OFF days banner * add template --- html/images/illustrations/you-are-invited.svg | 267 ++++++++++++++++++ scss/_off.scss | 75 +++++ .../common/includes/offdays_banner.tt.html | 74 +++++ templates/web/common/site_layout.tt.html | 2 + 4 files changed, 418 insertions(+) create mode 100644 html/images/illustrations/you-are-invited.svg create mode 100644 templates/web/common/includes/offdays_banner.tt.html diff --git a/html/images/illustrations/you-are-invited.svg b/html/images/illustrations/you-are-invited.svg new file mode 100644 index 0000000000000..29d14b47d5952 --- /dev/null +++ b/html/images/illustrations/you-are-invited.svg @@ -0,0 +1,267 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scss/_off.scss b/scss/_off.scss index 1fbeebe31d40b..780c5ed4b6d58 100644 --- a/scss/_off.scss +++ b/scss/_off.scss @@ -1282,6 +1282,81 @@ $section-cyan: #008c8c; } } +// OFF days banner + +.offdays-banner { + position: relative; + display: flex; + padding: 2rem 0; + background-color: $section-cyan; + @media #{$small-only} { + flex-direction: column; + padding: 1rem 0; + } + &__image { + display: block; + content: ""; + background: no-repeat bottom url(/images/illustrations/you-are-invited.svg); + min-width: 150px; + height: 90px; + } + &__content { + display: flex; + align-items: center; + flex-direction: row; + gap: 1rem; + margin: 0 auto; + max-width: 100rem; + @media #{$small-only} { + flex-direction: column; + gap: 0; + margin-top: -2rem; + } + &--button { + appearance: button; + display: inline-flex; + flex-direction: row; + align-items: center; + gap: 8px; + height: fit-content; + margin-bottom: 0; + @media #{$small-only} { + order: 3; + } + } + &-paragraphs { + > p { color: $white; } + a { color: #ffffcc; } + @media #{$small-only} { + text-align: center; + order: 2; + padding: 1rem; + } + &--thank-you { + font-weight: bold; + span { + color: red; + font-size: 1rem; + } + } + } + &-close { + align-self: flex-start; + cursor: pointer; + color: white; + opacity: 0.5; + margin-right: 1rem; + @media #{$small-only} { + position: relative; + top: -25px; + margin-right: 2rem; + align-self: flex-end; + order: 1; + } + } + } +} + // Footer: Scan your everyday foods #footer_scan { diff --git a/templates/web/common/includes/offdays_banner.tt.html b/templates/web/common/includes/offdays_banner.tt.html new file mode 100644 index 0000000000000..53c937b5facd4 --- /dev/null +++ b/templates/web/common/includes/offdays_banner.tt.html @@ -0,0 +1,74 @@ + + +
+ +
+ + + [% IF lc == "fr" %] + S'inscrire aux Journées Open Food Facts 2023 + [% ELSE %] + Register for the Open Food Facts Days 2023 + [% END %] + +
+

+ [% IF lc == "fr" %] + Les Journées Open Food Facts 2023, auront lieu en octobre à Paris ! + On vous y attend, INSCRIVEZ-VOUS ICI + [% ELSE %] + Our annual community event Open Food Facts Days 2023 will take place this October in Paris! + To be a part of it, REGISTER HERE + [% END %] +

+
+
+ close +
+
+ + + + diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html index 8c585ba9ee649..aad56b37afced 100644 --- a/templates/web/common/site_layout.tt.html +++ b/templates/web/common/site_layout.tt.html @@ -265,6 +265,8 @@ [% IF ! server_options_producers_platform %] [%# for now, display the packagings banner in all cases %] [% IF 1 == 1 %] + [% INCLUDE 'web/common/includes/offdays_banner.tt.html' %] + [% ELSIF 1 == 2 %] [% INCLUDE 'web/common/includes/packagings_banner.tt.html' %] [% ELSE %] [%# we keep the old code so that we can easily put back the donation banner %]