Skip to content

Commit b2979e5

Browse files
cemms1cemms1
authored
Add bottom padding to fronts ads (#13612)
1 parent b405f4f commit b2979e5

File tree

1 file changed

+36
-35
lines changed

1 file changed

+36
-35
lines changed

‎dotcom-rendering/src/components/AdSlot.web.tsx

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, type Interpolation } from '@emotion/react';
22
import type { SlotName } from '@guardian/commercial';
3-
import { adSizes, constants } from '@guardian/commercial';
3+
import { adSizes } from '@guardian/commercial';
44
import {
55
between,
66
breakpoints,
@@ -92,6 +92,10 @@ type Props = DefaultProps &
9292

9393
const halfPageAdHeight = adSizes.halfPage.height;
9494

95+
/** Calculates the minimum height for an ad slot. Used to avoid CLS */
96+
const getMinHeight = (adHeight: number, padding?: number): number =>
97+
adHeight + labelHeight + (padding ?? 0);
98+
9599
const outOfPageStyles = css`
96100
height: 0;
97101
`;
@@ -111,7 +115,7 @@ const topAboveNavContainerStyles = css`
111115
* render first, we need to reserve space for the ad to avoid CLS.
112116
*/
113117
const showcaseRightColumnContainerStyles = css`
114-
min-height: ${halfPageAdHeight + labelHeight}px;
118+
min-height: ${getMinHeight(halfPageAdHeight)}px;
115119
`;
116120

117121
const showcaseRightColumnStyles = css`
@@ -131,16 +135,18 @@ const merchandisingAdContainerStyles = css`
131135

132136
const merchandisingAdStyles = css`
133137
position: relative;
134-
min-height: ${adSizes.billboard.height + labelHeight}px;
135-
margin: 12px auto;
138+
min-height: ${getMinHeight(adSizes.billboard.height, space[3])}px;
139+
margin: ${space[3]}px auto;
136140
max-width: ${breakpoints['wide']}px;
137141
overflow: hidden;
142+
padding-bottom: ${space[3]}px;
138143
139144
${from.desktop} {
140145
margin: 0;
141-
padding-bottom: 20px;
142-
min-height: ${adSizes.billboard.height + labelHeight + 20}px;
146+
padding-bottom: ${space[5]}px;
147+
min-height: ${getMinHeight(adSizes.billboard.height, space[5])}px;
143148
}
149+
144150
&:not(.ad-slot--fluid).ad-slot--rendered {
145151
${between.phablet.and.desktop} {
146152
display: none;
@@ -171,7 +177,7 @@ const liveblogInlineContainerStyles = css`
171177

172178
const liveblogInlineAdStyles = css`
173179
position: relative;
174-
min-height: ${adSizes.mpu.height + labelHeight}px;
180+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
175181
background-color: ${schemedPalette('--ad-background-article-inner')};
176182
177183
${until.tablet} {
@@ -181,7 +187,7 @@ const liveblogInlineAdStyles = css`
181187

182188
const liveblogInlineMobileAdStyles = css`
183189
position: relative;
184-
min-height: ${adSizes.outstreamMobile.height + labelHeight}px;
190+
min-height: ${getMinHeight(adSizes.outstreamMobile.height)}px;
185191
186192
${from.tablet} {
187193
display: none;
@@ -190,32 +196,27 @@ const liveblogInlineMobileAdStyles = css`
190196

191197
const mobileFrontAdStyles = css`
192198
position: relative;
193-
min-height: ${adSizes.mpu.height + labelHeight}px;
199+
min-height: ${getMinHeight(adSizes.mpu.height, space[3])}px;
194200
min-width: 300px;
195201
width: 300px;
196-
margin: 12px auto;
202+
margin: ${space[3]}px auto;
203+
padding-bottom: ${space[3]}px;
197204
198205
${from.tablet} {
199206
display: none;
200207
}
201208
`;
202209

203-
const frontsBannerPaddingHeight = 20;
204-
const frontsBannerMinHeightTablet =
205-
adSizes.leaderboard.height + labelHeight + frontsBannerPaddingHeight;
206-
const frontsBannerMinHeight =
207-
adSizes.billboard.height + labelHeight + frontsBannerPaddingHeight;
208-
209210
const frontsBannerAdTopContainerStyles = css`
210211
display: none;
211212
${from.tablet} {
212213
display: flex;
213214
justify-content: center;
214-
min-height: ${frontsBannerMinHeightTablet}px;
215+
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
215216
background-color: ${schemedPalette('--ad-background')};
216217
}
217218
${from.desktop} {
218-
min-height: ${frontsBannerMinHeight}px;
219+
min-height: ${getMinHeight(adSizes.billboard.height, space[6])}px;
219220
}
220221
`;
221222

@@ -240,11 +241,11 @@ const frontsBannerCollapseStyles = css`
240241

241242
const frontsBannerAdStyles = css`
242243
position: relative;
243-
min-height: ${frontsBannerMinHeightTablet}px;
244+
min-height: ${getMinHeight(adSizes.leaderboard.height, space[6])}px;
244245
max-width: ${adSizes.leaderboard.width}px;
245-
max-height: ${adSizes.leaderboard.height + labelHeight}px;
246246
overflow: hidden;
247-
padding-bottom: ${frontsBannerPaddingHeight}px;
247+
padding-bottom: ${space[6]}px;
248+
248249
${from.desktop} {
249250
/* No banner should be taller than 600px */
250251
max-height: ${600 + labelHeight}px;
@@ -254,7 +255,7 @@ const frontsBannerAdStyles = css`
254255

255256
const articleEndAdStyles = css`
256257
position: relative;
257-
min-height: ${adSizes.outstreamDesktop.height + labelHeight}px;
258+
min-height: ${getMinHeight(adSizes.outstreamDesktop.height)}px;
258259
259260
&.ad-slot--fluid {
260261
min-height: 450px;
@@ -263,7 +264,7 @@ const articleEndAdStyles = css`
263264

264265
const mostPopAdStyles = css`
265266
position: relative;
266-
min-height: ${adSizes.mpu.height + labelHeight}px;
267+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
267268
min-width: ${adSizes.mpu.width}px;
268269
max-width: ${adSizes.mpu.width}px;
269270
text-align: center;
@@ -277,7 +278,7 @@ const mostPopAdStyles = css`
277278
`;
278279

279280
const mostPopContainerStyles = css`
280-
min-height: ${adSizes.mpu.height + labelHeight}px;
281+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
281282
min-width: ${adSizes.mpu.width}px;
282283
width: fit-content;
283284
max-width: ${adSizes.mpu.width}px;
@@ -291,7 +292,7 @@ const mostPopContainerStyles = css`
291292
`;
292293

293294
const liveBlogTopAdStyles = css`
294-
min-height: ${adSizes.mpu.height + labelHeight}px;
295+
min-height: ${getMinHeight(adSizes.mpu.height)}px;
295296
min-width: ${adSizes.mpu.width}px;
296297
width: fit-content;
297298
max-width: ${adSizes.mpu.width}px;
@@ -379,7 +380,7 @@ const mobileStickyAdStylesFullWidth = css`
379380
`;
380381

381382
const crosswordBannerMobileAdStyles = css`
382-
min-height: ${adSizes.mobilesticky.height + constants.AD_LABEL_HEIGHT}px;
383+
min-height: ${getMinHeight(adSizes.mobilesticky.height)}px;
383384
`;
384385

385386
const AdSlotWrapper = ({
@@ -583,7 +584,7 @@ export const AdSlot = ({
583584
}
584585
case 'top-above-nav': {
585586
return (
586-
<AdSlotWrapper css={[topAboveNavContainerStyles]}>
587+
<AdSlotWrapper css={topAboveNavContainerStyles}>
587588
<div
588589
id="dfp-ad--top-above-nav"
589590
className={[
@@ -626,15 +627,15 @@ export const AdSlot = ({
626627
}
627628
case 'merchandising-high': {
628629
return (
629-
<AdSlotWrapper css={[merchandisingAdContainerStyles]}>
630+
<AdSlotWrapper css={merchandisingAdContainerStyles}>
630631
<div
631632
id="dfp-ad--merchandising-high"
632633
className={[
633634
'js-ad-slot',
634635
'ad-slot',
635636
'ad-slot--merchandising-high',
636637
].join(' ')}
637-
css={[merchandisingAdStyles]}
638+
css={merchandisingAdStyles}
638639
data-link-name="ad slot merchandising-high"
639640
data-name="merchandising-high"
640641
data-refresh="false"
@@ -654,7 +655,7 @@ export const AdSlot = ({
654655
'ad-slot',
655656
'ad-slot--merchandising',
656657
].join(' ')}
657-
css={[merchandisingAdStyles]}
658+
css={merchandisingAdStyles}
658659
data-link-name="ad slot merchandising"
659660
data-name="merchandising"
660661
data-testid="slot"
@@ -685,7 +686,7 @@ export const AdSlot = ({
685686
'ad-slot--rendered',
686687
hasPageskin && 'ad-slot--collapse',
687688
].join(' ')}
688-
css={[frontsBannerAdStyles]}
689+
css={frontsBannerAdStyles}
689690
data-link-name={`ad slot ${advertId}`}
690691
data-name={`${advertId}`}
691692
data-testid="slot"
@@ -773,7 +774,7 @@ export const AdSlot = ({
773774
'ad-slot--liveblog-top',
774775
'ad-slot--rendered',
775776
].join(' ')}
776-
css={[liveBlogTopAdStyles]}
777+
css={liveBlogTopAdStyles}
777778
data-link-name="ad slot liveblog-top"
778779
data-name="liveblog-top"
779780
data-testid="slot"
@@ -797,7 +798,7 @@ export const AdSlot = ({
797798
'mobile-only',
798799
'ad-slot--rendered',
799800
].join(' ')}
800-
css={[mobileFrontAdStyles]}
801+
css={mobileFrontAdStyles}
801802
data-link-name={`ad slot ${advertId}`}
802803
data-name={advertId}
803804
data-testid="slot"
@@ -841,7 +842,7 @@ export const AdSlot = ({
841842
'ad-slot--article-end',
842843
'ad-slot--rendered',
843844
].join(' ')}
844-
css={[articleEndAdStyles]}
845+
css={articleEndAdStyles}
845846
data-link-name="ad slot article-end"
846847
data-name="article-end"
847848
data-testid="slot"
@@ -861,7 +862,7 @@ export const AdSlot = ({
861862
'ad-slot--crossword-banner-mobile',
862863
'ad-slot--rendered',
863864
].join(' ')}
864-
css={[crosswordBannerMobileAdStyles]}
865+
css={crosswordBannerMobileAdStyles}
865866
data-link-name="ad slot crossword-banner-mobile"
866867
data-name="crossword-banner-mobile"
867868
data-testid="slot"

0 commit comments

Comments
 (0)