From eb2f3a87941cb61b0a80ff905f6d47fabd0b418e Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Fri, 18 Oct 2024 20:16:02 +0100 Subject: [PATCH 1/5] Add swipe-to-dismiss functionality for users on smaller screens --- .../logos/red-blue-banner-bottom-mobile.svg | 43 +++++++++++++++++++ .../logos/red-blue-banner-faded-mobile.svg | 33 ++++++++++++++ .../logos/red-blue-banner-top-mobile.svg | 31 +++++++++++++ 3 files changed, 107 insertions(+) create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg new file mode 100644 index 00000000000..e50ff3da4df --- /dev/null +++ b/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg new file mode 100644 index 00000000000..4ded194ae58 --- /dev/null +++ b/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg new file mode 100644 index 00000000000..8e80855e76a --- /dev/null +++ b/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 897c6f33e43c153e297541492797b67cd5254e61 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Sat, 19 Oct 2024 09:44:36 +0100 Subject: [PATCH 2/5] Delete unused illustration. Replace an updated illustration --- .../logos/red-blue-large-banner-bottom.svg | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg b/dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg index 90e01c1d51c..1c4d7d01ca5 100644 --- a/dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg +++ b/dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg @@ -1,43 +1,43 @@ - - - + + + - - + + - - + + - + - - + + - + - - + + - + - - + + From 044ee91068c2ebb0680d9bbe2027d697553634be Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Sat, 19 Oct 2024 09:45:32 +0100 Subject: [PATCH 3/5] design updates --- .../components/ExpandableMarketingCard.tsx | 54 +++++++++++++------ 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 859ee54c854..c17fd8cd0ac 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -6,6 +6,7 @@ import { headlineBold20, neutral, space, + textSans14, textSans15, textSansBold12, textSansBold14, @@ -110,13 +111,19 @@ const headingStyles = css` justify-content: space-between; ${headlineBold17}; - ${from.leftCol} { + ${from.wide} { ${headlineBold20}; } `; const kickerStyles = css` ${textSans15}; + ${from.leftCol} { + ${textSans14}; + } + ${from.wide} { + ${textSans15}; + } `; const arrowStyles = css` @@ -156,16 +163,21 @@ const sectionStyles = css` gap: ${space[3]}px; border-top: 1px solid ${neutral[100]}; padding-top: ${space[2]}px; +`; - h3 { - ${headlineBold17}; - } +const subheadingStyles = css` + ${headlineBold17}; +`; - p { - ${textSans15} - margin-right: ${space[4]}px; - z-index: 1; - } +const paragraphStyles = css` + ${textSans15} + margin-right: ${space[4]}px; + z-index: 1; +`; + +const ctaCalloutStyles = css` + ${textSansBold14}; + z-index: 1; `; const imageTopStyles = css` @@ -259,37 +271,45 @@ export const ExpandableMarketingCard = ({
-

We’re independent

-

+

+ We’re independent +

+

With no billionaire owner or shareholders, our journalism is funded by readers

-

We’re open

-

+

We’re open

+

With misinformation threatening democracy, we keep our fact-based news paywall-free

-

We’re global

-

+

We’re global

+

With 200 years of history and staff across America and the world, we offer an outsider perspective on US news

+
+

+ Sign up for Guardian Headlines US + edition +

+
- View newsletters + Newsletter sign up
From e9a6c6809730e0a858ed86055f067c3be3c59b77 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 21 Oct 2024 12:47:37 +0100 Subject: [PATCH 4/5] Delete unused svgs --- .../logos/red-blue-banner-bottom-mobile.svg | 43 ------------------- .../logos/red-blue-banner-faded-mobile.svg | 33 -------------- .../logos/red-blue-banner-top-mobile.svg | 31 ------------- 3 files changed, 107 deletions(-) delete mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg delete mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg delete mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg deleted file mode 100644 index e50ff3da4df..00000000000 --- a/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg deleted file mode 100644 index 4ded194ae58..00000000000 --- a/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg deleted file mode 100644 index 8e80855e76a..00000000000 --- a/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - From c8190b4d922f47010e780f06e2c76d1ea20b7b46 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 21 Oct 2024 14:46:05 +0100 Subject: [PATCH 5/5] flip boolean. New users should see the banner. --- .../components/ExpandableMarketingCardWrapper.importable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index f0c00431d47..2b558a8a54f 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -27,7 +27,7 @@ const isNewUSUser = async () => { // This check must happen AFTER we've ensured that the user is in the US. const isNewUser = isFirstArticle(); - return !hasUserSelectedNonUSEdition && !isNewUser; + return !hasUserSelectedNonUSEdition && isNewUser; }; interface Props {