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

feat: add markup for additional viewport sizes

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-27 10:09:05 +02:00
parent 52b927b684
commit 7b206947bc
4 changed files with 173 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ContentType/LoyaltyPage.tsx
View File

@@ -8,10 +8,12 @@ import styles from "./loyaltyPage.module.css"
export default async function LoyaltyPage() { export default async function LoyaltyPage() {
const loyaltyPage = await serverClient().contentstack.loyaltyPage.get() const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
const hasSidebar = !!loyaltyPage.sidebar.length
return ( return (
<section className={styles.content}> <section
{loyaltyPage.sidebar ? <Sidebar blocks={loyaltyPage.sidebar} /> : null} className={`${styles.content} ${hasSidebar && styles.hasLeftSignbar}`}
>
{hasSidebar && <Sidebar blocks={loyaltyPage.sidebar} />}
<MaxWidth className={styles.blocks} tag="main"> <MaxWidth className={styles.blocks} tag="main">
{loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null} {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}

5
components/ContentType/loyaltyPage.module.css
View File

@@ -13,9 +13,12 @@
} }
@media screen and (min-width: 950px) { @media screen and (min-width: 950px) {
.withLeftSidebar {
grid-template-columns: 30rem 1fr;
}
.content { .content {
gap: 2.7rem; gap: 2.7rem;
grid-template-columns: 30rem 1fr;
padding-bottom: 17.5rem; padding-bottom: 17.5rem;
padding-left: 2.4rem; padding-left: 2.4rem;
padding-right: 2.4rem; padding-right: 2.4rem;

151
components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx
View File

@@ -128,57 +128,114 @@ export default function OverviewTable() {
})) }))
return ( return (
<div className={styles.container}> <>
<div className={styles.intro}> <div className={styles.container}>
<OverviewTableTitle texts={titleTranslations[Lang.en]} /> <div className={styles.intro}>
<p className={styles.preamble}> <OverviewTableTitle texts={titleTranslations[Lang.en]} />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <p className={styles.preamble}>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
quis varius quam quisque id diam vel. Rhoncus urna neque viverra eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu
justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam risus quis varius quam quisque id diam vel. Rhoncus urna neque
eleifend mi in nulla posuere. viverra justo. Mattis aliquam faucibus purus in massa. Id cursus
</p> metus aliquam eleifend mi in nulla posuere.
</div> </p>
<div className={styles.columns}> </div>
<div className={styles.leftColumn} /> <div className={styles.mobileColumns}>
<div className={styles.rightColumn} /> <div className={styles.firstColumn} />
<div className={styles.columnHeaderContainer}> <div className={styles.secondColumn} />
<div className={styles.columnHeader}> <div className={styles.columnHeaderContainer}>
<Select <div className={styles.columnHeader}>
name={"benefitA"} <Select
label={"Level"} name={"benefitA"}
items={levelOptions} label={"Level"}
defaultSelectedKey={selectedLevelA.tier} items={levelOptions}
onSelect={handleSelectChange(setSelectedLevelA)} defaultSelectedKey={selectedLevelA.tier}
/> onSelect={handleSelectChange(setSelectedLevelA)}
<LevelSummary />
level={ <LevelSummary
levelsData.levels.find( level={
(level) => level.tier === selectedLevelA.tier levelsData.levels.find(
) as ComparisonLevel (level) => level.tier === selectedLevelA.tier
} ) as ComparisonLevel
/> }
/>
</div>
<div className={styles.columnHeader}>
<Select
name={"benefitA"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
onSelect={handleSelectChange(setSelectedLevelB)}
/>
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelB.tier
) as ComparisonLevel
}
/>
</div>
</div> </div>
<div className={styles.columnHeader}> {createComparison(selectedLevelA, selectedLevelB)}
<Select </div>
name={"benefitA"} <div className={styles.columns}>
label={"Level"} <div className={styles.firstColumn} />
items={levelOptions} <div className={styles.secondColumn} />
defaultSelectedKey={selectedLevelB.tier} <div className={styles.thirdColumn} />
onSelect={handleSelectChange(setSelectedLevelB)} <div className={styles.columnHeaderContainer}>
/> <div className={styles.columnHeader}>
<LevelSummary <Select
level={ name={"benefitA"}
levelsData.levels.find( label={"Level"}
(level) => level.tier === selectedLevelB.tier items={levelOptions}
) as ComparisonLevel defaultSelectedKey={selectedLevelA.tier}
} onSelect={handleSelectChange(setSelectedLevelA)}
/> />
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelA.tier
) as ComparisonLevel
}
/>
</div>
<div className={styles.columnHeader}>
<Select
name={"benefitA"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelB.tier}
onSelect={handleSelectChange(setSelectedLevelB)}
/>
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelB.tier
) as ComparisonLevel
}
/>
</div>
<div className={styles.columnHeader}>
<Select
name={"benefitC"}
label={"Level"}
items={levelOptions}
defaultSelectedKey={selectedLevelA.tier}
onSelect={handleSelectChange(setSelectedLevelA)}
/>
<LevelSummary
level={
levelsData.levels.find(
(level) => level.tier === selectedLevelA.tier
) as ComparisonLevel
}
/>
</div>
</div> </div>
</div> </div>
{createComparison(selectedLevelA, selectedLevelB)}
</div> </div>
</div> </>
) )
} }

62
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -32,6 +32,11 @@
} }
.columns { .columns {
display: none;
position: relative;
}
.mobileColumns {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
@@ -80,7 +85,7 @@
bottom: var(--Spacing-x2); bottom: var(--Spacing-x2);
} }
.leftColumn { .firstColumn {
background-color: var(--Main-Brand-PalePeach); background-color: var(--Main-Brand-PalePeach);
position: absolute; position: absolute;
top: 0; top: 0;
@@ -91,7 +96,7 @@
z-index: 1; z-index: 1;
} }
.rightColumn { .secondColumn {
background-color: var(--Base-Background-Normal); background-color: var(--Base-Background-Normal);
position: absolute; position: absolute;
position: absolute; position: absolute;
@@ -105,6 +110,18 @@
border-top-left-radius: var(--Corner-radius-Medium); border-top-left-radius: var(--Corner-radius-Medium);
} }
.thirdColumn {
width: calc(100% / 3);
background-color: var(--Main-Brand-PalePeach);
position: absolute;
top: 0;
bottom: 0;
left: calc(100% / 3 * 2);
right: 0;
margin-left: calc(var(--Spacing-x2) * -1);
z-index: 1;
}
.levelSummary { .levelSummary {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -197,3 +214,44 @@
font-size: var(--typography-Footnote-Regular-fontSize); font-size: var(--typography-Footnote-Regular-fontSize);
text-align: center; text-align: center;
} }
@media screen and (min-width: 950px) {
.container {
left: auto;
right: auto;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
width: auto;
}
.mobileColumns {
display: none;
}
.firstColumn {
width: calc((100%) / 3);
right: calc(100% / 3 * 2);
}
.secondColumn {
width: calc(100% / 3);
left: calc(100% / 3);
right: calc(100% / 3);
}
.thirdColumn {
width: calc(100% / 3);
left: calc(100% / 3 * 2);
right: 0;
}
.columnHeaderContainer {
grid-template-columns: 1fr 1fr 1fr;
}
.columns {
display: flex;
}
}