Every year we are dependent on the support of people like you. Yearly donations ' + + 'help sustainably and enable long term development.
' + + 'No risks attached, you can tell us to stop at any time.
' +}; + +export default messages; diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss index 2361a26cf..755514912 100644 --- a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss +++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss @@ -101,6 +101,7 @@ $breakpoint: 800px; .wmde-banner-slider-container { padding: 0 0 8px; + border: none; } .wmde-banner-slide-content { diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss new file mode 100644 index 000000000..4bb783cb2 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss @@ -0,0 +1,50 @@ +$banner-height: 357px !default; +$form-width: 300px !default; + +.wmde-banner { + &-main { + min-height: $banner-height; + display: flex; + flex-direction: column; + padding: 12px 24px 0; + } + + &-content { + display: flex; + flex-direction: row; + flex-grow: 1; + } + + &-message { + padding: 0 15px; + border: 5px solid var( --message-border ); + border-radius: 9px; + margin-bottom: 10px; + } + + &-slider-container { + border: 5px solid var( --message-border ); + border-radius: 9px; + margin-bottom: 10px; + } + + &-column-left { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 1 auto; + overflow-y: hidden; + margin-right: 30px; + padding: 0 0 10px; + background: var( --message-background ); + } + + &-column-right { + order: 2; + flex: 0 0 $form-width; + display: flex; + flex-direction: column; + width: $form-width; + padding: 10px 0; + } +} diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss index 1e0e5a7f3..325a6b8fe 100644 --- a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss +++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss @@ -5,13 +5,13 @@ $select-group-image-label: true, $upgrade-to-yearly: true, $fallback-banner: true, - $progress-bar: true, + $double-progress-bar: true, $soft-close: true, ); @use 'src/themes/Treedip/variables/breakpoints'; @use 'src/components/BannerConductor/banner-transition'; @use 'Banner'; -@use 'MainBanner' with ( +@use 'MainBannerVar' with ( $banner-height: 355px, $form-width: 300px ); @@ -24,9 +24,7 @@ $right: 8px, $margin: -4.5px ); -@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/BubbleForm/SelectGroupBubble'; diff --git a/src/components/ProgressBar/currentCampaignTimePercentage.ts b/src/components/ProgressBar/currentCampaignTimePercentage.ts index 55eeaba6e..f87d7e350 100644 --- a/src/components/ProgressBar/currentCampaignTimePercentage.ts +++ b/src/components/ProgressBar/currentCampaignTimePercentage.ts @@ -1,6 +1,9 @@ import { CampaignParameters } from '@src/domain/CampaignParameters'; import TimeRange from '@src/utils/TimeRange'; +/** + * Calculate how much of the campaign has passed (in percent), using the campaign start and end date and the current date + */ export function currentCampaignTimePercentage( date: Date, campaignParameters: CampaignParameters ): number { const timeRange = TimeRange.createFromStrings( campaignParameters.startDate, diff --git a/src/components/ProgressBar/messages/DoubleProgressBar.en.ts b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts new file mode 100644 index 000000000..817740647 --- /dev/null +++ b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts @@ -0,0 +1,7 @@ +import { TranslationMessages } from '@src/Translator'; + +const translations: TranslationMessages = { + 'double-progress-close': 'Time is running out!' +}; + +export default translations; diff --git a/src/environment/dev/CampaignParameterOverride.ts b/src/environment/dev/CampaignParameterOverride.ts index 9e6099926..f3ad1d316 100644 --- a/src/environment/dev/CampaignParameterOverride.ts +++ b/src/environment/dev/CampaignParameterOverride.ts @@ -17,6 +17,6 @@ export function getCampaignParameterOverride( campaignParameters: CampaignParame ...campaignParameters, startDate: '2024-10-28', endDate: '2024-12-31', - isLateProgress: false + isLateProgress: true }; } diff --git a/src/utils/DynamicContent/generators/ProgressBarContent.ts b/src/utils/DynamicContent/generators/ProgressBarContent.ts index a09bf653d..046f5dcac 100644 --- a/src/utils/DynamicContent/generators/ProgressBarContent.ts +++ b/src/utils/DynamicContent/generators/ProgressBarContent.ts @@ -50,7 +50,7 @@ export class ProgressBarContent implements DynamicProgressBarContent { public get amountNeeded(): string { return this._translator.translate( 'amount-missing', { - amount: this._currencyFormatter.euroAmountWithThousandSeparator( this._remainingDonationSum ) + amount: this._currencyFormatter.millions( this._remainingDonationSum ) } ); } diff --git a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts index bc41ff0d0..5662a1afa 100644 --- a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts +++ b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts @@ -130,7 +130,7 @@ describe( 'DynamicCampaignText', () => { expect( dynamicCampaignText.progressBarContent.donationTarget ).toBe( 'Progress total €9.0M' ); expect( dynamicCampaignText.progressBarContent.donationTargetAmount ).toBe( '€9.0M' ); expect( dynamicCampaignText.progressBarContent.amountDonated ).toBe( '€0.1M' ); - expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing 8,900,000 euro' ); + expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing €8.9M' ); } ); it( 'Gets the average donation', () => {