scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-1733-start-page-enhancements-and-fixes (pull request #1415)

Browse Source 
Fix/SW-1733 start page enhancements and fixes

* fix: simplify carousel navigation and grid layout styling and fix padding issue

* refactor(SW-1733): replace Preamble with Body component in JoinScandicFriends

* refactor(SW-1733): update FullWidthCampaign button width styling

* feat(SW-1733): Add gradient overlay to FullWidthCampaign component

* refactor(SW-1733): Simplify FullWidthCampaign button props

* refactor(SW-1733): Remove redundant button wrapper divs in FullWidthCampaign

* refactor(SW-1733): Adjust FullWidthCampaign button wrapper min-width responsively


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-02-25 16:41:02 +00:00
parent 6908cee0c5
commit 341f0c54ed
6 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Blocks/CarouselCards/carouselCards.module.css
View File

@@ -1,3 +1,3 @@
.navigationButton { .navigationButton {
top: 30%; top: 25%;
} }

26
components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css
View File

@@ -4,6 +4,20 @@
height: 100vh; height: 100vh;
} }
.container::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 50%,
rgba(0, 0, 0, 0.75) 100%
);
pointer-events: none;
z-index: 1;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {
height: 880px; height: 880px;
@@ -21,6 +35,7 @@
margin: 0 auto; margin: 0 auto;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x4) var(--Spacing-x3); padding: var(--Spacing-x4) var(--Spacing-x3);
z-index: 2;
} }
.mainContent { .mainContent {
@@ -35,9 +50,20 @@
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
} }
.buttonWrapper {
min-width: 180px;
}
@media screen and (max-width: 767px) {
.buttonWrapper:not(:only-child) {
min-width: 135px;
}
}
.image { .image {
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
z-index: 0;
} }
.scriptedText { .scriptedText {

11
components/Blocks/FullWidthCampaign/index.tsx
View File

@@ -48,7 +48,14 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
</Preamble> </Preamble>
<div className={styles.buttons}> <div className={styles.buttons}>
{content.has_primary_button ? ( {content.has_primary_button ? (
<Button intent="inverted" size="small" theme="base" asChild> <Button
intent="inverted"
size="small"
theme="base"
asChild
className={styles.buttonWrapper}
fullWidth
>
<Link <Link
href={primary_button.href} href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined} target={primary_button.openInNewTab ? "_blank" : undefined}
@@ -63,7 +70,9 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
intent="secondary" intent="secondary"
size="small" size="small"
theme="primaryStrong" theme="primaryStrong"
className={styles.buttonWrapper}
asChild asChild
fullWidth
> >
<Link <Link
href={secondary_button.href} href={secondary_button.href}

3
components/Blocks/JoinScandicFriends/index.tsx
View File

@@ -6,7 +6,6 @@ import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./joinScandicFriends.module.css" import styles from "./joinScandicFriends.module.css"
@@ -61,7 +60,7 @@ export default async function JoinScandicFriends({
</header> </header>
) : null} ) : null}
<Preamble>{content.preamble}</Preamble> <Body>{content.preamble}</Body>
{show_usp && usp.length ? ( {show_usp && usp.length ? (
<ul className={styles.usp}> <ul className={styles.usp}>

1
components/Blocks/JoinScandicFriends/joinScandicFriends.module.css
View File

@@ -78,7 +78,6 @@
.usp li { .usp li {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding-left: var(--Spacing-x1);
} }
.usp li:before { .usp li:before {

8
components/Carousel/carousel.module.css
View File

@@ -34,11 +34,11 @@
} }
.buttonPrev { .buttonPrev {
left: calc(-1 * var(--Spacing-x1)); left: -20px;
} }
.buttonNext { .buttonNext {
right: calc(-1 * var(--Spacing-x1)); right: -20px;
} }
.prevIcon { .prevIcon {
@@ -67,7 +67,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.container { .container {
grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2); grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
} }
.button { .button {
@@ -77,6 +77,6 @@
@media (min-width: 1024px) { @media (min-width: 1024px) {
.container { .container {
grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3); grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
} }
} }