Skip to content

Commit 6408ccc

Browse files
emma-imberemma-imber
authored
Merge branch 'main' into ei/add-comscorekw-comment
2 parents e23b6cb + 9c93cb4 commit 6408ccc

File tree

4 files changed

+123
-124
lines changed

4 files changed

+123
-124
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
);

‎dotcom-rendering/src/model/buildLightboxImages.ts

Lines changed: 2 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,6 @@ const THRESHOLD = 620;
2828
const isLightboxable = (width: number, height: number): boolean =>
2929
Math.max(width, height) > THRESHOLD;
3030

31-
/**
32-
* Older legacy images use a different url format so we need to use a different
33-
* approach when extracting the id of the image
34-
*/
35-
const decideImageId = ({
36-
masterUrl,
37-
}: Pick<ImageForLightbox, 'masterUrl'>): string | undefined => {
38-
const url = new URL(masterUrl);
39-
switch (url.hostname) {
40-
case 'media.guim.co.uk': {
41-
// E.g.
42-
// https://media.guim.co.uk/be634f340e477a975c7352f289c4353105ba9e67/288_121_3702_2221/140.jpg
43-
// This bit ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44-
return url.pathname.split('/').at(1);
45-
}
46-
case 'i.guim.co.uk':
47-
case 'uploads.guim.co.uk':
48-
case 'static-secure.guim.co.uk':
49-
case 'static.guim.co.uk':
50-
// E.g.
51-
// https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2015/5/26/1432666797165/59de49e2-553f-4b52-b7ac-09bda7f63e4b-220x132.jpeg
52-
// This bit ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
53-
return url.pathname.split('/').at(-1);
54-
default:
55-
return undefined;
56-
}
57-
};
58-
5931
const buildLightboxImage = (
6032
element: ImageBlockElement | CartoonBlockElement,
6133
): Omit<ImageForLightbox, 'position'> | undefined => {
@@ -144,8 +116,8 @@ export const buildLightboxImages = (
144116
format: FEFormat,
145117
blocks: Block[],
146118
mainMediaElements: FEElement[],
147-
): ImageForLightbox[] => {
148-
const lightboxImages = mainMediaElements
119+
): ImageForLightbox[] =>
120+
mainMediaElements
149121
.flatMap<Omit<ImageForLightbox, 'position'>>((element) => {
150122
if (!isImage(element) && !isCartoon(element)) return [];
151123
const lightboxImage = buildLightboxImage(element);
@@ -171,17 +143,3 @@ export const buildLightboxImages = (
171143
),
172144
)
173145
.map((image, index) => ({ ...image, position: index + 1 }));
174-
175-
// On gallery articles the main media is often repeated as an element in the article body so
176-
// we deduplicate the array here
177-
return [
178-
...new Map(
179-
lightboxImages.map<[string, ImageForLightbox]>((image, index) => [
180-
decideImageId(image) ?? `lightbox-image-id-${index}`,
181-
image,
182-
]),
183-
).values(),
184-
]
185-
.sort((a, b) => a.position - b.position)
186-
.map((image, index) => ({ ...image, position: index + 1 }));
187-
};

0 commit comments

Comments
 (0)