Merge pull request #6740 from guardian/ahe/fix-tramlines

Make tramlines reach the footer on tall screens
guardian · Jan 28, 2025 · deef8b4 · deef8b4
2 parents afc9ab8 + 7d635c0
commit deef8b4
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 75 deletions.
diff --git a/support-frontend/assets/pages/[countryGroupId]/components/checkoutLayout.tsx b/support-frontend/assets/pages/[countryGroupId]/components/checkoutLayout.tsx
@@ -25,6 +25,7 @@ const secureTransactionIndicator = css`
 `;
 
 const darkBackgroundContainerMobile = css`
+	display: flex;
 	background-color: ${palette.neutral[97]};
 	${until.tablet} {
 		background-color: ${palette.brand[400]};

diff --git a/...rt-frontend/assets/pages/supporter-plus-landing/twoStepPages/contributionsOnlyLanding.tsx b/...rt-frontend/assets/pages/supporter-plus-landing/twoStepPages/contributionsOnlyLanding.tsx
@@ -24,6 +24,7 @@ import { getGeoIdConfig } from 'pages/geoIdConfig';
 import { AmountsCard } from '../components/amountsCard';
 
 const recurringContainer = css`
+	display: flex;
 	background-color: ${palette.brand[400]};
 	border-bottom: 1px solid ${palette.brand[600]};
 	> div {
@@ -178,9 +179,16 @@ export function ContributionsOnlyLanding({
 		<PageScaffold
 			header={<Header></Header>}
 			footer={
-				<FooterWithContents>
-					<FooterLinks links={links}></FooterLinks>
-				</FooterWithContents>
+				<>
+					<Container
+						sideBorders
+						borderColor={palette.brand[600]}
+						cssOverrides={disclaimerContainer}
+					></Container>
+					<FooterWithContents>
+						<FooterLinks links={links}></FooterLinks>
+					</FooterWithContents>
+				</>
 			}
 		>
 			<Container
@@ -215,11 +223,6 @@ export function ContributionsOnlyLanding({
 					/>
 				</div>
 			</Container>
-			<Container
-				sideBorders
-				borderColor={palette.brand[600]}
-				cssOverrides={disclaimerContainer}
-			></Container>
 		</PageScaffold>
 	);
 }
diff --git a/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx b/support-frontend/assets/pages/supporter-plus-landing/twoStepPages/threeTierLanding.tsx
@@ -536,9 +536,75 @@ export function ThreeTierLanding({
 				</>
 			}
 			footer={
-				<FooterWithContents>
-					<FooterLinks links={links}></FooterLinks>
-				</FooterWithContents>
+				<>
+					{countryGroupId === UnitedStates && (
+						<Container
+							sideBorders
+							borderColor="rgba(170, 170, 180, 0.5)"
+							cssOverrides={supportAnotherWayContainer}
+						>
+							<div css={supportAnotherWay}>
+								<h4>Support another way</h4>
+								<p>
+									If you are interested in contributing through a donor-advised
+									fund, foundation or retirement account, or by mailing a check,{' '}
+									<br />
+									please visit our{' '}
+									<a href="https://manage.theguardian.com/help-centre/article/contribute-another-way?INTCMP=gdnwb_copts_support_contributions_referral">
+										help page
+									</a>{' '}
+									to learn how.
+								</p>
+							</div>
+						</Container>
+					)}
+					<Container
+						sideBorders
+						borderColor="rgba(170, 170, 180, 0.5)"
+						cssOverrides={disclaimerContainer}
+					>
+						<ThreeTierTsAndCs
+							tsAndCsContent={[
+								{
+									title: tier1Card.productDescription.label,
+									planCost: getPlanCost(tier1Card.price, contributionType),
+								},
+								{
+									title: tier2Card.productDescription.label,
+									planCost: getPlanCost(
+										tier2Card.price,
+										contributionType,
+										promotionTier2,
+									),
+									starts: promotionTier2?.starts
+										? new Date(promotionTier2.starts)
+										: undefined,
+									expires: promotionTier2?.expires
+										? new Date(promotionTier2.expires)
+										: undefined,
+								},
+								{
+									title: tier3Card.productDescription.label,
+									planCost: getPlanCost(
+										tier3Card.price,
+										contributionType,
+										promotionTier3,
+									),
+									starts: promotionTier3?.starts
+										? new Date(promotionTier3.starts)
+										: undefined,
+									expires: promotionTier3?.expires
+										? new Date(promotionTier3.expires)
+										: undefined,
+								},
+							]}
+							currency={currencies[currencyId].glyph}
+						></ThreeTierTsAndCs>
+					</Container>
+					<FooterWithContents>
+						<FooterLinks links={links}></FooterLinks>
+					</FooterWithContents>
+				</>
 			}
 		>
 			<Container
@@ -632,70 +698,6 @@ export function ThreeTierLanding({
 					/>
 				</Container>
 			)}
-			{countryGroupId === UnitedStates && (
-				<Container
-					sideBorders
-					borderColor="rgba(170, 170, 180, 0.5)"
-					cssOverrides={supportAnotherWayContainer}
-				>
-					<div css={supportAnotherWay}>
-						<h4>Support another way</h4>
-						<p>
-							If you are interested in contributing through a donor-advised
-							fund, foundation or retirement account, or by mailing a check,{' '}
-							<br />
-							please visit our{' '}
-							<a href="https://manage.theguardian.com/help-centre/article/contribute-another-way?INTCMP=gdnwb_copts_support_contributions_referral">
-								help page
-							</a>{' '}
-							to learn how.
-						</p>
-					</div>
-				</Container>
-			)}
-			<Container
-				sideBorders
-				borderColor="rgba(170, 170, 180, 0.5)"
-				cssOverrides={disclaimerContainer}
-			>
-				<ThreeTierTsAndCs
-					tsAndCsContent={[
-						{
-							title: tier1Card.productDescription.label,
-							planCost: getPlanCost(tier1Card.price, contributionType),
-						},
-						{
-							title: tier2Card.productDescription.label,
-							planCost: getPlanCost(
-								tier2Card.price,
-								contributionType,
-								promotionTier2,
-							),
-							starts: promotionTier2?.starts
-								? new Date(promotionTier2.starts)
-								: undefined,
-							expires: promotionTier2?.expires
-								? new Date(promotionTier2.expires)
-								: undefined,
-						},
-						{
-							title: tier3Card.productDescription.label,
-							planCost: getPlanCost(
-								tier3Card.price,
-								contributionType,
-								promotionTier3,
-							),
-							starts: promotionTier3?.starts
-								? new Date(promotionTier3.starts)
-								: undefined,
-							expires: promotionTier3?.expires
-								? new Date(promotionTier3.expires)
-								: undefined,
-						},
-					]}
-					currency={currencies[currencyId].glyph}
-				></ThreeTierTsAndCs>
-			</Container>
 		</PageScaffold>
 	);
 }