Merge pull request #14249 from guardian/fix-gallery-padding-and-border

fix header left padding and border

Author: marjisound

dotcom-rendering/src/components/ArticleHeadline.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	headlineBold28,
 	headlineBold34,
@@ -116,13 +117,24 @@ const decideMobileHeadlineFont = (format: ArticleFormat) => {
 	}
 };
 
-const headlineFont = (format: ArticleFormat) => css`
-	${decideMobileHeadlineFont(format)}
+const headlineFont = (format: ArticleFormat) => {
+	if (format.design === ArticleDesign.Gallery) {
+		return css`
+			${decideMobileHeadlineFont(format)}
 
-	${from.tablet} {
-		${decideHeadlineFont(format)}
+			${from.desktop} {
+				${decideHeadlineFont(format)}
+			}
+		`;
 	}
-`;
+	return css`
+		${decideMobileHeadlineFont(format)}
+
+		${from.tablet} {
+			${decideHeadlineFont(format)}
+		}
+	`;
+};
 
 const invertedFontLineHeight = css`
 	line-height: 2.1875rem;
@@ -371,6 +383,17 @@ const decideBottomPadding = ({
 	}
 };
 
+const galleryStyles = css`
+	${grid.between('grid-start', 'centre-column-end')}
+
+	grid-row: 7/9;
+
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
+	}
+`;
+
 export const ArticleHeadline = ({
 	headlineString,
 	format,
@@ -825,15 +848,7 @@ export const ArticleHeadline = ({
 					);
 				case ArticleDesign.Gallery: {
 					return (
-						<div
-							css={[
-								darkBackground,
-								grid.between('centre-column-start', 'grid-end'),
-								css`
-									grid-row: 7/9;
-								`,
-							]}
-						>
+						<div css={galleryStyles}>
 							<WithAgeWarning
 								tags={tags}
 								webPublicationDateDeprecated={
@@ -850,9 +865,16 @@ export const ArticleHeadline = ({
 											color: ${themePalette(
 												'--headline-colour',
 											)};
+											${darkBackground};
+											min-height: 84px;
 											padding-bottom: ${space[6]}px;
 											padding-left: ${space[3]}px;
 											padding-right: ${space[3]}px;
+
+											${between.mobileLandscape.and
+												.tablet} {
+												padding-left: ${space[5]}px;
+											}
 										`,
 									]}
 								>

dotcom-rendering/src/components/ArticleMeta.apps.tsx

@@ -201,6 +201,23 @@ const stretchLines = css`
 	grid-column: 1 / -1;
 `;
 
+const galleryMetaContainer = css`
+	${grid.column.centre}
+	padding-bottom: ${space[2]}px;
+	${from.tablet} {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			left: -10px;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background-color: ${themePalette('--article-border')};
+		}
+	}
+`;
+
 export const ArticleMetaApps = ({
 	branding,
 	format,
@@ -244,13 +261,7 @@ export const ArticleMetaApps = ({
 			}
 			css={[
 				metaContainerMargins,
-				isGallery ? grid.column.centre : undefined,
-				isGallery
-					? {
-							marginLeft: space[3],
-							paddingBottom: space[2],
-					  }
-					: undefined,
+				isGallery ? galleryMetaContainer : undefined,
 			]}
 		>
 			<div

dotcom-rendering/src/components/ArticleMeta.web.tsx

@@ -190,9 +190,21 @@ export const metaContainer = (format: ArticleFormat) => {
 				case ArticleDesign.Gallery:
 					return css`
 						${grid.column.centre}
-						margin-bottom: ${space[3]}px;
-						margin-left: ${space[3]}px;
-						margin-right: ${space[3]}px;
+						padding-bottom: ${space[3]}px;
+						${from.tablet} {
+							position: relative;
+							&::before {
+								content: '';
+								position: absolute;
+								left: -10px;
+								top: 0;
+								bottom: 0;
+								width: 1px;
+								background-color: ${themePalette(
+									'--article-border',
+								)};
+							}
+						}
 					`;
 				default:
 					return defaultMargins;

dotcom-rendering/src/components/ArticleTitle.tsx

@@ -43,10 +43,16 @@ const immersiveMargins = css`
 `;
 
 const galleryStyles = css`
-	${grid.between('centre-column-start', 'grid-end')};
+	${grid.column.all}
+
 	grid-row: 6/7;
 	max-width: 400px;
 	min-width: 200px;
+
+	${from.tablet} {
+		${grid.between('centre-column-start', 'grid-end')};
+		margin-left: -10px;
+	}
 `;
 
 export const ArticleTitle = ({

dotcom-rendering/src/components/SeriesSectionLink.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import {
+	between,
 	from,
 	headlineBold17,
 	headlineBold20,
@@ -169,6 +170,10 @@ const sectionPadding = (design: ArticleDesign) => {
 	if (design === ArticleDesign.Gallery) {
 		return css`
 			padding: 0 ${space[2]}px 0 ${space[3]}px;
+
+			${between.mobileLandscape.and.tablet} {
+				padding-left: ${space[5]}px;
+			}
 		`;
 	}
 	return css`

dotcom-rendering/src/components/Standfirst.tsx

@@ -324,14 +324,24 @@ const standfirstStyles = ({ display, design, theme }: ArticleFormat) => {
 
 						${from.tablet} {
 							${grid.span('centre-column-start', 7)}
+
+							position: relative;
+							&::before {
+								content: '';
+								position: absolute;
+								left: -10px;
+								top: 0;
+								bottom: 0;
+								width: 1px;
+								background-color: ${palette(
+									'--article-border',
+								)};
+							}
 						}
 
 						${from.desktop} {
 							${grid.span('centre-column-start', 6)}
 						}
-						margin-bottom: ${space[3]}px;
-						margin-left: ${space[3]}px;
-						margin-right: ${space[3]}px;
 					`;
 				default:
 					switch (theme) {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from } from '@guardian/source/foundations';
+import { between, from } from '@guardian/source/foundations';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { ArticleMetaApps } from '../components/ArticleMeta.apps';
 import { ArticleMeta } from '../components/ArticleMeta.web';
@@ -39,6 +39,10 @@ const border = css({
 const headerStyles = css`
 	${grid.container}
 	background-color: ${palette('--article-inner-background')};
+
+	${from.tablet} {
+		border-bottom: 1px solid ${palette('--article-border')};
+	}
 `;
 
 export const GalleryLayout = (props: WebProps | AppProps) => {
@@ -158,16 +162,25 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 								${from.leftCol} {
 									${grid.column.left}
 								}
+								position: relative;
+								${between.tablet.and.leftCol} {
+									&::before {
+										content: '';
+										position: absolute;
+										left: -10px;
+										top: 0;
+										bottom: 0;
+										width: 1px;
+										background-color: ${palette(
+											'--article-border',
+										)};
+									}
+								}
 							`,
 						]}
 					>
 						Main media caption
 					</div>
-					<div
-						css={[grid.between('centre-column-start', 'grid-end')]}
-					>
-						Meta
-					</div>
 				</header>
 				{gallery.images.map((element, idx) => (
 					<GalleryImage