From b5d5b778e26e72f509091341cc42f9adb2b09bb8 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 23 Jun 2026 19:20:51 +0100 Subject: [PATCH 01/10] Absorb PictureLayout into grid --- .../src/components/DecideLines.tsx | 28 +- dotcom-rendering/src/components/MainMedia.tsx | 7 + dotcom-rendering/src/layouts/DecideLayout.tsx | 20 - .../src/layouts/PictureLayout.tsx | 786 ------------------ .../src/layouts/StandardLayoutArticleGrid.tsx | 181 +++- .../src/layouts/lib/articleArrangements.ts | 41 + 6 files changed, 206 insertions(+), 857 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/PictureLayout.tsx diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx index 5d356323691..6927a3b4186 100644 --- a/dotcom-rendering/src/components/DecideLines.tsx +++ b/dotcom-rendering/src/components/DecideLines.tsx @@ -43,18 +43,20 @@ const DottedLines = ({ export const DecideLines = ({ format, color }: Props) => { const count = format.design === ArticleDesign.Comment ? 8 : 4; - switch (format.theme) { - case Pillar.Sport: - return ; - default: - return ( - - ); + if ( + format.theme === Pillar.Sport && + format.design !== ArticleDesign.Picture + ) { + return ; } + + return ( + + ); }; diff --git a/dotcom-rendering/src/components/MainMedia.tsx b/dotcom-rendering/src/components/MainMedia.tsx index 3a2d30e23f5..153ab6563dd 100644 --- a/dotcom-rendering/src/components/MainMedia.tsx +++ b/dotcom-rendering/src/components/MainMedia.tsx @@ -77,6 +77,13 @@ const chooseWrapper = (format: ArticleFormat) => { return noGutters; } } + case ArticleDisplay.Showcase: + switch (format.design) { + case ArticleDesign.Picture: + return ''; + default: + return noGutters; + } default: return noGutters; } diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index eb0399542fa..884015e40ff 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -17,7 +17,6 @@ import { ImmersiveLayout } from './ImmersiveLayout'; import { InteractiveLayout } from './InteractiveLayout'; import { LiveLayout } from './LiveLayout'; import { NewsletterSignupLayout } from './NewsletterSignupLayout'; -import { PictureLayout } from './PictureLayout'; import { StandardLayout } from './StandardLayout'; interface BaseProps { @@ -112,15 +111,6 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { serverTime={serverTime} /> ); - case ArticleDesign.Picture: - return ( - - ); default: return ( { serverTime={serverTime} /> ); - case ArticleDesign.Picture: - return ( - - ); default: return ( ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -const stretchLines = css` - ${until.phablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } -`; - -const mainMediaWrapper = (displayAvatarUrl: boolean) => css` - position: relative; - ${until.phablet} { - margin-left: 20px; - margin-right: 20px; - } - ${until.mobileLandscape} { - margin-left: 10px; - margin-right: 10px; - } - ${displayAvatarUrl - ? css` - margin-top: 8px; - ` - : ``} -`; - -const avatarHeadlineWrapper = css` - display: flex; - flex-direction: column; - justify-content: space-between; -`; - -// This styling taken from the similar approach in CommentLayout.tsx -// If in mobile increase the margin top and margin right deficit -const avatarPositionStyles = css` - display: flex; - justify-content: flex-end; - position: relative; - margin-bottom: -29px; - pointer-events: none; - ${from.desktop} { - margin-top: -50px; - } - ${until.tablet} { - overflow: hidden; - } - - /* Why target img element? - - Because only in this context, where we have overflow: hidden - and the margin-bottom and margin-top of avatarPositionStyles - do we also want to apply our margin-right. These styles - are tightly coupled in this context, and so it does not - make sense to move them to the avatar component. - - It's imperfect from the perspective of DCR, the alternative is to bust - the combined elements into a separate component (with the - relevant stories) and couple them that way, which might be what - you want to do if you find yourself adding more styles - to this section. For now, this works without making me 🤢. - */ - - ${from.mobile} { - img { - margin-right: -1.85rem; - } - } - ${from.mobileLandscape} { - img { - margin-right: -1.25rem; - } - } -`; - -const LeftColLines = (displayAvatarUrl: boolean) => css` - margin-bottom: 4px; - ${displayAvatarUrl - ? css` - margin-top: -29px; - ` - : ''} -`; - -interface CommonProps { - article: ArticleDeprecated; - format: ArticleFormat; - renderingTarget: RenderingTarget; - serverTime?: number; -} - -interface WebProps extends CommonProps { - NAV: NavType; - renderingTarget: 'Web'; -} - -interface AppsProps extends CommonProps { - renderingTarget: 'Apps'; -} - -export const PictureLayout = (props: WebProps | AppsProps) => { - const { article, format, renderingTarget, serverTime } = props; - - const { - config: { isPaidContent, host, hasSurveyAd }, - } = article; - - const isWeb = renderingTarget === 'Web'; - const isApps = renderingTarget === 'Apps'; - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. - - const showComments = article.isCommentable && !isPaidContent; - - const { branding } = article.commercialProperties[article.editionId]; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const renderAds = canRenderAds(article); - - const isWorldCup2026 = article.tags.some((tag) => tag.id === worldCupTagId); - - const avatarUrl = getSoleContributor( - article.tags, - article.byline, - )?.bylineLargeImageUrl; - - const displayAvatarUrl = avatarUrl ? true : false; - - return ( - <> - {isWeb && ( -
- {renderAds && ( - -
- -
- - )} - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- )} - - {isWeb && renderAds && hasSurveyAd && ( - - )} - -
- {isApps && renderAds && ( - - - - )} - -
- - - - - - - - - {displayAvatarUrl ? ( - -
-
- -
- -
- {!!avatarUrl && ( -
- -
- )} - -
-
- - ) : ( - -
- -
- - )} - - - - -
- -
- - -
- -
-
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - - -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - {isWeb && ( - - - - )} - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - - {isWeb && ( - <> -
-
-
- - - - - - - {renderAds && ( - - )} - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 2a2c70ede75..21a1ca95771 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -12,6 +12,7 @@ import { ArticleMetaApps } from '../components/ArticleMeta.apps'; import { ArticleMeta } from '../components/ArticleMeta.web'; import { ArticleTitle } from '../components/ArticleTitle'; import { Caption } from '../components/Caption'; +import { ContributorAvatar } from '../components/ContributorAvatar'; import { DecideLines } from '../components/DecideLines'; import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island'; import { GuardianLabsLines } from '../components/GuardianLabsLines'; @@ -30,6 +31,7 @@ import { type ArticleFormat, ArticleSpecial, } from '../lib/articleFormat'; +import { getSoleContributor } from '../lib/byline'; import { getContributionsServiceUrl } from '../lib/contributions'; import { decideMainMediaCaption } from '../lib/decide-caption'; import { getZIndex } from '../lib/getZIndex'; @@ -56,6 +58,54 @@ const stretchLines = css` } `; +const avatarHeadlineWrapper = css` + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +// This styling taken from the similar approach in CommentLayout.tsx +// If in mobile increase the margin top and margin right deficit +const avatarPositionStyles = css` + display: flex; + justify-content: flex-end; + position: relative; + margin-bottom: -29px; + pointer-events: none; + ${from.desktop} { + margin-top: -50px; + } + ${until.tablet} { + overflow: hidden; + } + + /* Why target img element? + + Because only in this context, where we have overflow: hidden + and the margin-bottom and margin-top of avatarPositionStyles + do we also want to apply our margin-right. These styles + are tightly coupled in this context, and so it does not + make sense to move them to the avatar component. + + It's imperfect from the perspective of DCR, the alternative is to bust + the combined elements into a separate component (with the + relevant stories) and couple them that way, which might be what + you want to do if you find yourself adding more styles + to this section. For now, this works without making me 🤢. + */ + + ${from.mobile} { + img { + margin-right: -1.85rem; + } + } + ${from.mobileLandscape} { + img { + margin-right: -1.25rem; + } + } +`; + interface GridItemProps { area: Area; layoutType: LayoutType; @@ -134,6 +184,7 @@ export const StandardLayoutArticleGrid = ({ const isShowcase = format.display === ArticleDisplay.Showcase; const isImmersive = format.display === ArticleDisplay.Immersive; const isFeature = format.design === ArticleDesign.Feature; + const isPicture = format.design === ArticleDesign.Picture; const isFootballMatchReport = format.design === ArticleDesign.MatchReport && !!footballMatchStatsUrl; @@ -159,6 +210,7 @@ export const StandardLayoutArticleGrid = ({ isFeature, orientation: mainMediaOrientation, isMedia, + isPicture, isShowcase, }); const contentLayoutName = `${ArticleDisplay[format.display]}Layout`; @@ -185,6 +237,13 @@ export const StandardLayoutArticleGrid = ({ article.webPublicationDateDeprecated, ); + const avatarUrl = getSoleContributor( + article.tags, + article.byline, + )?.bylineLargeImageUrl; + + const displayAvatarUrl = avatarUrl ? true : false; + return (
- + {displayAvatarUrl && isPicture ? ( +
+ + {!!avatarUrl && isPicture && ( + <> +
+ +
+ + + )} +
+ ) : ( + + )} - - - - - + {!isPicture && ( + + + + + + )}
); diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index e7fee10daec..22f225682d8 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -6,6 +6,7 @@ export type LayoutType = | 'standard' | 'showcase' | 'media' + | 'picture' | 'immersiveLandscapeDefault' | 'immersiveLandscapeFeature' | 'immersivePortraitDefault' @@ -158,6 +159,42 @@ const mediaCss: LayoutCssMap = { }, }; +const pictureCss: LayoutCssMap = { + title: { + mobile: 'grid-row: 1;', + tablet: 'grid-row: 1;', + leftCol: grid.column.left, + }, + headline: { + mobile: 'grid-row: 2;', + tablet: 'grid-row: 2;', + desktop: grid.between('centre-column-start', 'right-column-end'), + leftCol: 'grid-row: 1;', + }, + standfirst: { + mobile: 'grid-row: 4;', + tablet: 'grid-row: 4;', + leftCol: 'grid-row: 2;', + }, + media: { + mobile: 'grid-row: 5;', + tablet: 'grid-row: 5;', + desktop: grid.between('centre-column-start', 'right-column-end'), + leftCol: `grid-row: 3;`, + }, + meta: { + mobile: 'grid-row: 3;', + tablet: 'grid-row: 3;', + desktop: grid.between('centre-column-start', 'right-column-end'), + leftCol: `grid-row: 3 / span 2; ${grid.column.left};`, + }, + body: { + tablet: 'grid-row: 6;', + desktop: grid.between('centre-column-start', 'right-column-end'), + leftCol: `grid-row: 5;`, + }, +}; + const immersivePortraitDefaultCss: LayoutCssMap = { title: { mobile: 'grid-row: 1;', @@ -330,6 +367,7 @@ const layoutCssMaps: Record = { standard: standardCss, showcase: showcaseCss, media: mediaCss, + picture: pictureCss, immersiveLandscapeDefault: immersiveLandscapeDefaultCss, immersiveLandscapeFeature: immersiveLandscapeFeatureCss, immersivePortraitDefault: immersivePortraitDefaultCss, @@ -385,12 +423,14 @@ export const getLayoutType = ({ isFeature, orientation, isMedia, + isPicture, isShowcase, }: { isImmersive: boolean; isFeature: boolean; orientation: 'portrait' | 'landscape' | 'square'; isMedia: boolean; + isPicture: boolean; isShowcase: boolean; }): LayoutType => { if (isImmersive) { @@ -405,6 +445,7 @@ export const getLayoutType = ({ : 'immersiveLandscapeDefault'; } if (isMedia) return 'media'; + if (isPicture) return 'picture'; if (isShowcase) return 'showcase'; return 'standard'; }; From c1b8e73f79a9dfb858299c94a3319545cfac7e7a Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Sun, 28 Jun 2026 23:49:15 +0100 Subject: [PATCH 02/10] Handle author/artist avatars --- dotcom-rendering/src/components/ArticleHeadline.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 3c81c5b575c..ea5121048b5 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -939,10 +939,15 @@ export const ArticleHeadline = ({ case ArticleDesign.Picture: return (

Date: Wed, 22 Jul 2026 13:01:57 +0100 Subject: [PATCH 03/10] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 22f225682d8..3a8d3e4d816 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -359,7 +359,8 @@ const immersiveLandscapeFeatureCss: LayoutCssMap = { leftCol: 'grid-row: 6;', }, 'right-column': { - desktop: `grid-row: 6 / span 3; ${grid.column.right};`, + desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 5;`, }, }; From 69c116f82373f3821ecbb0e2e8d00fd71675cdd2 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:02:45 +0100 Subject: [PATCH 04/10] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 3a8d3e4d816..d4a5bb15c89 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -180,7 +180,7 @@ const pictureCss: LayoutCssMap = { mobile: 'grid-row: 5;', tablet: 'grid-row: 5;', desktop: grid.between('centre-column-start', 'right-column-end'), - leftCol: `grid-row: 3;`, + leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, }, meta: { mobile: 'grid-row: 3;', From 298c2fec55cc75726e4466d5393423c5f437df3c Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 22 Jul 2026 13:04:21 +0100 Subject: [PATCH 05/10] Update dotcom-rendering/src/layouts/lib/articleArrangements.ts Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- dotcom-rendering/src/layouts/lib/articleArrangements.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index d4a5bb15c89..3a8d3e4d816 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -180,7 +180,7 @@ const pictureCss: LayoutCssMap = { mobile: 'grid-row: 5;', tablet: 'grid-row: 5;', desktop: grid.between('centre-column-start', 'right-column-end'), - leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`, + leftCol: `grid-row: 3;`, }, meta: { mobile: 'grid-row: 3;', From c630ac6bb58133bfd5db7a8029a7357145d96e6f Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 28 Jul 2026 14:33:41 +0100 Subject: [PATCH 06/10] Properly nest headline elements --- dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 21a1ca95771..d1f809448a1 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -409,7 +409,8 @@ export const StandardLayoutArticleGrid = ({ } starRating={article.starRating} /> - {!!avatarUrl && isPicture && ( + + {!!avatarUrl && ( <>
Date: Tue, 28 Jul 2026 14:53:48 +0100 Subject: [PATCH 07/10] Tidying --- .../src/components/ArticleHeadline.tsx | 4 +- .../src/components/DecideLines.tsx | 39 ++++++---- .../src/layouts/StandardLayoutArticleGrid.tsx | 75 +++++-------------- 3 files changed, 43 insertions(+), 75 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index ea5121048b5..965149b4bd3 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -944,9 +944,7 @@ export const ArticleHeadline = ({ format, hasAvatar, }), - css` - max-width: 620px; - `, + maxWidth, ]} > diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx index 6927a3b4186..3cc0a039e59 100644 --- a/dotcom-rendering/src/components/DecideLines.tsx +++ b/dotcom-rendering/src/components/DecideLines.tsx @@ -43,20 +43,29 @@ const DottedLines = ({ export const DecideLines = ({ format, color }: Props) => { const count = format.design === ArticleDesign.Comment ? 8 : 4; - if ( - format.theme === Pillar.Sport && - format.design !== ArticleDesign.Picture - ) { - return ; + switch (format.theme) { + case Pillar.Sport: + if (format.design !== ArticleDesign.Picture) { + return ; + } + return ( + + ); + default: + return ( + + ); } - - return ( - - ); }; diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index d1f809448a1..5d5ecc6f600 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -11,7 +11,6 @@ import { ArticleHeadline } from '../components/ArticleHeadline'; import { ArticleMetaApps } from '../components/ArticleMeta.apps'; import { ArticleMeta } from '../components/ArticleMeta.web'; import { ArticleTitle } from '../components/ArticleTitle'; -import { Caption } from '../components/Caption'; import { ContributorAvatar } from '../components/ContributorAvatar'; import { DecideLines } from '../components/DecideLines'; import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island'; @@ -407,10 +406,11 @@ export const StandardLayoutArticleGrid = ({ webPublicationDateDeprecated={ article.webPublicationDateDeprecated } + hasAvatar={true} starRating={article.starRating} /> - {!!avatarUrl && ( + {!!avatarUrl && isPicture && ( <>
- + - {isImmersive && ( - - - - - - )} - - {format.display !== ArticleDisplay.Immersive && - format.design !== ArticleDesign.Audio && - layoutType !== 'immersivePortraitDefault' && ( -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- )} + + {format.design !== ArticleDesign.Audio && ( +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ )} {isApps ? ( <> From cc995bca902903e8eaca7f1bd148f041fdf28c90 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 29 Jul 2026 17:03:58 +0100 Subject: [PATCH 08/10] Use switch to decide grid arrangement --- .../src/layouts/StandardLayoutArticleGrid.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 5d5ecc6f600..2c0a945f40d 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -11,6 +11,7 @@ import { ArticleHeadline } from '../components/ArticleHeadline'; import { ArticleMetaApps } from '../components/ArticleMeta.apps'; import { ArticleMeta } from '../components/ArticleMeta.web'; import { ArticleTitle } from '../components/ArticleTitle'; +import { Caption } from '../components/Caption'; import { ContributorAvatar } from '../components/ContributorAvatar'; import { DecideLines } from '../components/DecideLines'; import { FootballMatchInfoWrapper } from '../components/FootballMatchInfoWrapper.island'; @@ -456,6 +457,26 @@ export const StandardLayoutArticleGrid = ({ > + {isImmersive && ( + + + + + + )} {format.design !== ArticleDesign.Audio && (
From bb875ae0c52612cf84a2049808b56f8141b35988 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 19 Aug 2026 13:21:36 +0100 Subject: [PATCH 09/10] Rebase tidying --- .../src/layouts/StandardLayoutArticleGrid.tsx | 51 +++++++++++++------ .../src/layouts/lib/articleArrangements.ts | 3 +- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 2c0a945f40d..868b6faf3e7 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -455,7 +455,11 @@ export const StandardLayoutArticleGrid = ({ `, ]} > - + {isImmersive && ( )} - - {format.design !== ArticleDesign.Audio && ( -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- )} + + {format.display !== ArticleDisplay.Immersive && + format.design !== ArticleDesign.Audio && + layoutType !== 'immersivePortraitDefault' && ( +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ )} {isApps ? ( <> diff --git a/dotcom-rendering/src/layouts/lib/articleArrangements.ts b/dotcom-rendering/src/layouts/lib/articleArrangements.ts index 3a8d3e4d816..22f225682d8 100644 --- a/dotcom-rendering/src/layouts/lib/articleArrangements.ts +++ b/dotcom-rendering/src/layouts/lib/articleArrangements.ts @@ -359,8 +359,7 @@ const immersiveLandscapeFeatureCss: LayoutCssMap = { leftCol: 'grid-row: 6;', }, 'right-column': { - desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`, - leftCol: `grid-row: 5;`, + desktop: `grid-row: 6 / span 3; ${grid.column.right};`, }, }; From 10464b0c9dde878b1a5509535a455186e499f06f Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 19 Aug 2026 14:50:30 +0100 Subject: [PATCH 10/10] Fine tuning --- .../src/components/DecideLines.tsx | 6 ++- .../src/layouts/StandardLayout.tsx | 48 ++++++++++--------- .../src/layouts/StandardLayoutArticleGrid.tsx | 20 +++++++- 3 files changed, 49 insertions(+), 25 deletions(-) diff --git a/dotcom-rendering/src/components/DecideLines.tsx b/dotcom-rendering/src/components/DecideLines.tsx index 3cc0a039e59..45f46ec79e8 100644 --- a/dotcom-rendering/src/components/DecideLines.tsx +++ b/dotcom-rendering/src/components/DecideLines.tsx @@ -10,6 +10,7 @@ import { type Props = { format: ArticleFormat; color?: string; + displayingAvatar?: boolean; }; type DottedLinesProps = { color?: string; count: number }; @@ -40,8 +41,9 @@ const DottedLines = ({ >
); -export const DecideLines = ({ format, color }: Props) => { - const count = format.design === ArticleDesign.Comment ? 8 : 4; +export const DecideLines = ({ format, color, displayingAvatar }: Props) => { + const count = + format.design === ArticleDesign.Comment || displayingAvatar ? 8 : 4; switch (format.theme) { case Pillar.Sport: diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index cd5abdf5f3d..cb5aa7a660c 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -228,28 +228,32 @@ export const StandardLayout = (props: WebProps | AppProps) => { )} - - - + {!(format.design === ArticleDesign.Picture && isApps) && ( + + + + )} {showComments && (
css` + margin-bottom: 4px; + ${showingAvatar + ? css` + margin-top: -29px; + ` + : ''} + `; + return (
+
{isWeb && format.theme === ArticleSpecial.Labs && format.design !== ArticleDesign.Video ? ( @@ -507,6 +522,9 @@ export const StandardLayoutArticleGrid = ({ )}