From f163ad641f2ebc9066c35d3a02ba5a5d273206ca Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Thu, 25 Sep 2025 12:58:29 +0100 Subject: [PATCH 1/3] Move caption below byline in mobile breakpoints --- .../src/components/ArticleMeta.web.tsx | 19 +++++++++++++++++++ .../src/layouts/GalleryLayout.tsx | 15 ++++++++++----- dotcom-rendering/src/paletteDeclarations.ts | 2 +- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleMeta.web.tsx b/dotcom-rendering/src/components/ArticleMeta.web.tsx index d1ae3cb9daa..8422f14e20d 100644 --- a/dotcom-rendering/src/components/ArticleMeta.web.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.web.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { between, from, space, until } from '@guardian/source/foundations'; +import { Hide } from '@guardian/source/react-components'; import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import type { FEArticle } from '../frontend/feArticle'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; @@ -17,6 +18,7 @@ import type { FEElement } from '../types/content'; import type { Podcast, TagType } from '../types/tag'; import { Avatar } from './Avatar'; import { Branding } from './Branding.importable'; +import { Caption } from './Caption'; import { CommentCount } from './CommentCount.importable'; import { useConfig } from './ConfigContext'; import { Contributor } from './Contributor'; @@ -41,6 +43,7 @@ type Props = { isCommentable: boolean; mainMediaElements?: FEElement[]; crossword?: FEArticle['crossword']; + captionText?: string; }; const meta = (format: ArticleFormat) => { @@ -324,6 +327,7 @@ export const ArticleMeta = ({ isCommentable, mainMediaElements, crossword, + captionText, }: Props) => { const soleContributor = getSoleContributor(tags, byline); const authorName = soleContributor?.title ?? 'Author Image'; @@ -404,6 +408,21 @@ export const ArticleMeta = ({ /> )} + {format.design === ArticleDesign.Gallery ? ( + + + + + ) : null} + {crossword?.creator && ( { format={format} standfirst={frontendData.standfirst} /> - + + + + +
{isWeb ? ( { isCommentable={frontendData.isCommentable} discussionApiUrl={discussionApiUrl} shortUrlId={shortUrlId} + captionText={captionText} /> ) : null} {isApps ? ( diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 90f6592a502..34a3e57a074 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3443,7 +3443,7 @@ const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20]; const straightLinesLight: PaletteFunction = (format) => { if (format.design === ArticleDesign.Gallery) { - return sourcePalette.neutral[20]; + return sourcePalette.neutral[38]; } if (format.theme === ArticleSpecial.SpecialReportAlt) { return transparentColour(sourcePalette.neutral[60], 0.3); From 5013d4d3810390e5caa99bf16f87653842c4c2d4 Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Fri, 26 Sep 2025 10:16:55 +0100 Subject: [PATCH 2/3] Update standfirst, meta and caption position in the grid --- .../src/components/Standfirst.tsx | 4 ++ .../src/layouts/GalleryLayout.tsx | 68 ++++++++++++++++--- 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/components/Standfirst.tsx b/dotcom-rendering/src/components/Standfirst.tsx index 496208979fe..d0d31c82e6b 100644 --- a/dotcom-rendering/src/components/Standfirst.tsx +++ b/dotcom-rendering/src/components/Standfirst.tsx @@ -90,6 +90,10 @@ const decideFont = ({ display, design, theme }: ArticleFormat) => { } return css` ${headlineMedium20} + + ${from.leftCol} { + ${headlineMedium24} + } `; case ArticleDesign.Obituary: case ArticleDesign.Comment: diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index 5df5c289e5d..92d9c1950e2 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -4,8 +4,10 @@ import { from, palette as sourcePalette, space, + until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { Fragment } from 'react'; import { AdPlaceholder } from '../components/AdPlaceholder.apps'; import { AdPortals } from '../components/AdPortals.importable'; @@ -67,8 +69,39 @@ const headerStyles = css` } `; -const metaAndDisclaimerContainer = css` +const captionContainer = css` + ${grid.column.left} + + ${until.leftCol} { + ${grid.column.centre}; + } + grid-row: 8; +`; + +const straightLinesStyle = css` + ${grid.column.left} + + ${until.leftCol} { + ${grid.column.centre}; + } + + grid-row: 9; + align-self: end; +`; + +const standfirstStyles = css` ${grid.column.centre} +`; + +const metaAndDisclaimerContainer = css` + ${grid.column.left} + + ${until.leftCol} { + ${grid.column.centre}; + } + + /* grid-row: 10; */ + padding-bottom: ${space[6]}px; ${from.tablet} { position: relative; @@ -266,18 +299,31 @@ export const GalleryLayout = (props: WebProps | AppProps) => { frontendData.webPublicationDateDeprecated } /> - - - - + - +
+ +
+ + + +
+ +
+ + + +
{isWeb ? ( From 2024a7fdb60f94e11ead7f55e76fcff31b99a86b Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Fri, 26 Sep 2025 13:09:13 +0100 Subject: [PATCH 3/3] Fix alignment of meta and standfirst above leftCol --- .../src/layouts/GalleryLayout.tsx | 46 ++++++++----------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index 92d9c1950e2..3fdb0271e87 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -78,37 +78,31 @@ const captionContainer = css` grid-row: 8; `; -const straightLinesStyle = css` - ${grid.column.left} - - ${until.leftCol} { - ${grid.column.centre}; - } - - grid-row: 9; - align-self: end; -`; - const standfirstStyles = css` ${grid.column.centre} + + ${from.leftCol} { + width: 75%; + grid-row: 10; + } `; const metaAndDisclaimerContainer = css` - ${grid.column.left} + ${grid.column.centre}; - ${until.leftCol} { - ${grid.column.centre}; + ${from.leftCol} { + ${grid.column.left} + grid-row: 10; + padding-top: 10px; } - /* grid-row: 10; */ - padding-bottom: ${space[6]}px; ${from.tablet} { position: relative; &::before { content: ''; position: absolute; - left: -10px; + left: -20px; top: 0; bottom: 0; width: 1px; @@ -316,16 +310,16 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
-
- - - -
-
+
+ + + +
+ {isWeb ? (