@@ -71,7 +71,7 @@ import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
import { Tracker } from '@src/tracking/Tracker';
import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
-import ProgressBarAlternative from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
interface Props {
bannerState: BannerStates;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts
index 6719de775..6af854a63 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts
@@ -8,6 +8,7 @@ import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/Main
import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import DoubleProgressBarDe from '@src/components/ProgressBar/messages/DoubleProgressBar.de';
const messages: TranslationMessages = {
...CustomAmountFormDe,
@@ -19,6 +20,7 @@ const messages: TranslationMessages = {
...AlreadyDonatedModal,
...FallbackBanner,
...SoftCloseDe,
+ ...DoubleProgressBarDe,
'already-donated-go-away-button': 'Im Moment nicht',
'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
'upgrade-to-yearly-copy': `
Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/FallbackBannerVar.scss b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/FallbackBannerVar.scss
index a0d40542d..3fd60d8a5 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/FallbackBannerVar.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/FallbackBannerVar.scss
@@ -50,8 +50,6 @@ $breakpoint: 800px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
- border: 4px solid var( --fallback-message-border );
- border-radius: 4px;
padding: 8px 0;
}
@@ -81,10 +79,12 @@ $breakpoint: 800px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
- padding: 8px 0;
+ padding: 8px 8px 0;
+ margin: -5px 0 8px;
color: var( --fallback-message-color );
background-color: var( --fallback-message-background );
- margin: 15px;
+ border: 4px solid var( --fallback-message-border );
+ border-radius: 4px;
p {
margin-bottom: 0;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/MainBannerVar.scss b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/MainBannerVar.scss
index 1bf067da0..b1e59c844 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/MainBannerVar.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/MainBannerVar.scss
@@ -31,6 +31,10 @@ $form-width: 300px !default;
justify-content: center;
align-items: center;
padding: 11px;
+
+ border: 5px solid var( --message-border );
+ border-radius: 9px;
+ margin-bottom: 10px;
}
&-column-left {
@@ -38,13 +42,10 @@ $form-width: 300px !default;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
- margin-bottom: 0;
overflow-y: hidden;
margin-right: 30px;
padding: 0 0 10px;
background: var( --message-background );
- border: 5px solid var( --message-border );
- border-radius: 9px;
}
&-column-right {
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/styles_var.scss
index ac27f3996..35845eacb 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_20/styles/styles_var.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_20/styles/styles_var.scss
@@ -4,22 +4,20 @@
$select-group: true,
$upgrade-to-yearly: true,
$fallback-banner: true,
- $progress-bar: true,
+ $double-progress-bar: true,
$soft-close: true,
);
@use 'src/components/BannerConductor/banner-transition';
@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
@use 'Banner';
@use 'src/themes/UseOfFunds/UseOfFunds';
-@use 'MainBanner' with (
+@use 'MainBannerVar' with (
$banner-height: 357px,
$form-width: 300px
);
@use 'src/themes/Treedip/defaults';
@use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
- $progress-bar-margin: 0 15px
-);
+@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
@use 'src/themes/Treedip/DonationForm/DonationForm';
@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
@@ -36,9 +34,7 @@
@use 'src/themes/Treedip/Message/Message' with (
$slider-main-headline-font-size: 25px,
$message-header-padding-bottom: 8px,
- $message-header-small-up-padding-bottom: 8px,
- $message-header-padding-top: 20px,
- $message-header-small-up-padding-top: 20px
+ $message-header-small-up-padding-bottom: 8px
);
@use 'src/themes/Treedip/SoftClose/SoftClose';
@use 'src/themes/Treedip/Slider/KeenSlider' with (
@@ -52,7 +48,9 @@
*/
@use 'FallbackBannerVar';
@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
-@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter' with (
+ $fallback-large-footer-right-before-border-color: white
+);
@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with (
$progress-bar-margin: 0 15px
diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
index 28a4b51e8..1d96a52d2 100644
--- a/docs/2025PostCampaignCleanUp.md
+++ b/docs/2025PostCampaignCleanUp.md
@@ -130,3 +130,19 @@ If any imports from the `@banners/` namespace remain in the "final" banner, they
- `banners/*/LAST_BANNER/event_map*` (`LAST_BANNER` is a placeholder for the last banner (i.e. highest test number) in each channel)
- `src/tracking/events/*.ts`
+
+## Rename `ProgressBarAlternative.vue`
+
+### Files to look at
+
+- src/components/ProgressBar/ProgressBarAlternative.vue
+
+## Fallback banner progress bar
+
+Currently, if the progress bar on main banner is different than progress bar on fallback banner, then the progress bar on fallback banner becomes broken.
+
+Ex. If main banner uses double progress bar and FB banner uses progress bar alternative, the progress bar on FB banner is broken.
+
+So, somehow the progress bar on FB banner is dependant on progress bar on main banner.
+
+Could we make them fully independent of each other?
diff --git a/src/themes/Fijitiv/FallbackBanner/LargeFooter.scss b/src/themes/Fijitiv/FallbackBanner/LargeFooter.scss
index 5c91acc6e..8a4437da1 100644
--- a/src/themes/Fijitiv/FallbackBanner/LargeFooter.scss
+++ b/src/themes/Fijitiv/FallbackBanner/LargeFooter.scss
@@ -1,5 +1,7 @@
@use 'src/components/FallbackBanner/LargeFooter';
+$fallback-large-footer-right-before-border-color: var( --fallback-message-border ) transparent transparent transparent !default;
+
.wmde-banner-fallback {
@include LargeFooter.layout;
@@ -25,7 +27,7 @@
height: 0;
border-style: solid;
border-width: 6px 6px 0;
- border-color: var( --fallback-message-border ) transparent transparent transparent;
+ border-color: $fallback-large-footer-right-before-border-color;
}
}