diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index e60a8560408..d86d06cafee 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -22,6 +22,58 @@ type Props = { articleArrangement?: LayoutType; }; +const fullWidthCss = ({ + leftColMaxWidth, + wideMaxWidth, +}: { + leftColMaxWidth: number; + wideMaxWidth: number; +}) => css` + margin-top: ${space[3]}px; + margin-bottom: ${space[3]}px; + + ${until.tablet} { + margin-left: -20px; + margin-right: -20px; + } + ${until.mobileLandscape} { + margin-left: -10px; + margin-right: -10px; + } + ${from.tablet} { + --scrollbar-width-fallback: 15px; + --half-scrollbar-width-fallback: 7.5px; + + width: calc( + 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) + ); + max-width: calc( + 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) + ); + + --grid-container-max-width: 740px; + --grid-container-left-margin: calc( + ((-100vw + (var(--grid-container-max-width) - 42px)) / 2) + + var( + --half-scrollbar-width, + var(--half-scrollbar-width-fallback) + ) + ); + margin-left: var(--grid-container-left-margin); + } + ${from.desktop} { + --grid-container-max-width: ${breakpoints.desktop}px; + } + ${from.leftCol} { + --grid-container-max-width: ${leftColMaxWidth}px; + --grid-left-col-width: 140px; + } + ${from.wide} { + --grid-container-max-width: ${wideMaxWidth}px; + --grid-left-col-width: 219px; + } +`; + const roleCss = { inline: css` margin-top: ${space[3]}px; @@ -78,59 +130,15 @@ const roleCss = { } `, - fullWidth: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - - grid-column: 1 / -1; - `, + fullWidth: fullWidthCss({ + leftColMaxWidth: 824, + wideMaxWidth: 824, + }), - fullWidthDeprecated: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - - ${until.tablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } - ${from.tablet} { - --scrollbar-width-fallback: 15px; - --half-scrollbar-width-fallback: 7.5px; - - width: calc( - 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) - ); - max-width: calc( - 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) - ); - - --grid-container-max-width: 740px; - --grid-container-left-margin: calc( - ((-100vw + (var(--grid-container-max-width) - 42px)) / 2) + - var( - --half-scrollbar-width, - var(--half-scrollbar-width-fallback) - ) - ); - - margin-left: var(--grid-container-left-margin); - } - ${from.desktop} { - --grid-container-max-width: ${breakpoints.desktop}px; - } - ${from.leftCol} { - --grid-container-max-width: ${breakpoints.leftCol}px; - --grid-left-col-width: 140px; - } - ${from.wide} { - --grid-container-max-width: ${breakpoints.wide}px; - --grid-left-col-width: 219px; - } - `, + fullWidthDeprecated: fullWidthCss({ + leftColMaxWidth: breakpoints.leftCol, + wideMaxWidth: breakpoints.wide, + }), showcase: css` margin-top: ${space[3]}px; @@ -225,10 +233,9 @@ export const defaultRoleStyles = ( case 'immersive': return roleCss.immersive; case 'fullWidth': - if (isInDeprecatedInteractiveLayout) { - return roleCss.fullWidthDeprecated; - } - return roleCss.fullWidth; + return isInDeprecatedInteractiveLayout + ? roleCss.fullWidthDeprecated + : roleCss.fullWidth; case 'showcase': if (isTimeline) { return css` diff --git a/dotcom-rendering/src/components/SlotBodyEnd.island.tsx b/dotcom-rendering/src/components/SlotBodyEnd.island.tsx index ca41818bfa7..59e7ab7891b 100644 --- a/dotcom-rendering/src/components/SlotBodyEnd.island.tsx +++ b/dotcom-rendering/src/components/SlotBodyEnd.island.tsx @@ -13,7 +13,6 @@ import type { } from '@guardian/support-dotcom-components/dist/dotcom/types'; import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/types'; import { useEffect, useState } from 'react'; -import { grid } from '../grid'; import { getArticleCounts } from '../lib/articleCount'; import { BrazeBannersSystemPlacementId, @@ -53,19 +52,11 @@ type Props = { isLabs: boolean; articleEndSlot: boolean; isSensitive: boolean; - isInInteractive?: boolean; }; -const slotStyles = (isInInteractive: boolean) => css` +const slotStyles = css` color: ${palette.neutral[7]}; margin: 12px auto; - ${isInInteractive && - css` - ${grid.container}; - & > *:first-child { - ${grid.column.centre}; - } - `} `; const buildReaderRevenueEpicConfig = ( @@ -128,7 +119,6 @@ export const SlotBodyEnd = ({ isLabs, articleEndSlot, isSensitive, - isInInteractive = false, }: Props) => { const { renderingTarget } = useConfig(); const { brazeMessages, braze } = useBraze(idApiUrl, renderingTarget); @@ -272,7 +262,7 @@ export const SlotBodyEnd = ({ ) { const { SelectedMessage } = pickMessageResult; return ( -
+
); @@ -281,7 +271,7 @@ export const SlotBodyEnd = ({ showArticleEndSlot ) { return ( -
+
); diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 1d077aa1d2b..1f50acfc6f8 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -34,6 +34,12 @@ const bottomPadding = css` const setMetaWidth = css` position: relative; + padding-left: 10px; + padding-right: 10px; + ${from.mobileLandscape} { + padding-left: 20px; + padding-right: 20px; + } ${from.tablet} { max-width: 620px; } @@ -42,12 +48,12 @@ const setMetaWidth = css` margin-right: 310px; } ${from.leftCol} { - margin-left: 150px; + margin-left: 170px; padding-left: 10px; border-left: 1px solid ${palette('--article-border')}; } ${from.wide} { - margin-left: 229px; + margin-left: 249px; } `; @@ -235,15 +241,6 @@ export const SubMeta = ({ format.design === ArticleDesign.Gallery ? galleryStyles : bottomPadding, - format.design === ArticleDesign.Interactive && - !isDeprecatedInteractiveLayout - ? css` - ${grid.container}; - > * { - ${grid.column.centre} - } - ` - : undefined, ]} > {format.design === ArticleDesign.Gallery && ( diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index 72038af6309..cbf9688ae4d 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -9,6 +9,7 @@ import { DiscussionLayout } from '../components/DiscussionLayout'; import { FootballMatchHeaderWrapper } from '../components/FootballMatchHeaderWrapper.island'; import { Footer } from '../components/Footer'; import { HeaderAdSlot } from '../components/HeaderAdSlot'; +import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; import { Island } from '../components/Island'; import { LabsHeader } from '../components/LabsHeader'; import { Masthead } from '../components/Masthead/Masthead'; @@ -116,6 +117,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { return ( <> + {isInteractive && } {isWeb && (
{renderAds && ( diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 3b6e121448a..2f7386eb0b6 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -819,7 +819,6 @@ export const StandardLayoutArticleGrid = ({ !!article.config.switches.articleEndSlot } isSensitive={article.config.isSensitive} - isInInteractive={layoutType === 'interactive'} /> )} diff --git a/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx index b90da5fce69..8599e125406 100644 --- a/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx +++ b/dotcom-rendering/src/layouts/interactives/InteractiveArticleGridDeprecated.tsx @@ -423,7 +423,6 @@ export const InteractiveArticleGridDeprecated = ( !!article.config.switches.articleEndSlot } isSensitive={article.config.isSensitive} - isInInteractive={true} /> )} @@ -447,6 +446,7 @@ export const InteractiveArticleGridDeprecated = ( article.showBottomSocialButtons && renderingTarget === 'Web' } + isDeprecatedInteractiveLayout={true} /> diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index ec38952bdfb..6cd21d61063 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -244,38 +244,6 @@ const commentCss: LayoutCssMap = { }, }; -const interactiveCss: LayoutCssMap = { - title: { - tablet: 'grid-row: 1;', - leftCol: `grid-row: 1; ${grid.column.left}`, - }, - headline: { - tablet: 'grid-row: 2;', - leftCol: 'grid-row: 1;', - }, - standfirst: { - tablet: 'grid-row: 3;', - leftCol: 'grid-row: 2;', - }, - media: { - tablet: 'grid-row: 4;', - leftCol: 'grid-row: 3;', - }, - meta: { - tablet: 'grid-row: 5;', - leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, - }, - body: { - mobile: `${grid.column.all};`, - tablet: `grid-row: 6; ${grid.column.all};`, - leftCol: 'grid-row: 4;', - }, - 'right-column': { - desktop: `grid-row: 1 / span 6; ${grid.column.right};`, - leftCol: `grid-row: 1 / span 4; ${grid.column.right};`, - }, -}; - const immersivePortraitCss: LayoutCssMap = { title: { belowDesktop: 'grid-row: 1;', @@ -368,7 +336,7 @@ const layoutCssMaps: Record = { media: mediaCss, picture: pictureCss, comment: commentCss, - interactive: interactiveCss, + interactive: standardCss, immersiveLandscape: immersiveLandscapeCss, immersivePortrait: immersivePortraitCss, }; diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index d23789fc5a6..9058afbe605 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -3,7 +3,6 @@ import { Fragment } from 'react'; import { useConfig } from '../components/ConfigContext'; import { FeastContextualNudge } from '../components/FeastContextualNudge.island'; import { Island } from '../components/Island'; -import { grid } from '../grid'; import type { LayoutType } from '../layouts/lib/articleArrangements'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import type { Switches } from '../types/config'; @@ -245,13 +244,6 @@ export const ArticleRenderer = ({ // ^^ Until we decide where to do the "isomorphism split" in this this code is not safe here. // But should be soon. - const interactiveLayoutCSS = css` - ${grid.container} - > * { - ${grid.column.centre} - } - `; - const isInDeprecatedInteractiveLayout = format.design === ArticleDesign.Interactive && articleArrangement === undefined; @@ -268,14 +260,7 @@ export const ArticleRenderer = ({ ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} - // TODO: Conditionally apply grid for interactives? - css={[ - commercialPosition, - spacefinderAdStyles, - format.design === ArticleDesign.Interactive && - !isInDeprecatedInteractiveLayout && - interactiveLayoutCSS, - ]} + css={[commercialPosition, spacefinderAdStyles]} > {renderingTarget === 'Apps' ? augmentedElements