Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ab/meta alignment #13228

Closed
wants to merge 3 commits into from
Closed

Ab/meta alignment #13228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
330ecee
Break out flex basis in the card layout so we only fill space when th…
abeddow91 Jan 16, 2025
308096a
Move background colour to wrapper rather than only content
abeddow91 Jan 28, 2025
0adb762
only show pill in top right if video article is in a fixed video cont…
abeddow91 Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,7 @@ export const Card = ({
showTopBarMobile={showTopBarMobile}
containerPalette={containerPalette}
isOnwardContent={isOnwardContent}
cardBackgroundColour={backgroundColour}
>
<CardLink
linkTo={linkTo}
Expand Down Expand Up @@ -782,7 +783,6 @@ export const Card = ({
)}

<CardLayout
cardBackgroundColour={backgroundColour}
imagePositionOnDesktop={imagePositionOnDesktop}
imagePositionOnMobile={imagePositionOnMobile}
minWidthInPixels={minWidthInPixels}
Expand Down Expand Up @@ -973,7 +973,8 @@ export const Card = ({
aspectRatio={aspectRatio}
/>
{(isVideoMainMedia ||
(isVideoArticle && !isBetaContainer)) &&
(isVideoArticle &&
containerType === 'fixed/video')) &&
mainMedia.duration > 0 && (
<div
css={css`
Expand Down
22 changes: 18 additions & 4 deletions dotcom-rendering/src/components/Card/components/CardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export type GapSizes = { row: GapSize; column: GapSize };

type Props = {
children: React.ReactNode;
cardBackgroundColour: string;
imageType: CardImageType | undefined;
imagePositionOnDesktop: ImagePositionType;
imagePositionOnMobile: ImagePositionType;
Expand All @@ -25,7 +24,18 @@ type Props = {

const containerStyles = css`
display: flex;
flex-basis: 100%;
`;

const desktopFlexBasis = css`
${from.tablet} {
flex-basis: 100%;
}
`;

const mobileFlexBasis = css`
${until.tablet} {
flex-basis: 100%;
}
`;

// Until mobile landscape, show 1 card on small screens
Expand Down Expand Up @@ -156,9 +166,12 @@ const decideGap = (gapSize: GapSize) => {
}
};

const isVerticalLayout = (imagePosition: ImagePositionType) => {
return imagePosition === 'top' || imagePosition === 'bottom';
};

export const CardLayout = ({
children,
cardBackgroundColour,
imagePositionOnDesktop,
imagePositionOnMobile,
minWidthInPixels,
Expand All @@ -180,9 +193,10 @@ export const CardLayout = ({
isBetaContainer,
imageType === 'avatar',
),
isVerticalLayout(imagePositionOnMobile) && mobileFlexBasis,
isVerticalLayout(imagePositionOnDesktop) && desktopFlexBasis,
]}
style={{
backgroundColor: cardBackgroundColour,
rowGap: decideGap(gapSizes.row),
columnGap: decideGap(gapSizes.column),
}}
Expand Down
3 changes: 3 additions & 0 deletions dotcom-rendering/src/components/Card/components/CardWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { FormatBoundary } from '../../FormatBoundary';
type Props = {
children: React.ReactNode;
format: ArticleFormat;
cardBackgroundColour: string;
containerPalette?: DCRContainerPalette;
showTopBarDesktop?: boolean;
showTopBarMobile?: boolean;
Expand Down Expand Up @@ -98,6 +99,7 @@ export const CardWrapper = ({
showTopBarDesktop = true,
showTopBarMobile = false,
isOnwardContent = false,
cardBackgroundColour,
}: Props) => {
return (
<FormatBoundary format={format}>
Expand All @@ -111,6 +113,7 @@ export const CardWrapper = ({
showTopBarMobile && mobileTopBarStyles,
isOnwardContent && onwardContentStyles,
]}
style={{ backgroundColor: cardBackgroundColour }}
>
{children}
</div>
Expand Down
Loading