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 {
top: 30%;
top: 25%;
}

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

@@ -4,6 +4,20 @@
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) {
.container {
height: 880px;
@@ -21,6 +35,7 @@
margin: 0 auto;
gap: var(--Spacing-x1);
padding: var(--Spacing-x4) var(--Spacing-x3);
z-index: 2;
}
.mainContent {
@@ -35,9 +50,20 @@
gap: var(--Spacing-x1);
}
.buttonWrapper {
min-width: 180px;
}
@media screen and (max-width: 767px) {
.buttonWrapper:not(:only-child) {
min-width: 135px;
}
}
.image {
max-width: 100%;
height: 100%;
z-index: 0;
}
.scriptedText {

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

@@ -48,7 +48,14 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
</Preamble>
<div className={styles.buttons}>
{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
href={primary_button.href}
target={primary_button.openInNewTab ? "_blank" : undefined}
@@ -63,7 +70,9 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
intent="secondary"
size="small"
theme="primaryStrong"
className={styles.buttonWrapper}
asChild
fullWidth
>
<Link
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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./joinScandicFriends.module.css"
@@ -61,7 +60,7 @@ export default async function JoinScandicFriends({
</header>
) : null}
<Preamble>{content.preamble}</Preamble>
<Body>{content.preamble}</Body>
{show_usp && usp.length ? (
<ul className={styles.usp}>

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

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

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

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