Skip to content

Commit

Permalink
Implement Var for C24_WMDE_Desktop_DE_20
Browse files Browse the repository at this point in the history
- The variant banner is changed according to the design file:

- Update Clean up 2025 document The progress bar is split out of the red bordered box. Another progress bar
    is added showing the number of campaign days passed.Ticket: https://phabricator.wikimedia.org/T381401
  • Loading branch information
Sperling-0 committed Dec 13, 2024
1 parent 0a28327 commit 5e08098
Show file tree
Hide file tree
Showing 9 changed files with 42 additions and 21 deletions.
2 changes: 2 additions & 0 deletions banners/desktop/C24_WMDE_Desktop_DE_20/banner_var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
import { WindowTimer } from '@src/utils/Timer';
import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';

const date = new Date();
const localeFactory = new LocaleFactoryDe();
Expand Down Expand Up @@ -69,5 +70,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
app.provide( 'tracker', tracker );
app.provide( 'timer', new WindowTimer() );
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );

app.mount( page.getBannerContainer() );
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</template>

<template #progress>
<ProgressBar amount-to-show-on-right="TARGET"/>
<DoubleProgressBar/>
</template>

<template #donation-form="{ formInteraction }: any">
Expand Down Expand Up @@ -104,7 +104,7 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
<div class="wmde-banner-fallback-message">
<FallbackText/>
<ProgressBarAlternative amount-to-show-on-right="TARGET"/>
<DoubleProgressBar/>
</div>

<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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': `<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,20 +31,21 @@ $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 {
display: flex;
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 {
Expand Down
16 changes: 7 additions & 9 deletions banners/desktop/C24_WMDE_Desktop_DE_20/styles/styles_var.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 (
Expand All @@ -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
Expand Down
16 changes: 16 additions & 0 deletions docs/2025PostCampaignCleanUp.md
Original file line number Diff line number Diff line change
Expand Up @@ -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?
4 changes: 3 additions & 1 deletion src/themes/Fijitiv/FallbackBanner/LargeFooter.scss
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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;
}
}

Expand Down

0 comments on commit 5e08098

Please sign in to comment.