From b1f83a8460cc1e6a3fc8a3dfea6ff0b7a483e753 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 10:32:44 +0100 Subject: [PATCH 1/6] Hide vertical line from tablet --- .../ScrollableHighlights.importable.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx index 77153d305f4..332095f363f 100644 --- a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx @@ -84,15 +84,17 @@ const itemStyles = css` `; const verticalLineStyles = css` - :not(:last-child)::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - right: -10px; - width: 1px; - background-color: ${palette('--highlights-container-separator')}; - transform: translateX(-50%); + ${from.tablet} { + :not(:last-child)::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: -10px; + width: 1px; + background-color: ${palette('--highlights-container-separator')}; + transform: translateX(-50%); + } } `; From 7e4f10d57012c1a2e6a08030ac78318546d1040b Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 10:32:53 +0100 Subject: [PATCH 2/6] Update card padding on mobile --- .../src/components/Masthead/HighlightsCard.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 8b6a1dc6893..58eb9468a30 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -41,7 +41,7 @@ const container = css` column-gap: ${space[2]}px; /** Relative positioning is required to absolutely position the card link overlay */ position: relative; - padding: 10px 10px 0 10px; + padding: ${space[2]}px ${space[2]}px 0 ${space[2]}px; background-color: ${palette('--highlights-card-background')}; /** @@ -55,22 +55,19 @@ const container = css` ${until.mobileMedium} { min-height: 174px; } - ${between.mobileMedium.and.tablet} { min-height: 194px; height: 100%; } - ${from.tablet} { height: 100%; width: 160px; + padding: 10px 10px 0 10px; } - ${from.tablet} { width: 280px; flex-direction: row; } - ${from.desktop} { width: 300px; } @@ -105,6 +102,7 @@ const content = css` padding-bottom: 10px; } `; + const starWrapper = css` width: fit-content; margin-top: ${space[1]}px; From 880174caab7efd4e910e4837ff8ff3c48c70b358 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 11:45:16 +0100 Subject: [PATCH 3/6] Centralise vertical line --- .../src/components/ScrollableHighlights.importable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx index 332095f363f..327c1fa8af3 100644 --- a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx @@ -85,12 +85,12 @@ const itemStyles = css` const verticalLineStyles = css` ${from.tablet} { - :not(:last-child)::after { + :not(:first-child)::before { content: ''; position: absolute; top: 0; bottom: 0; - right: -10px; + left: -10px; width: 1px; background-color: ${palette('--highlights-container-separator')}; transform: translateX(-50%); From e181a1e9df43748bfc073072f8e76c039ddb3802 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 11:52:22 +0100 Subject: [PATCH 4/6] Reduce the gap between mobile card. Use gap over padding. Adjust spacing above and below container --- .../ScrollableHighlights.importable.tsx | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx index 327c1fa8af3..cbe23f3d106 100644 --- a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx @@ -19,8 +19,9 @@ type Props = { }; const containerStyles = css` + padding: ${space[2]}px 0 ${space[3]}px; ${from.tablet} { - padding: 0 ${space[5]}px; + padding: ${space[2]}px ${space[5]}px; } ${from.wide} { padding-right: 100px; @@ -29,6 +30,8 @@ const containerStyles = css` const carouselStyles = css` display: grid; + gap: 10px; + padding: 0 10px; grid-auto-columns: 1fr; grid-auto-flow: column; overflow-x: auto; @@ -37,11 +40,12 @@ const carouselStyles = css` scroll-behavior: smooth; overscroll-behavior-x: contain; overscroll-behavior-y: auto; - ${until.tablet} { - scroll-padding-left: 10px; - } + scroll-padding-left: 10px; + ${from.tablet} { + padding: 0; scroll-padding-left: 120px; + gap: ${space[5]}px; } ${from.desktop} { scroll-padding-left: 240px; @@ -70,17 +74,6 @@ const itemStyles = css` scroll-snap-align: start; grid-area: span 1; position: relative; - margin: ${space[2]}px 10px ${space[3]}px; - :first-child { - ${from.tablet} { - margin-left: 0; - } - } - :last-child { - ${from.tablet} { - margin-right: 0; - } - } `; const verticalLineStyles = css` From d590326afb5f00b1908135a5c65751c74a914964 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 12:51:36 +0100 Subject: [PATCH 5/6] Tweak peeking card width --- .../ScrollableHighlights.importable.tsx | 60 +++++++++++++++---- 1 file changed, 49 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx index cbe23f3d106..d1aecda1c39 100644 --- a/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableHighlights.importable.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { from, space, until } from '@guardian/source/foundations'; +import { from, space } from '@guardian/source/foundations'; import { Button, Hide, @@ -28,10 +28,15 @@ const containerStyles = css` } `; +const cardGap = 10; +const horizontalPaddingMobile = 10; +const horizontalPaddingMobileLandscape = 20; + const carouselStyles = css` display: grid; - gap: 10px; - padding: 0 10px; + gap: ${cardGap}px; + padding: 0 ${horizontalPaddingMobile}px; + scroll-padding-left: ${horizontalPaddingMobile}px; grid-auto-columns: 1fr; grid-auto-flow: column; overflow-x: auto; @@ -40,8 +45,11 @@ const carouselStyles = css` scroll-behavior: smooth; overscroll-behavior-x: contain; overscroll-behavior-y: auto; - scroll-padding-left: 10px; + ${from.mobileLandscape} { + padding: 0 ${horizontalPaddingMobileLandscape}px; + scroll-padding-left: ${horizontalPaddingMobileLandscape}px; + } ${from.tablet} { padding: 0; scroll-padding-left: 120px; @@ -133,20 +141,50 @@ const nextButtonFadeStyles = css` * @returns {string} - The CSS styles for the grid layout. */ const generateCarouselColumnStyles = (totalCards: number) => { - const peepingCardWidth = space[8]; + const peepingCardWidthMobile = 150; // Screens below 375px. Only one card is fully visible; + const peepingCardWidthMobileMedium = space[8]; return css` - ${until.mobileMedium} { - grid-template-columns: repeat(${totalCards}, 70%) max(30%); - } - + grid-template-columns: repeat( + ${totalCards}, + max( + 180px, + calc( + 100vw - + ( + ${horizontalPaddingMobile + + cardGap + + peepingCardWidthMobile}px + ) + ) + ) + ); ${from.mobileMedium} { grid-template-columns: repeat( ${totalCards}, - calc((100% - ${peepingCardWidth}px) / 2) + calc( + ( + 100vw - + ${horizontalPaddingMobile + + 2 * cardGap + + peepingCardWidthMobileMedium}px + ) / 2 + ) + ); + } + ${from.mobileLandscape} { + grid-template-columns: repeat( + ${totalCards}, + calc( + ( + 100vw - + ${horizontalPaddingMobileLandscape + + 2 * cardGap + + peepingCardWidthMobileMedium}px + ) / 2 + ) ); } - ${from.tablet} { grid-template-columns: repeat(${totalCards}, 1fr); } From 80387ec9d510f72f08803c070a6624c479f788c0 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 12 Aug 2025 17:52:17 +0100 Subject: [PATCH 6/6] Set height to 100% on very small screens --- dotcom-rendering/src/components/Masthead/HighlightsCard.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx index 58eb9468a30..c86015cb879 100644 --- a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx +++ b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx @@ -38,6 +38,7 @@ const container = css` display: flex; flex-direction: column; justify-content: space-between; + height: 100%; column-gap: ${space[2]}px; /** Relative positioning is required to absolutely position the card link overlay */ position: relative; @@ -57,10 +58,8 @@ const container = css` } ${between.mobileMedium.and.tablet} { min-height: 194px; - height: 100%; } ${from.tablet} { - height: 100%; width: 160px; padding: 10px 10px 0 10px; }