Skip to content

Commit 0b40b07

Browse files
cemms1marjisounddeedeehJamieB-gu
authored
Enable sticky ads in football data pages (#13558)
* rearrange grid for football data pages to allow ad to take up entire right column * allow ads to grow beyond the third row if particularly long * define a centre guardian grid to use for matches list section * moved the left and centre grid container from the grid module to footballMatchesList component The centre grid is an edge case that's specific just for the football pages so it doesn't need to be in the grid API. --------- Co-authored-by: Marjan Kalanaki <[email protected]> Co-authored-by: Dina Hafez <[email protected]> Co-authored-by: Jamie B <[email protected]>
1 parent e58d335 commit 0b40b07

File tree

3 files changed

+121
-80
lines changed

3 files changed

+121
-80
lines changed

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
until,
1111
} from '@guardian/source/foundations';
1212
import { Hide } from '@guardian/source/react-components';
13-
import { grid } from '../grid';
1413
import { labelBoxStyles, labelHeight, labelStyles } from '../lib/adStyles';
1514
import { ArticleDisplay } from '../lib/articleFormat';
1615
import { getZIndex } from '../lib/getZIndex';
@@ -512,11 +511,8 @@ export const AdSlot = ({
512511
className="ad-slot-container"
513512
css={[
514513
css`
515-
position: relative;
516514
height: 100%;
517515
max-height: 100%;
518-
${grid.column.right}
519-
grid-row: 1;
520516
padding-top: ${space[2]}px;
521517
${until.desktop} {
522518
display: none;
@@ -539,7 +535,8 @@ export const AdSlot = ({
539535
css={[
540536
rightAdStyles,
541537
css`
542-
position: absolute;
538+
position: sticky;
539+
top: 0;
543540
`,
544541
labelStyles,
545542
]}

‎dotcom-rendering/src/components/FootballMatchList.tsx

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import type {
1919
FootballMatches,
2020
FootballMatchKind,
2121
} from '../footballMatches';
22-
import { grid } from '../grid';
2322
import {
2423
type EditionId,
2524
getLocaleFromEdition,
@@ -41,6 +40,37 @@ const removeTrailingDots = (str: string): string => {
4140
return str.replace(REMOVE_TRAILING_DOTS_REGEX, '');
4241
};
4342

43+
const footballMatchesGridStyles = css`
44+
display: grid;
45+
grid-template-columns: [centre-column-start] repeat(4, 1fr) [centre-column-end];
46+
column-gap: 10px;
47+
${from.mobileLandscape} {
48+
column-gap: 20px;
49+
}
50+
51+
${from.tablet} {
52+
grid-template-columns: [centre-column-start] repeat(12, 40px) [centre-column-end];
53+
}
54+
55+
${from.desktop} {
56+
grid-template-columns: [centre-column-start] repeat(8, 60px) [centre-column-end];
57+
}
58+
59+
${from.leftCol} {
60+
grid-template-columns:
61+
[left-column-start] repeat(2, 60px)
62+
[left-column-end centre-column-start] repeat(8, 60px)
63+
[centre-column-end];
64+
}
65+
66+
${from.wide} {
67+
grid-template-columns:
68+
[left-column-start] repeat(3, 60px)
69+
[left-column-end centre-column-start] repeat(8, 60px)
70+
[centre-column-end];
71+
}
72+
`;
73+
4474
const getDateFormatter = (edition: EditionId): Intl.DateTimeFormat =>
4575
new Intl.DateTimeFormat('en-GB', {
4676
weekday: 'long',
@@ -63,13 +93,13 @@ const Day = (props: { children: ReactNode }) => (
6393
<h2
6494
css={css`
6595
${textSansBold14}
66-
${grid.column.centre}
96+
grid-column: centre-column-start / centre-column-end;
6797
border-top: 1px solid ${palette('--football-match-list-border')};
6898
padding-top: ${space[2]}px;
6999
70100
${from.leftCol} {
71101
padding-bottom: ${space[6]}px;
72-
${grid.between('left-column-start', 'centre-column-end')}
102+
grid-column: left-column-start / centre-column-end;
73103
}
74104
`}
75105
>
@@ -81,7 +111,7 @@ const CompetitionName = (props: { children: ReactNode }) => (
81111
<h3
82112
css={css`
83113
${textSansBold14}
84-
${grid.column.centre}
114+
grid-column: centre-column-start / centre-column-end;
85115
color: ${palette('--football-match-list-competition-text')};
86116
border-top: 1px solid ${palette('--football-match-list-top-border')};
87117
padding: ${space[2]}px;
@@ -93,7 +123,7 @@ const CompetitionName = (props: { children: ReactNode }) => (
93123
background-color: transparent;
94124
margin-top: 0;
95125
padding: ${space[1]}px 0 0;
96-
${grid.column.left}
126+
grid-column: left-column-start / left-column-end;
97127
${headlineBold17}
98128
}
99129
`}
@@ -106,7 +136,7 @@ const Matches = (props: { children: ReactNode }) => (
106136
<ul
107137
{...props}
108138
css={css`
109-
${grid.column.centre}
139+
grid-column: centre-column-start / centre-column-end;
110140
111141
${from.leftCol} {
112142
padding-bottom: ${space[9]}px;
@@ -369,25 +399,7 @@ export const FootballMatchList = ({
369399
<>
370400
{days.map((day) => (
371401
<section
372-
css={css`
373-
${grid.paddedContainer}
374-
position: relative;
375-
${from.tablet} {
376-
&::before,
377-
&::after {
378-
content: '';
379-
position: absolute;
380-
border-left: 1px solid
381-
${palette('--article-border')};
382-
top: 0;
383-
bottom: 0;
384-
}
385-
386-
&::after {
387-
right: 0;
388-
}
389-
}
390-
`}
402+
css={footballMatchesGridStyles}
391403
key={day.dateISOString}
392404
>
393405
<Day>
@@ -425,10 +437,11 @@ export const FootballMatchList = ({
425437
))}
426438

427439
{getMoreDays === undefined ? null : (
428-
<div css={css(grid.paddedContainer)}>
440+
<div css={footballMatchesGridStyles}>
429441
<div
430442
css={css`
431-
${grid.column.centre}
443+
grid-column: centre-column-start / centre-column-end;
444+
432445
padding-top: ${space[10]}px;
433446
`}
434447
>

‎dotcom-rendering/src/components/FootballMatchesPage.tsx

Lines changed: 79 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { css } from '@emotion/react';
2-
import { from, headlineBold20, space } from '@guardian/source/foundations';
2+
import {
3+
from,
4+
headlineBold20,
5+
space,
6+
until,
7+
} from '@guardian/source/foundations';
38
import type {
49
FootballMatches,
510
FootballMatchKind,
@@ -51,63 +56,89 @@ export const FootballMatchesPage = ({
5156
renderAds,
5257
pageId,
5358
}: Props) => (
54-
<main id="maincontent" data-layout="FootballDataPageLayout">
59+
<main
60+
id="maincontent"
61+
data-layout="FootballDataPageLayout"
62+
css={css`
63+
${grid.paddedContainer}
64+
position: relative;
65+
${from.tablet} {
66+
&::before,
67+
&::after {
68+
content: '';
69+
position: absolute;
70+
border-left: 1px solid ${palette('--article-border')};
71+
top: 0;
72+
bottom: 0;
73+
}
74+
75+
&::after {
76+
right: 0;
77+
}
78+
}
79+
`}
80+
>
81+
<h1
82+
css={css`
83+
${headlineBold20}
84+
padding: ${space[2]}px 0 ${space[3]}px;
85+
${grid.column.centre}
86+
grid-row: 1;
87+
${from.leftCol} {
88+
${grid.between('left-column-start', 'centre-column-end')}
89+
}
90+
`}
91+
>
92+
{createTitle(kind, edition)}
93+
</h1>
94+
5595
<div
5696
css={css`
57-
${grid.paddedContainer}
58-
position: relative;
59-
${from.tablet} {
60-
&::before,
61-
&::after {
62-
content: '';
63-
position: absolute;
64-
border-left: 1px solid ${palette('--article-border')};
65-
top: 0;
66-
bottom: 0;
67-
}
97+
margin-top: ${space[3]}px;
98+
margin-bottom: ${space[6]}px;
99+
${grid.column.centre}
100+
grid-row: 2;
101+
`}
102+
>
103+
<FootballCompetitionSelect
104+
nations={nations}
105+
kind={kind}
106+
pageId={pageId}
107+
onChange={goToCompetitionSpecificPage}
108+
/>
109+
</div>
68110

69-
&::after {
70-
right: 0;
71-
}
111+
<div
112+
css={css`
113+
${grid.column.centre}
114+
grid-row: 3;
115+
${from.leftCol} {
116+
${grid.between('left-column-start', 'centre-column-end')}
72117
}
118+
position: relative;
73119
`}
74120
>
75-
<h1
76-
css={css`
77-
${headlineBold20}
78-
padding: ${space[2]}px 0 ${space[3]}px;
79-
${grid.column.centre}
80-
${from.leftCol} {
81-
${grid.between(
82-
'left-column-start',
83-
'centre-column-end',
84-
)}
85-
}
86-
`}
87-
>
88-
{createTitle(kind, edition)}
89-
</h1>
121+
<FootballMatchList
122+
initialDays={initialDays}
123+
edition={edition}
124+
getMoreDays={getMoreDays}
125+
guardianBaseUrl={guardianBaseUrl}
126+
/>
127+
</div>
128+
129+
{renderAds && (
90130
<div
91131
css={css`
92-
margin-top: ${space[3]}px;
93-
margin-bottom: ${space[6]}px;
94-
${grid.column.centre}
132+
${grid.column.right}
133+
/** This allows the ad to grow beyond the third row content (up to line 5) */
134+
grid-row: 1 / 5;
135+
${until.desktop} {
136+
display: none;
137+
}
95138
`}
96139
>
97-
<FootballCompetitionSelect
98-
nations={nations}
99-
kind={kind}
100-
pageId={pageId}
101-
onChange={goToCompetitionSpecificPage}
102-
/>
140+
<AdSlot position="right-football" />
103141
</div>
104-
{renderAds && <AdSlot position="right-football" />}
105-
</div>
106-
<FootballMatchList
107-
initialDays={initialDays}
108-
edition={edition}
109-
getMoreDays={getMoreDays}
110-
guardianBaseUrl={guardianBaseUrl}
111-
/>
142+
)}
112143
</main>
113144
);

0 commit comments

Comments
 (0)