From 5affee051cda5af47ab977826744b62b94666633 Mon Sep 17 00:00:00 2001 From: sultanowski Date: Tue, 15 Nov 2022 21:58:51 +0100 Subject: [PATCH 1/9] fix: Added [x] button to donation banner, changed cookie JS and refactored code. --- scss/_off.scss | 66 +++++++++++ .../web/common/includes/donate_banner.tt.html | 111 ++++++++++-------- 2 files changed, 129 insertions(+), 48 deletions(-) diff --git a/scss/_off.scss b/scss/_off.scss index 7f33887d91b6e..c7662987b7aa3 100644 --- a/scss/_off.scss +++ b/scss/_off.scss @@ -1157,6 +1157,71 @@ span.ico-bold { @include button( 10, $white); } +// rework: of donation banner. + +[data-hidden="true"] { display: none !important; } +[data-hidden="false"] { display: flex !important; } + +#donate-banner { + position: relative; + display: flex; + padding: 2rem 0; + background-color: #6D85D9; + @media #{$small-only} { + flex-direction: column; + &__content { + flex-direction: column; + .banner-content { + order: 1; + flex-direction: column; + p { + text-align: center; + margin: 1rem; + } + } + .button { order: 2; } + } + } + p { color: $white; } + &__image { + display: block; + content: ""; + background: no-repeat url(/images/illustrations/donate-heart.svg); + min-width: 150px; + height: 81px; + } + &__content { + display: inline-flex; + align-items: center; + gap: 2rem; + .banner-content { + display: flex; + flex-direction: column; + } + .banner__close { + width: 32px; + height: 32px; + .banner__close--icon { + position: absolute; + top: 0; right: 0; + margin: 1rem; + color: $white; + opacity: .5; + cursor: pointer; + } + } + & label > span { visibility: hidden; } + > .button { + display: inline-flex !important; + flex-direction: row; + align-items: center; + gap: 8px; + margin-bottom: 0; + } + } +} + +/* #donate_image_banner_outside { margin-bottom:1rem; background: no-repeat url(/images/illustrations/donate-heart.svg) @@ -1165,6 +1230,7 @@ span.ico-bold { #donate_image_banner_inside { @media only screen and (max-width: 100rem) {margin-left:140px;} } +*/ .footer_social_icon { height:24px; diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html index 0bc78590a4e1b..79f17bb45d08d 100644 --- a/templates/web/common/includes/donate_banner.tt.html +++ b/templates/web/common/includes/donate_banner.tt.html @@ -3,54 +3,69 @@ [% IF banner %] - + + + + [% END %] From 2eadb40476a58efb933c6126b71e162d1957743b Mon Sep 17 00:00:00 2001 From: sultanowski Date: Tue, 15 Nov 2022 22:40:00 +0100 Subject: [PATCH 2/9] style: removed unused styles (donation banner) --- scss/_off.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/scss/_off.scss b/scss/_off.scss index c7662987b7aa3..9c7bf25bc6df4 100644 --- a/scss/_off.scss +++ b/scss/_off.scss @@ -1157,11 +1157,6 @@ span.ico-bold { @include button( 10, $white); } -// rework: of donation banner. - -[data-hidden="true"] { display: none !important; } -[data-hidden="false"] { display: flex !important; } - #donate-banner { position: relative; display: flex; @@ -1221,17 +1216,6 @@ span.ico-bold { } } -/* -#donate_image_banner_outside { - margin-bottom:1rem; - background: no-repeat url(/images/illustrations/donate-heart.svg) -} - -#donate_image_banner_inside { - @media only screen and (max-width: 100rem) {margin-left:140px;} -} -*/ - .footer_social_icon { height:24px; vertical-align:middle; From 5682a535713a8899d27183c6c2f4db90544c5f3b Mon Sep 17 00:00:00 2001 From: sultanowski Date: Wed, 16 Nov 2022 13:14:14 +0100 Subject: [PATCH 3/9] fix: Remove additional margins, set max-width, delete unused code. --- lib/ProductOpener/Display.pm | 26 ------------------- scss/_off.scss | 26 ++++++++++++++----- .../web/common/includes/donate_banner.tt.html | 16 +++--------- 3 files changed, 23 insertions(+), 45 deletions(-) diff --git a/lib/ProductOpener/Display.pm b/lib/ProductOpener/Display.pm index e637b14efa54d..9dd59fa72829b 100644 --- a/lib/ProductOpener/Display.pm +++ b/lib/ProductOpener/Display.pm @@ -7610,32 +7610,6 @@ sub display_page ($request_ref) { $template_data_ref->{link} = $link; $template_data_ref->{lc} = $lc; - if ( - not($server_options{producers_platform}) - and ( (not(defined cookie('hide_image_banner_2021'))) - or (not(cookie('hide_image_banner_2021') eq '1'))) - ) - { - $template_data_ref->{banner} = $banner; - - $initjs .= <<'JS'; -if ($.cookie('hide_image_banner_2021') == '1') { - $('#hide_image_banner').prop('checked', true); - $('#donate_banner').remove(); -} -else { - $('#hide_image_banner').prop('checked', false); - $('#donate_banner').show(); - $('#hide_image_banner').change(function () { - if ($('#hide_image_banner').prop('checked')) { - $.cookie('hide_image_banner_2021', '1', { expires: 90, path: '/' }); - $('#donate_banner').remove(); - } - }); -} -JS - } - my $tagline = lang("tagline"); if ($server_options{producers_platform}) { diff --git a/scss/_off.scss b/scss/_off.scss index 9c7bf25bc6df4..97052c2e001cf 100644 --- a/scss/_off.scss +++ b/scss/_off.scss @@ -1160,21 +1160,30 @@ span.ico-bold { #donate-banner { position: relative; display: flex; - padding: 2rem 0; + padding: 1rem 0; background-color: #6D85D9; @media #{$small-only} { flex-direction: column; &__content { flex-direction: column; + gap: 0 !important; + margin-top: -2rem; .banner-content { order: 1; flex-direction: column; p { text-align: center; - margin: 1rem; + margin: 0 1rem; } + .banner-thanks { + margin-top: 1rem; + margin-bottom: 1rem; + } + } + .button { + order: 2; + padding: 1rem 2rem; } - .button { order: 2; } } } p { color: $white; } @@ -1189,14 +1198,20 @@ span.ico-bold { display: inline-flex; align-items: center; gap: 2rem; + max-width: 100rem; + margin: 0 auto; .banner-content { display: flex; flex-direction: column; + .banner-thanks { + font-weight: 900; + span { color: red; font-size: 1rem; } + } } - .banner__close { + .banner-close { width: 32px; height: 32px; - .banner__close--icon { + .banner-close__icon { position: absolute; top: 0; right: 0; margin: 1rem; @@ -1205,7 +1220,6 @@ span.ico-bold { cursor: pointer; } } - & label > span { visibility: hidden; } > .button { display: inline-flex !important; flex-direction: row; diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html index 79f17bb45d08d..297711ac1d734 100644 --- a/templates/web/common/includes/donate_banner.tt.html +++ b/templates/web/common/includes/donate_banner.tt.html @@ -13,19 +13,17 @@ - + +[% END %] + + +[% banner_footer = BLOCK %] + +
+ +
+ + volunteer_activism + [% lang('donation_cta') %] + +
+

+ [% f_lang('donation_body_employees', { 'number_of_employees' => '8' }) %] [% + f_lang('donation_why_year', { year => '2023' }) %] +

+

[% lang('thank_you') %] favorite

+
+
+ [% END %] diff --git a/templates/web/common/includes/donate_banner_bottom.tt.html b/templates/web/common/includes/donate_banner_bottom.tt.html deleted file mode 100644 index 004cbd6bee5db..0000000000000 --- a/templates/web/common/includes/donate_banner_bottom.tt.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html index d0f40a10a6ec1..7a241be01aa87 100644 --- a/templates/web/common/site_layout.tt.html +++ b/templates/web/common/site_layout.tt.html @@ -30,7 +30,6 @@
-
[% END %] - -
- -
- - [% INCLUDE 'web/common/includes/donate_banner.tt.html' %] - [% IF page_format == "banner" %] +
+
+ [% PROCESS 'web/common/includes/donate_banner.tt.html' %] + [% banner_main %] + [% IF page_format == "banner" %] [% content %] [% ELSIF page_type == "products" %] @@ -261,10 +258,9 @@

[% title %]

-
-