From 0df52c61620b1af1d3f580b0f3210f38bd1554e4 Mon Sep 17 00:00:00 2001 From: Abban Dunne Date: Tue, 26 Nov 2024 08:05:02 +0100 Subject: [PATCH] Fix bugs in C24_WMDE_Desktop_EN_05 - UoF infographic was missing an arrow - Add payment types to VAR submit button - Fix font size on upgrade form - Fix currency symbol placement in custom amount - Fix fallback close button size Ticket: https://phabricator.wikimedia.org/T380360 --- .../components/BannerVar.vue | 5 + .../styles/FallbackBanner.scss | 2 + .../C24_WMDE_Desktop_EN_05/styles/styles.scss | 5 +- .../styles/styles_var.scss | 5 +- package-lock.json | 14 +- .../Infographics/WMDEFundsForwardingEN.vue | 551 +----------------- .../SelectCustomAmountRadioBubble.scss | 11 + 7 files changed, 33 insertions(+), 560 deletions(-) diff --git a/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue index 78ff6fc5a..5839414d9 100644 --- a/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue +++ b/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue @@ -39,6 +39,10 @@ + + @@ -108,6 +112,7 @@ import SoftClose from '@src/components/SoftClose/SoftClose.vue'; import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue'; import { useBannerHider } from '@src/components/composables/useBannerHider'; import MainDonationFormAddressType from '@src/components/DonationForm/Forms/MainDonationFormDonationReceipt.vue'; +import MainDonationFormPaymentMethodLabeledButton from '@src/components/DonationForm/Forms/MainDonationFormPaymentMethodLabeledButton.vue'; enum ContentStates { Main = 'wmde-banner-wrapper--main', diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss index dbc72eb30..2361a26cf 100644 --- a/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss +++ b/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss @@ -88,6 +88,8 @@ $breakpoint: 800px; width: 16px; top: 8px; right: 8px; + margin: 0; + padding: 0; @media ( min-width: $breakpoint ) { height: 30px; diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss index fba213019..1e0e5a7f3 100644 --- a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss +++ b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss @@ -43,8 +43,9 @@ @use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with ( $padding: 14px 0 0 ); -@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm'; -@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with ( + $font-size: 14px +); @use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with ( $right-column-width: 300px ); diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss index 5b30b5ab3..7a126e0a0 100644 --- a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss +++ b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss @@ -43,8 +43,9 @@ @use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with ( $padding: 14px 0 0 ); -@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm'; -@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with ( + $font-size: 14px +); @use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with ( $right-column-width: 300px ); diff --git a/package-lock.json b/package-lock.json index 6f0bbfaba..3d5f71755 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4499,9 +4499,9 @@ "license": "MIT" }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, "license": "MIT", "dependencies": { @@ -6637,7 +6637,7 @@ }, "node_modules/fundraising-frontend-content": { "version": "1.0.0", - "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#a15a417b75aba9b485df180e537047b4b47f065a", + "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#23c5bb8aa1130d6d1a8ca95ce939e95e8751a5d2", "license": "CC0-1.0" }, "node_modules/get-intrinsic": { @@ -8920,9 +8920,9 @@ "license": "MIT" }, "node_modules/npm-run-all/node_modules/cross-spawn": { - "version": "6.0.5", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "version": "6.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz", + "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue b/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue index 2649f47bc..ffe5d9741 100644 --- a/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue +++ b/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue @@ -1,551 +1,4 @@ - - diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss index 68dd716bc..a7604bd17 100644 --- a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss +++ b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss @@ -71,3 +71,14 @@ $font-size: 0.9em !default; } } } + +html[ lang='en' ] .wmde-banner { + .wmde-banner-select-custom-amount-euro-symbol { + right: auto; + left: 20px; + } + + .wmde-banner-select-custom-amount-input { + padding: 0 10px 0 30px; + } +}