Skip to content

Commit 85fb152

Browse files
oliverabrahamsjamesmockett
oliverabrahams
and
jamesmockett
authored
Improve and clean up crossword layout (#13419)
* remove unneeded css * Simplify grid and only show right column from wide * Remove onward content carousels and most viewed --------- Co-authored-by: James Mockett <[email protected]>
1 parent f425a8b commit 85fb152

File tree

3 files changed

+44
-198
lines changed

3 files changed

+44
-198
lines changed

‎dotcom-rendering/src/components/CrosswordComponent.importable.tsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,7 @@ const Layout: CrosswordProps['Layout'] = ({
4646
display: flex;
4747
flex-direction: column;
4848
gap: ${space[4]}px;
49-
50-
${from.leftCol} {
49+
${from.phablet} {
5150
flex-direction: row;
5251
}
5352
`}
@@ -56,26 +55,26 @@ const Layout: CrosswordProps['Layout'] = ({
5655
<div
5756
css={css`
5857
flex-basis: ${gridWidth}px;
59-
60-
${from.leftCol} {
61-
position: sticky;
62-
top: ${space[4]}px;
63-
align-self: flex-start;
64-
}
6558
`}
6659
>
6760
<FocusedClue
6861
additionalCss={css`
69-
${from.leftCol} {
62+
max-width: ${gridWidth}px;
63+
${from.phablet} {
7064
display: none;
7165
}
7266
`}
7367
/>
7468
<Grid />
75-
<div data-print-layout="hide">
69+
<div
70+
data-print-layout="hide"
71+
css={css`
72+
max-width: ${gridWidth}px;
73+
`}
74+
>
7675
<FocusedClue
7776
additionalCss={css`
78-
${from.leftCol} {
77+
${from.phablet} {
7978
display: none;
8079
}
8180
`}
@@ -99,14 +98,12 @@ const Layout: CrosswordProps['Layout'] = ({
9998
flex-direction: column;
10099
gap: ${space[4]}px;
101100
align-items: flex-start;
102-
101+
${from.desktop} {
102+
flex-direction: row;
103+
}
103104
> * {
104105
flex: 1;
105106
}
106-
107-
${from.wide} {
108-
flex-direction: row;
109-
}
110107
`}
111108
>
112109
<Clues direction="across" Header={CluesHeader} />

‎dotcom-rendering/src/layouts/CrosswordLayout.tsx

Lines changed: 31 additions & 181 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { ArticleContainer } from '../components/ArticleContainer';
1313
import { ArticleHeadline } from '../components/ArticleHeadline';
1414
import { ArticleMeta } from '../components/ArticleMeta.web';
1515
import { ArticleTitle } from '../components/ArticleTitle';
16-
import { Carousel } from '../components/Carousel.importable';
1716
import { CrosswordInstructions } from '../components/CrosswordInstructions';
1817
import { CrosswordLinks } from '../components/CrosswordLinks';
1918
import { DecideLines } from '../components/DecideLines';
@@ -23,9 +22,6 @@ import { GridItem } from '../components/GridItem';
2322
import { HeaderAdSlot } from '../components/HeaderAdSlot';
2423
import { Island } from '../components/Island';
2524
import { Masthead } from '../components/Masthead/Masthead';
26-
import { MostViewedFooterData } from '../components/MostViewedFooterData.importable';
27-
import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
28-
import { OnwardsUpper } from '../components/OnwardsUpper.importable';
2925
import { RightColumn } from '../components/RightColumn';
3026
import { Section } from '../components/Section';
3127
import { SlotBodyEnd } from '../components/SlotBodyEnd.importable';
@@ -36,103 +32,44 @@ import { SubNav } from '../components/SubNav.importable';
3632
import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat';
3733
import { canRenderAds } from '../lib/canRenderAds';
3834
import { getContributionsServiceUrl } from '../lib/contributions';
39-
import { decideTrail } from '../lib/decideTrail';
4035
import type { NavType } from '../model/extract-nav';
4136
import { palette as themePalette } from '../palette';
4237
import type { ArticleDeprecated } from '../types/article';
43-
import type { RenderingTarget } from '../types/renderingTarget';
4438
import { BannerWrapper, Stuck } from './lib/stickiness';
4539

4640
const CrosswordGrid = ({ children }: { children: React.ReactNode }) => (
4741
<div
4842
css={css`
49-
/* IE Fallback */
50-
display: flex;
51-
flex-direction: column;
52-
${until.leftCol} {
53-
margin-left: 0px;
54-
}
55-
${from.leftCol} {
56-
margin-left: 151px;
57-
}
58-
${from.wide} {
59-
margin-left: 230px;
60-
}
43+
display: grid;
44+
width: 100%;
45+
margin-left: 0;
46+
grid-column-gap: 0px;
47+
grid-template-columns: minmax(0, 1fr);
48+
grid-template-areas:
49+
'title'
50+
'headline'
51+
'standfirst'
52+
'meta'
53+
'instructions'
54+
'body';
6155
62-
@supports (display: grid) {
63-
display: grid;
64-
width: 100%;
65-
margin-left: 0;
56+
${from.leftCol} {
6657
grid-column-gap: 20px;
58+
grid-template-columns: 140px 1fr;
59+
grid-template-areas:
60+
'title headline '
61+
'meta standfirst '
62+
'meta instructions'
63+
'body body ';
64+
}
6765
68-
/*
69-
Explanation of each unit of grid-template-columns
70-
71-
Left Column
72-
Main content
73-
Right Column
74-
*/
75-
${from.wide} {
76-
grid-template-columns: 220px 1fr 300px;
77-
78-
grid-template-areas:
79-
'title headline right-column'
80-
'meta standfirst right-column'
81-
'meta instructions right-column'
82-
'body body right-column';
83-
}
84-
85-
/*
86-
Explanation of each unit of grid-template-columns
87-
88-
Left Column
89-
Main content
90-
Right Column
91-
*/
92-
${until.wide} {
93-
grid-template-columns: 140px 1fr 300px;
94-
95-
grid-template-areas:
96-
'title headline right-column'
97-
'meta standfirst right-column'
98-
'meta instructions right-column'
99-
'body body right-column';
100-
}
101-
102-
${until.leftCol} {
103-
grid-template-columns: 1fr 300px;
104-
grid-template-areas:
105-
'title right-column'
106-
'headline right-column'
107-
'standfirst right-column'
108-
'meta right-column'
109-
'instructions right-column'
110-
'body right-column';
111-
}
112-
113-
${until.desktop} {
114-
grid-column-gap: 0px;
115-
grid-template-columns: minmax(0, 1fr); /* Main content */
116-
grid-template-areas:
117-
'title'
118-
'headline'
119-
'standfirst'
120-
'meta'
121-
'instructions'
122-
'body';
123-
}
124-
125-
${until.tablet} {
126-
grid-column-gap: 0px;
127-
grid-template-columns: minmax(0, 1fr); /* Main content */
128-
grid-template-areas:
129-
'title'
130-
'headline'
131-
'standfirst'
132-
'meta'
133-
'instructions'
134-
'body';
135-
}
66+
${from.wide} {
67+
grid-template-columns: 220px 1fr 300px;
68+
grid-template-areas:
69+
'title headline right-column'
70+
'meta standfirst right-column'
71+
'meta instructions right-column'
72+
'body body right-column';
13673
}
13774
`}
13875
>
@@ -157,19 +94,14 @@ const stretchLines = css`
15794
}
15895
`;
15996

160-
interface CommonProps {
97+
interface Props {
16198
article: ArticleDeprecated;
16299
format: ArticleFormat;
163-
renderingTarget: RenderingTarget;
164-
}
165-
166-
interface WebProps extends CommonProps {
167100
NAV: NavType;
168-
renderingTarget: 'Web';
169101
}
170102

171-
export const CrosswordLayout = (props: WebProps) => {
172-
const { article, format, renderingTarget } = props;
103+
export const CrosswordLayout = (props: Props) => {
104+
const { article, format } = props;
173105
const {
174106
config: { isPaidContent, host, hasSurveyAd },
175107
} = article;
@@ -180,8 +112,6 @@ export const CrosswordLayout = (props: WebProps) => {
180112

181113
const contributionsServiceUrl = getContributionsServiceUrl(article);
182114

183-
const { absoluteServerTimes = false } = article.config.switches;
184-
185115
/**
186116
* This property currently only applies to the header and merchandising slots
187117
*/
@@ -378,7 +308,7 @@ export const CrosswordLayout = (props: WebProps) => {
378308
</ArticleContainer>
379309
</GridItem>
380310
<GridItem area="right-column">
381-
<RightColumn>
311+
<RightColumn showFrom="wide">
382312
{renderAds ? (
383313
<AdSlot
384314
position="right"
@@ -485,56 +415,6 @@ export const CrosswordLayout = (props: WebProps) => {
485415
</Section>
486416
)}
487417

488-
{article.storyPackage && (
489-
<Section
490-
fullWidth={true}
491-
showTopBorder={false}
492-
backgroundColour={themePalette(
493-
'--article-section-background',
494-
)}
495-
borderColour={themePalette('--article-border')}
496-
>
497-
<Island priority="feature" defer={{ until: 'visible' }}>
498-
<Carousel
499-
heading={article.storyPackage.heading}
500-
trails={article.storyPackage.trails.map(
501-
decideTrail,
502-
)}
503-
onwardsSource="more-on-this-story"
504-
format={format}
505-
leftColSize={'compact'}
506-
discussionApiUrl={
507-
article.config.discussionApiUrl
508-
}
509-
absoluteServerTimes={absoluteServerTimes}
510-
renderingTarget={renderingTarget}
511-
/>
512-
</Island>
513-
</Section>
514-
)}
515-
516-
<Island priority="feature" defer={{ until: 'visible' }}>
517-
<OnwardsUpper
518-
ajaxUrl={article.config.ajaxUrl}
519-
hasRelated={article.hasRelated}
520-
hasStoryPackage={article.hasStoryPackage}
521-
isAdFreeUser={article.isAdFreeUser}
522-
pageId={article.pageId}
523-
isPaidContent={!!article.config.isPaidContent}
524-
showRelatedContent={article.config.showRelatedContent}
525-
keywordIds={article.config.keywordIds}
526-
contentType={article.contentType}
527-
tags={article.tags}
528-
format={format}
529-
pillar={format.theme}
530-
editionId={article.editionId}
531-
shortUrlId={article.config.shortUrlId}
532-
discussionApiUrl={article.config.discussionApiUrl}
533-
absoluteServerTimes={absoluteServerTimes}
534-
renderingTarget={renderingTarget}
535-
/>
536-
</Island>
537-
538418
{showComments && (
539419
<Section
540420
fullWidth={true}
@@ -565,36 +445,6 @@ export const CrosswordLayout = (props: WebProps) => {
565445
</Section>
566446
)}
567447

568-
{!isPaidContent && (
569-
<Section
570-
title="Most viewed"
571-
padContent={false}
572-
verticalMargins={false}
573-
element="aside"
574-
data-print-layout="hide"
575-
data-link-name="most-popular"
576-
data-component="most-popular"
577-
backgroundColour={themePalette(
578-
'--article-section-background',
579-
)}
580-
borderColour={themePalette('--article-border')}
581-
fontColour={themePalette('--article-section-title')}
582-
>
583-
<MostViewedFooterLayout renderAds={renderAds}>
584-
<Island
585-
priority="feature"
586-
defer={{ until: 'visible' }}
587-
>
588-
<MostViewedFooterData
589-
sectionId={article.config.section}
590-
ajaxUrl={article.config.ajaxUrl}
591-
edition={article.editionId}
592-
/>
593-
</Island>
594-
</MostViewedFooterLayout>
595-
</Section>
596-
)}
597-
598448
{renderAds && (
599449
<Section
600450
fullWidth={true}

‎dotcom-rendering/src/layouts/DecideLayout.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,6 @@ const DecideLayoutWeb = ({
282282
article={article}
283283
NAV={NAV}
284284
format={format}
285-
renderingTarget={renderingTarget}
286285
/>
287286
);
288287
default:

0 commit comments

Comments
 (0)