Skip to content

Top hat options for interactive layout #15890

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

Draft
frederickobrien wants to merge 1 commit into
base: main
Choose a base branch
from
+128 −82
Draft

Top hat options for interactive layout #15890

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
5 changes: 4 additions & 1 deletion dotcom-rendering/src/components/GridItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { css } from '@emotion/react';
import { css, type SerializedStyles } from '@emotion/react';
import { getZIndex } from '../lib/getZIndex';

type Props = {
Expand All @@ -8,6 +8,7 @@ type Props = {
* The element type to use.
*/
element?: 'div' | 'article' | 'main' | 'aside' | 'section';
customCss?: SerializedStyles;
};

const rightColumnStyles = css`
Expand Down Expand Up @@ -36,12 +37,14 @@ export const GridItem = ({
children,
area,
element: Element = 'div',
customCss,
}: Props) => (
<Element
css={[
area === 'body' && bodyStyles,
area === 'right-column' && rightColumnStyles,
gridArea,
customCss,
]}
style={{
'--grid-area': area,
Expand Down
205 changes: 124 additions & 81 deletions dotcom-rendering/src/layouts/InteractiveLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,13 @@ import {
} from './lib/interactiveLegacyStyling';
import { BannerWrapper, Stuck } from './lib/stickiness';

const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (
const InteractiveGrid = ({
children,
topHat,
}: {
children: React.ReactNode;
topHat: 'regular' | 'fullWidth';
}) => (
<div
className={interactiveLegacyClasses.contentInteractiveGrid}
css={css`
Expand All @@ -78,84 +84,104 @@ const InteractiveGrid = ({ children }: { children: React.ReactNode }) => (

grid-column-gap: 10px;

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

Left Column (220 - 1px border)
Vertical grey border
Main content
*/
${from.wide} {
grid-template-columns: 219px 1px 1020px;

grid-template-areas:
'title border headline'
'. border standfirst'
'. border media'
'. border media'
'. border lines'
'. border meta'
'body body body'
'. . .';
grid-template-areas: ${topHat === 'fullWidth'
? `'media media media'
'title border headline'
'. border standfirst'
'. border lines'
'. border meta'
'body body body'
'. . .'`
: `'title border headline'
'. border standfirst'
'. border media'
'. border media'
'. border lines'
'. border meta'
'body body body'
'. . .'`};
}

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

Left Column (220 - 1px border)
Vertical grey border
Main content
*/
${until.wide} {
grid-template-columns: 140px 1px 940px;

grid-template-areas:
'title border headline'
'. border standfirst'
'. border media'
'. border media'
'. border lines'
'. border meta'
'body body body'
'. . .';
grid-template-areas: ${topHat === 'fullWidth'
? `'media media media'
'title border headline'
'. border standfirst'
'. border lines'
'. border meta'
'body body body'
'. . .'`
: `'title border headline'
'. border standfirst'
'. border media'
'. border media'
'. border lines'
'. border meta'
'body body body'
'. . .'`};
}

${until.leftCol} {
grid-template-columns: 100%; /* Main content */
grid-template-areas:
'title'
'headline'
'standfirst'
'media'
'lines'
'meta'
'body'
'.';
grid-template-columns: 100%;
grid-template-areas: ${topHat === 'fullWidth'
? `'media'
'title'
'headline'
'standfirst'
'lines'
'meta'
'body'
'.'`
: `'title'
'headline'
'standfirst'
'media'
'lines'
'meta'
'body'
'.'`};
}

${until.desktop} {
grid-template-columns: 100%; /* Main content */
grid-template-areas:
'title'
'headline'
'standfirst'
'media'
'lines'
'meta'
'body';
grid-template-columns: 100%;
grid-template-areas: ${topHat === 'fullWidth'
? `'media'
'title'
'headline'
'standfirst'
'lines'
'meta'
'body'`
: `'title'
'headline'
'standfirst'
'media'
'lines'
'meta'
'body'`};
}

${until.tablet} {
grid-column-gap: 0px;
grid-template-columns: 100%; /* Main content */
grid-template-areas:
'media'
'title'
'headline'
'standfirst'
'lines'
'meta'
'body';
grid-template-columns: 100%;
grid-template-areas: ${topHat === 'fullWidth'
? `'media'
'title'
'headline'
'standfirst'
'lines'
'meta'
'body'`
: `'media'
'title'
'headline'
'standfirst'
'lines'
'meta'
'body'`};
}
}
`}
Expand Down Expand Up @@ -232,6 +258,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
}),
);

const topHat: 'regular' | 'fullWidth' = 'fullWidth';

return (
<>
{includesFullWidthElement && (
Expand Down Expand Up @@ -326,24 +354,39 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
<div
className={interactiveLegacyClasses.contentInteractive}
>
<InteractiveGrid>
<GridItem area="media">
<div css={maxWidth}>
<MainMedia
format={format}
elements={article.mainMediaElements}
host={host}
pageId={article.pageId}
webTitle={article.webTitle}
ajaxUrl={article.config.ajaxUrl}
abTests={article.config.abTests}
switches={article.config.switches}
isAdFreeUser={article.isAdFreeUser}
isSensitive={article.config.isSensitive}
editionId={article.editionId}
shouldHideAds={article.shouldHideAds}
/>
</div>
<InteractiveGrid topHat={topHat}>
<GridItem
area="media"
customCss={
topHat === 'fullWidth'
? css`
width: calc(100vw);
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
aspect-ratio: 16 / 9;
object-fit: cover;
overflow: hidden;
`
: undefined
}
>
<MainMedia
format={format}
elements={article.mainMediaElements}
host={host}
pageId={article.pageId}
webTitle={article.webTitle}
ajaxUrl={article.config.ajaxUrl}
abTests={article.config.abTests}
switches={article.config.switches}
isAdFreeUser={article.isAdFreeUser}
isSensitive={article.config.isSensitive}
editionId={article.editionId}
shouldHideAds={article.shouldHideAds}
/>
</GridItem>
<GridItem area="title" element="aside">
<div
Expand Down
Loading