Implement VAR for C24_WMDE_Mobile_DE_11

Ticket: https://phabricator.wikimedia.org/T380854
wmde · Dec 2, 2024 · 420f353 · 420f353
1 parent 5590e59
commit 420f353
Show file tree

Hide file tree

Showing 11 changed files with 220 additions and 131 deletions.
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_11/components/BannerVar.vue
@@ -98,6 +98,11 @@
 					{{ $translate( 'soft-close-button-already-donated' ) }}
 				</button>
 			</template>
+			<template #close-button>
+				<button class="wmde-banner-close" @click.prevent="onClose( 'SoftClose', CloseChoices.Close )">
+					<CloseIconMobile/>
+				</button>
+			</template>
 		</SoftClose>
 
 		<FundsModal
@@ -116,7 +121,7 @@
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { computed, inject, ref, watch } from 'vue';
 import FullPageBanner from './FullPageBannerVar.vue';
-import MiniBanner from './MiniBanner.vue';
+import MiniBanner from './MiniBannerVar.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
 import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
@@ -151,6 +156,7 @@ import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
 import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
 import { Translator } from '@src/Translator';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/components/FullPageBannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_11/components/FullPageBannerVar.vue
@@ -8,27 +8,30 @@
 				<slot name="banner-text"/>
 				<slot name="progress"/>
 			</div>
+
 			<div class="wmde-banner-full-call-to-action">
 				Jetzt sind Sie <span class="wmde-banner-full-call-to-action-optional-text">in Deutschland</span> gefragt.
 			</div>
 
-			<slot name="donation-form"/>
+			<div class="wmde-banner-full-content-below-info">
+				<slot name="donation-form"/>
 
-			<ThankYouBox/>
+				<ThankYouBox/>
 
-			<div class="wmde-banner-full-small-print">
-				<span>
-					<a
-						id="application-of-funds-link"
-						class="wmde-banner-footer-usage-link t-use-of-funds-link"
-						@click.prevent="$emit( 'showFundsModal' )"
-					>
-						{{ $translate( 'use-of-funds-link' ) }}
-					</a>
-				</span>
-			</div>
+				<div class="wmde-banner-full-small-print">
+					<span>
+						<a
+							id="application-of-funds-link"
+							class="wmde-banner-footer-usage-link t-use-of-funds-link"
+							@click.prevent="$emit( 'showFundsModal' )"
+						>
+							{{ $translate( 'use-of-funds-link' ) }}
+						</a>
+					</span>
+				</div>
 
-			<slot name="footer"/>
+				<slot name="footer"/>
+			</div>
 		</div>
 	</div>
 </template>

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/components/MiniBannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_11/components/MiniBannerVar.vue
@@ -1,21 +1,20 @@
 <template>
 	<div class="wmde-banner-mini">
-		<div class="wmde-banner-mini-close">
-			<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+		<div class="wmde-banner-mini-info">
+			<button class="wmde-banner-mini-close t-close-main-banner" @click.prevent="$emit( 'close' )">
 				<CloseIconMobile/>
 			</button>
-		</div>
 
-		<header class="wmde-banner-mini-headline">
-			<div class="wmde-banner-mini-headline-background">
-				<span class="wmde-banner-mini-headline-content">Wikipedia ist unverkäuflich</span>
-			</div>
-		</header>
+			<header class="wmde-banner-mini-headline">
+				<div class="wmde-banner-mini-headline-background">
+					<span class="wmde-banner-mini-headline-content">Wikipedia ist unverkäuflich</span>
+				</div>
+			</header>
 
-		<div class="wmde-banner-mini-slideshow">
-			<slot name="banner-slides"/>
+			<div class="wmde-banner-mini-slideshow">
+				<slot name="banner-slides"/>
+			</div>
 		</div>
-
 		<div class="wmde-banner-mini-button-group">
 			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
 				Jetzt 10 &euro; spenden

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/styles/FullPageBannerVar.scss b/banners/mobile/C24_WMDE_Mobile_DE_11/styles/FullPageBannerVar.scss
@@ -3,7 +3,6 @@
 
 .wmde-banner {
 	&-full {
-		border: 2px solid var( --full-border );
 		background: var( --full-background );
 		position: fixed;
 		top: 0;
@@ -15,6 +14,7 @@
 			overflow-y: auto;
 			height: 100%;
 			width: 100%;
+			padding: 10px;
 		}
 
 		p {
@@ -23,37 +23,53 @@
 
 		&-close {
 			position: absolute;
-			top: 16px;
-			right: 16px;
-			height: 35px;
-			width: 35px;
-			padding: 5px;
-			background: var( --full-background );
+			top: 0;
+			right: 0;
+			height: 36px;
+			width: 36px;
+			padding: 5px 3px 5px 7px;
+			background: transparent;
 			z-index: 99;
 			border: none;
-			border-radius: 50%;
 
-			&:hover {
-				cursor: pointer;
+			svg {
+				height: 15px;
+				width: 15px;
+				background: var( --full-close-background );
+				border-radius: 16px;
+				box-sizing: content-box;
+				border: solid 5px var( --full-close-background );
 			}
 
-			.close-button {
-				text-decoration: underline;
+			&:hover {
+				cursor: pointer;
 			}
 		}
 
 		&-info {
 			padding: 16px;
+			background: var( --full-info-background );
+			border-radius: 16px;
+			color: var( --info-color );
+		}
+
+		&-content-below-info {
+			background: var( --full-content-below-info-background );
+			border-radius: 16px;
 		}
 
 		&-call-to-action {
 			position: relative;
 			color: var( --full-cta-color );
 			background: var( --full-cta-background );
 			font-weight: bold;
-			height: 31px;
-			line-height: 31px;
+			font-size: 14px;
+			height: 25px;
+			line-height: 25px;
 			text-align: center;
+			border-radius: 16px;
+			margin-bottom: 10px;
+			margin-top: 10px;
 
 			&-optional-text {
 				display: none;

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/styles/MiniBannerVar.scss b/banners/mobile/C24_WMDE_Mobile_DE_11/styles/MiniBannerVar.scss
@@ -7,47 +7,50 @@ $height: 288px !default;
 		display: flex;
 		flex-direction: column;
 		min-height: $height;
-		padding: 16px 0;
+		padding-bottom: 16px;
 		position: relative;
 		border: 2px solid var( --mini-border );
 		background: var( --mini-background );
+		color: var( --info-color );
+
+		&-info {
+			background: var( --mini-info-background );
+			border-radius: 16px;
+			margin-right: 10px;
+			margin-left: 10px;
+			margin-bottom: 10px;
+			margin-top: 10px;
+		}
 
 		&-close {
 			position: absolute;
+			top: 0;
+			right: 0;
 			height: 36px;
 			width: 36px;
-			top: 11px;
-			right: 16px;
-			text-align: center;
-			background: var( --mini-close-background );
-			padding: 10px;
-			z-index: 2;
-
-			&-button {
-				border: none;
-				margin-top: auto;
-				float: right;
-				height: 16px;
-				line-height: 16px;
-				width: 16px;
-				background: var( --mini-close-background );
-				z-index: 2;
+			padding: 5px 3px 5px 7px;
+			background: transparent;
+			z-index: 99;
+			border: none;
 
-				svg {
-					height: 16px;
-					width: 16px;
-				}
+			svg {
+				height: 15px;
+				width: 15px;
+				background: var( --mini-close-background );
+				border-radius: 16px;
+				box-sizing: content-box;
+				border: solid 5px var( --mini-close-background );
+			}
 
-				&:hover {
-					cursor: pointer;
-				}
+			&:hover {
+				cursor: pointer;
 			}
 		}
 
 		&-headline {
 			height: 25px;
 			text-align: center;
-			margin: 0 16px 16px;
+			margin: 16px;
 
 			&-background {
 				position: relative;
@@ -76,7 +79,6 @@ $height: 288px !default;
 				font-weight: bold;
 				font-size: 14px;
 				line-height: 25px;
-				color: var( --mini-headline-color );
 				background: var( --mini-headline-background );
 				padding: 0 5px;
 				z-index: 2;

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_11/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_11/styles/styles_var.scss
@@ -1,4 +1,4 @@
-@use 'src/themes/Mikings/swatches/skin_default' with (
+@use 'src/themes/Modo/swatches/skin_default' with (
 	$upgrade-to-yearly-button-form: true,
 	$progress-bar: true,
 	$soft-close: true,
@@ -7,23 +7,24 @@
 @use 'src/components/BannerConductor/banner-transition';
 @use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
 @use 'src/themes/UseOfFunds/UseOfFunds';
-@use 'src/themes/Mikings/defaults';
+@use 'src/themes/Modo/defaults';
 @use './Banner';
 @use './MiniBannerVar' with (
 	$height: 306px
 );
 @use './FullPageBannerVar';
-@use 'src/themes/Mikings/Footer/Footer';
-@use 'src/themes/Mikings/ThankYouBox/ThankYouBox';
-@use 'src/themes/Mikings/Footer/SelectionInput';
-@use 'src/themes/Mikings/DonationForm/MultiStepDonation';
-@use 'src/themes/Mikings/DonationForm/Forms/UpgradeToYearlyButtonForm';
-@use 'src/themes/Mikings/DonationForm/SubComponents/SelectGroup';
-@use 'src/themes/Mikings/DonationForm/SubComponents/SelectCustomAmount';
-@use 'src/themes/Mikings/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Mikings/Slider/Slider' with (
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider' with (
 	$pagination-padding: 10px,
 	$pagination-height: 40px
 );
-@use 'src/themes/Mikings/SoftClose/SoftClose';
-@use 'src/themes/Mikings/ProgressBar/ProgressBar';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/ProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/src/components/SoftClose/SoftClose.vue b/src/components/SoftClose/SoftClose.vue
@@ -37,8 +37,9 @@
 
 			</div>
 
-			<ButtonClose v-if="showCloseIcon" @close="onCloseClick"/>
-
+			<slot name="close-button">
+				<ButtonClose v-if="showCloseIcon" @close="onCloseClick"/>
+			</slot>
 		</div>
 	</div>
 

diff --git a/src/themes/Modo/DonationForm/MultiStepDonation.scss b/src/themes/Modo/DonationForm/MultiStepDonation.scss
@@ -19,14 +19,16 @@
 			height: 18px;
 			line-height: 18px;
 			margin-bottom: 8px;
+			font-weight: bold;
 		}
 
 		&-button {
 			height: 60px;
 			line-height: 60px;
 			border-radius: 30px;
 			font-weight: bold;
-			color: var( --donation-form-button-color );
+			font-size: 18px;
+			color: black;
 			background: var( --donation-form-button-background );
 
 			&:hover,

diff --git a/src/themes/Modo/DonationForm/SubComponents/SelectGroup.scss b/src/themes/Modo/DonationForm/SubComponents/SelectGroup.scss
@@ -29,7 +29,7 @@
 			display: block;
 			width: 100%;
 			border: 1px solid var( --select-group-option-border );
-			border-radius: 2px;
+			border-radius: 3px;
 			background: var( --select-group-option-background );
 			height: select_group.$form-radio-height;
 			font-size: 12px;