Merge pull request #5254 from guardian/oliver/card-meta-placement

Card meta placement
guardian · Jul 4, 2022 · d91f6d0 · d91f6d0
2 parents 65bb521 + dad1eaf
commit d91f6d0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 54 deletions.
diff --git a/dotcom-rendering/src/web/components/Card/Card.tsx b/dotcom-rendering/src/web/components/Card/Card.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { ArticleDesign } from '@guardian/libs';
-import { brandAltBackground } from '@guardian/source-foundations';
+import { brandAltBackground, space } from '@guardian/source-foundations';
 import { Link } from '@guardian/source-react-components';
 import { StraightLines } from '@guardian/source-react-components-development-kitchen';
 import { decidePalette } from '../../lib/decidePalette';
@@ -60,26 +60,21 @@ export type Props = {
 	discussionId?: string;
 };
 
-const starWrapper = css`
-	background-color: ${brandAltBackground.primary};
-	position: absolute;
-	bottom: 0;
-	margin-top: 2px;
-`;
-
-const StarRatingComponent: React.FC<{ rating: number }> = ({ rating }) => (
-	<>
+const StarRatingComponent = ({ rating }: { rating: number }) => (
+	<div
+		css={css`
+			background-color: ${brandAltBackground.primary};
+			margin-top: ${space[1]}px;
+			display: inline-block;
+		`}
+	>
 		<Hide when="above" breakpoint="desktop">
-			<div css={starWrapper}>
-				<StarRating rating={rating} size="small" />
-			</div>
+			<StarRating rating={rating} size="small" />
 		</Hide>
 		<Hide when="below" breakpoint="desktop">
-			<div css={starWrapper}>
-				<StarRating rating={rating} size="medium" />
-			</div>
+			<StarRating rating={rating} size="medium" />
 		</Hide>
-	</>
+	</div>
 );
 
 /**
@@ -221,19 +216,6 @@ export const Card = ({
 						/>
 					) : undefined
 				}
-				mediaMeta={
-					(format.design === ArticleDesign.Gallery ||
-						format.design === ArticleDesign.Audio ||
-						format.design === ArticleDesign.Video) &&
-					mediaType ? (
-						<MediaMeta
-							containerPalette={containerPalette}
-							format={format}
-							mediaType={mediaType}
-							mediaDuration={mediaDuration}
-						/>
-					) : undefined
-				}
 				commentCount={
 					discussionId ? (
 						<Link
@@ -299,9 +281,6 @@ export const Card = ({
 						imagePositionOnMobile={imagePositionOnMobile}
 					>
 						<img src={imageUrl} alt="" role="presentation" />
-						{starRating !== undefined ? (
-							<StarRatingComponent rating={starRating} />
-						) : null}
 					</ImageWrapper>
 				)}
 				<ContentWrapper
@@ -332,6 +311,20 @@ export const Card = ({
 								byline={byline}
 								showByline={showByline}
 							/>
+							{starRating !== undefined ? (
+								<StarRatingComponent rating={starRating} />
+							) : null}
+							{(format.design === ArticleDesign.Gallery ||
+								format.design === ArticleDesign.Audio ||
+								format.design === ArticleDesign.Video) &&
+							mediaType ? (
+								<MediaMeta
+									containerPalette={containerPalette}
+									format={format}
+									mediaType={mediaType}
+									mediaDuration={mediaDuration}
+								/>
+							) : undefined}
 						</HeadlineWrapper>
 						{avatar && (
 							<Hide when="above" breakpoint="tablet">

diff --git a/dotcom-rendering/src/web/components/Card/components/CardFooter.tsx b/dotcom-rendering/src/web/components/Card/components/CardFooter.tsx
@@ -8,7 +8,6 @@ type Props = {
 	containerPalette?: DCRContainerPalette;
 	displayLines?: boolean;
 	age?: JSX.Element;
-	mediaMeta?: JSX.Element;
 	commentCount?: JSX.Element;
 	cardBranding?: JSX.Element;
 	supportingContent?: JSX.Element;
@@ -35,7 +34,6 @@ export const CardFooter = ({
 	containerPalette,
 	displayLines,
 	age,
-	mediaMeta,
 	commentCount,
 	cardBranding,
 	supportingContent,
@@ -73,23 +71,6 @@ export const CardFooter = ({
 		);
 	}
 
-	if (
-		format.design === ArticleDesign.Gallery ||
-		format.design === ArticleDesign.Audio ||
-		format.design === ArticleDesign.Video
-	) {
-		return (
-			<footer css={margins}>
-				{supportingContent}
-				<div css={spaceBetween}>
-					{mediaMeta}
-					{/* Show age if we have it otherwise try for commentCount */}
-					{age || commentCount}
-				</div>
-			</footer>
-		);
-	}
-
 	if (age) {
 		return (
 			<footer css={margins}>

diff --git a/dotcom-rendering/src/web/components/MediaMeta.tsx b/dotcom-rendering/src/web/components/MediaMeta.tsx
@@ -41,8 +41,7 @@ const durationStyles = (palette: Palette) => css`
 const wrapperStyles = css`
 	display: flex;
 	align-items: center;
-
-	padding: 0 5px 5px 5px;
+	margin-top: 4px;
 `;
 
 export function secondsToDuration(secs?: number): string {