Create new scroll target for top of payment section

- this will prevent content from getting overlapped by the navigation bar https://phabricator.wikimedia.org/T368525
wmde · Sep 19, 2024 · cd446b6 · cd446b6
1 parent d8ab241
commit cd446b6
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue b/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue
@@ -1,4 +1,5 @@
 <template>
+	<ScrollTarget target-id="payment-section-top-scroll-target"/>
 	<div
 		id="donation-page-form-section-payment"
 		class="donation-page-form-section"
@@ -22,6 +23,7 @@
 
 <script setup lang="ts">
 import Payment from '@src/components/pages/donation_form/Payment.vue';
+import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 
 interface Props {
 	paymentAmounts: number[];

diff --git a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue
@@ -137,7 +137,7 @@ const setFullSelected = ( selected: boolean ) => {
 };
 
 const scrollToPaymentSection = () => {
-	const scrollIntoViewElement = document.getElementById( 'donation-page-form-section-payment' );
+	const scrollIntoViewElement = document.getElementById( 'payment-section-top-scroll-target' );
 	if ( scrollIntoViewElement ) {
 		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
 	}

diff --git a/...ponents/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue b/...ponents/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue
@@ -200,7 +200,7 @@ const mailingList = useMailingListModel( store );
 const { receiptNeeded, showReceiptOptionError } = useReceiptModel( store );
 const countryWasRestored = ref<boolean>( false );
 const scrollToPaymentSection = () => {
-	const scrollIntoViewElement = document.getElementById( 'donation-page-form-section-payment' );
+	const scrollIntoViewElement = document.getElementById( 'payment-section-top-scroll-target' );
 	if ( scrollIntoViewElement ) {
 		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
 	}