From 21e67f226ae3b8cc8ad3a1636f2e68aeb0d3e8a9 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 25 Feb 2026 16:33:03 +0000 Subject: [PATCH 01/16] Rough implementation for mobile view --- .../src/layouts/StandardLayout.tsx | 468 ++++-------------- 1 file changed, 90 insertions(+), 378 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index ebe454b335d..c3f1ed42b98 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -30,7 +30,6 @@ import { Footer } from '../components/Footer'; import { GetMatchNav } from '../components/GetMatchNav.importable'; import { GetMatchStats } from '../components/GetMatchStats.importable'; import { GetMatchTabs } from '../components/GetMatchTabs.importable'; -import { GridItem } from '../components/GridItem'; import { GuardianLabsLines } from '../components/GuardianLabsLines'; import { HeaderAdSlot } from '../components/HeaderAdSlot'; import { Island } from '../components/Island'; @@ -42,13 +41,13 @@ import { MostViewedFooterData } from '../components/MostViewedFooterData.importa import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout'; import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.importable'; import { OnwardsUpper } from '../components/OnwardsUpper.importable'; -import { RightColumn } from '../components/RightColumn'; import { Section } from '../components/Section'; import { SlotBodyEnd } from '../components/SlotBodyEnd.importable'; import { Standfirst } from '../components/Standfirst'; import { StickyBottomBanner } from '../components/StickyBottomBanner.importable'; import { SubMeta } from '../components/SubMeta'; import { SubNav } from '../components/SubNav.importable'; +import { grid } from '../grid'; import { ArticleDesign, type ArticleFormat, @@ -67,266 +66,6 @@ import type { ArticleDeprecated } from '../types/article'; import type { RenderingTarget } from '../types/renderingTarget'; import { BannerWrapper, Stuck } from './lib/stickiness'; -const StandardGrid = ({ - children, - isMatchReport, - isMedia, - isInFootballRedesignVariantGroup, -}: { - children: React.ReactNode; - isMatchReport: boolean; - isMedia: boolean; - isInFootballRedesignVariantGroup: boolean; -}) => ( -
- {children} -
-); - const maxWidth = css` ${from.desktop} { max-width: 620px; @@ -488,65 +227,44 @@ export const StandardLayout = (props: WebProps | AppProps) => { pageId={article.pageId} pageTags={article.tags} /> -
- - {!isInFootballRedesignVariantGroup && ( - <> - -
- {isMatchReport && ( - - - - )} -
- - -
- {isMatchReport && ( - - - - )} -
- - - )} - +
+
+ + +
{ contentLayout="StandardLayout" />
- +
{!isInFootballRedesignVariantGroup && ( - + )} - +
{format.theme === ArticleSpecial.Labs ? ( <> ) : ( )} - - +
+
{ starRating={article.starRating} />
- - +
+
- - +
+ +
{/* Only show Listen to Article button on App landscape views */} {isApps && ( @@ -858,53 +586,37 @@ export const StandardLayout = (props: WebProps | AppProps) => { } /> - - -
+
+ + - - - - - -
- - -
+ /> + + + + {isWeb && renderAds && !isLabs && (
Date: Fri, 27 Feb 2026 13:57:33 +0000 Subject: [PATCH 02/16] Desktop layout --- .../src/layouts/StandardLayout.tsx | 54 +++++++++++++------ 1 file changed, 39 insertions(+), 15 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index c3f1ed42b98..a6d83be08a9 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -83,6 +83,12 @@ const stretchLines = css` } `; +const desktopRow = (row: number) => css` + ${from.desktop} { + grid-row: ${row}; + } +`; + interface Props { article: ArticleDeprecated; format: ArticleFormat; @@ -264,7 +270,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { )} -
+
{
{!isInFootballRedesignVariantGroup && (
-
+
{ />
-
+