Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Better Grid for articles #12537

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Better Grid for articles #12537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions dotcom-rendering/src/components/GridItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type Props = {
* The element type to use.
*/
element?: 'div' | 'article' | 'main' | 'aside' | 'section';
leftBorder?: boolean;
};

const rightColumnStyles = css`
Expand All @@ -30,15 +31,31 @@ const bodyStyles = css`

const gridArea = css`
grid-area: var(--grid-area);
position: relative;
`;

const leftBorderStyles = css`
:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -10px;
width: 1px;
height: 100%;
border-left: 1px solid var(--section-border);
}
`;

export const GridItem = ({
children,
area,
element: Element = 'div',
leftBorder = false,
}: Props) => (
<Element
css={[
leftBorder && leftBorderStyles,
area === 'body' && bodyStyles,
area === 'right-column' && rightColumnStyles,
gridArea,
Expand Down
79 changes: 41 additions & 38 deletions dotcom-rendering/src/layouts/StandardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,51 +89,46 @@ const StandardGrid = ({
display: grid;
width: 100%;
margin-left: 0;
grid-column-gap: 20px;

grid-column-gap: 10px;

/*
Explanation of each unit of grid-template-columns

Left Column (220 - 1px border)
Vertical grey border
Main content
Right Column
*/
${from.wide} {
grid-template-columns: 219px 1px 620px 80px 300px;
grid-template-columns:
repeat(3, 60px)
repeat(8, 60px)
60px
repeat(4, 60px);

${isMatchReport
? css`
grid-template-areas:
'title border matchNav . right-column'
'title border matchtabs . right-column'
'. border headline . right-column'
'. border standfirst . right-column'
'lines border media . right-column'
'meta border media . right-column'
'meta border body . right-column'
'. border . . right-column';
'title title title matchNav matchNav matchNav matchNav matchNav matchNav matchNav matchNav . right-column right-column right-column right-column'
'title title title matchtabs matchtabs matchtabs matchtabs matchtabs matchtabs matchtabs matchtabs . right-column right-column right-column right-column'
'. . . headline headline headline headline headline headline headline headline . right-column right-column right-column right-column'
'. . . standfirst standfirst standfirst standfirst standfirst standfirst standfirst standfirst . right-column right-column right-column right-column'
'lines lines lines media media media media media media media media . right-column right-column right-column right-column'
'meta meta meta media media media media media media media media . right-column right-column right-column right-column'
'meta meta meta body body body body body body body body . right-column right-column right-column right-column'
'. . . . . . . . . . . . right-column right-column right-column right-column';
`
: isMedia
? css`
grid-template-areas:
'title border headline headline .'
'. border disclaimer disclaimer right-column'
'lines border media media right-column'
'meta border media media right-column'
'meta border standfirst standfirst right-column'
'. border body body right-column'
'. border . . right-column';
'title title title headline headline headline headline headline headline headline headline headline . . . . '
'. . . disclaimer disclaimer disclaimer disclaimer disclaimer disclaimer disclaimer disclaimer disclaimer right-column right-column right-column right-column'
'lines lines lines media media media media media media media media media right-column right-column right-column right-column'
'meta meta meta media media media media media media media media media right-column right-column right-column right-column'
'meta meta meta standfirst standfirst standfirst standfirst standfirst standfirst standfirst standfirst standfirst right-column right-column right-column right-column'
'. . . body body body body body body body body body right-column right-column right-column right-column'
'. . . . . . . . . . . . right-column right-column right-column right-column';
`
: css`
grid-template-areas:
'title border headline . right-column'
'. border standfirst . right-column'
'lines border media . right-column'
'meta border media . right-column'
'meta border body . right-column'
'. border . . right-column';
'title title title headline headline headline headline headline headline headline headline . right-column right-column right-column right-column'
'. . . standfirst standfirst standfirst standfirst standfirst standfirst standfirst standfirst . right-column right-column right-column right-column'
'lines lines lines media media media media media media media media . right-column right-column right-column right-column'
'meta meta meta media media media media media media media media . right-column right-column right-column right-column'
'meta meta meta body body body body body body body body . right-column right-column right-column right-column'
'. . . . . . . . . . . . right-column right-column right-column right-column';
`}
}
}
Expand Down Expand Up @@ -497,7 +492,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
isMatchReport={isMatchReport}
isMedia={isMedia}
>
<GridItem area="matchNav" element="aside">
<GridItem
area="matchNav"
element="aside"
leftBorder={true}
>
<div css={maxWidth}>
{isMatchReport && (
<Island
Expand All @@ -517,7 +516,11 @@ export const StandardLayout = (props: WebProps | AppProps) => {
)}
</div>
</GridItem>
<GridItem area="matchtabs" element="aside">
<GridItem
area="matchtabs"
element="aside"
leftBorder={true}
>
<div css={maxWidth}>
{isMatchReport && (
<Island
Expand All @@ -532,7 +535,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
)}
</div>
</GridItem>
<GridItem area="media">
<GridItem area="media" leftBorder={true}>
<div css={!isMedia && maxWidth}>
<MainMedia
format={format}
Expand Down Expand Up @@ -567,7 +570,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
<Border />
)}
</GridItem>
<GridItem area="headline">
<GridItem area="headline" leftBorder={true}>
<div css={maxWidth}>
<ArticleHeadline
format={format}
Expand All @@ -580,7 +583,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
/>
</div>
</GridItem>
<GridItem area="standfirst">
<GridItem area="standfirst" leftBorder={true}>
{!isUndefined(article.starRating) ? (
<div css={starWrapper}>
<StarRating
Expand Down Expand Up @@ -701,7 +704,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
</div>
)}
</GridItem>
<GridItem area="body">
<GridItem area="body" leftBorder={true}>
<ArticleContainer format={format}>
<ArticleBody
format={format}
Expand Down
Loading