flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rework Shop nav and intro classes and styling

Browse Source 
- rename things and move styles around to make more sense
- quick nav past banner was somehow broken and would not appear past banner
This commit is contained in:
Félix Péault
2022-10-09 16:02:32 +02:00
parent 12327ecb1f
commit a19339b49d
3 changed files with 114 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/organisms/ShopBanner.svelte
View File

@@ -1,5 +1,5 @@
<style lang="scss">
@import "../../style/pages/shop/intro";
@import "../../style/pages/shop/banner";
</style>
<script lang="ts">
@@ -51,7 +51,7 @@
*/
const animation = timeline([
// Hero image
['.shop-page__background', {
['.shop-background', {
scale: [1.06, 1],
opacity: [0, 1],
z: 0,
@@ -61,7 +61,7 @@
}],
// Intro top elements
['.shop-page__intro .top > *', {
['.shop-banner .top > *', {
y: [-100, 0],
opacity: [0, 1],
}, {
@@ -70,7 +70,7 @@
}],
// Hero title
['.shop-page__title h1', {
['.shop-banner .title h1', {
y: [32, 0],
opacity: [0, 1],
}, {
@@ -78,7 +78,7 @@
}],
// Intro navbar
['.shop-page__nav .container > *, .shop-page__intro .button-cart', {
['.shop-banner .nav .container > *, .shop-banner .button-cart', {
y: [100, 0],
opacity: [0, 1],
}, {
@@ -108,7 +108,7 @@
<svelte:window bind:innerWidth />
<section class="shop-page__intro" bind:this={introEl}>
<section class="shop-banner" bind:this={introEl}>
<div class="top container">
<a href="/" class="back" data-sveltekit-noscroll>
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -118,11 +118,11 @@
</a>
</div>
<div class="shop-page__title">
<div class="title">
<h1 class="title-big-sans">Shop</h1>
</div>
<nav class="shop-page__nav">
<div class="nav">
<div class="container">
<p class="text-label">Choose a city</p>
<nav>
@@ -137,12 +137,12 @@
</ul>
</nav>
</div>
</nav>
</div>
<ButtonCart />
<Image
class="shop-page__background"
class="background"
id={shop.page_heroimage.id}
alt={shop.page_heroimage.alt}
sizeKey="hero"
@@ -155,7 +155,7 @@
/>
</section>
<nav class="shop-location"
<nav class="shop-quicknav"
class:is-visible={scrolledPastIntro}
class:is-overlaid={$cartOpen}
>

30
src/style/pages/_shop.scss
View File

@@ -1,8 +1,8 @@
.shop-page {
:global(.shop-page) {
position: relative;
// Error
&__error {
:global(.shop-page__error) {
padding: 64px 0;
background: $color-cream;
color: $color-text;
@@ -31,32 +31,6 @@
}
}
// Nav
:global(.shop-location) {
--inset: 20px;
display: flex;
position: fixed;
z-index: 20;
top: var(--inset);
left: var(--inset);
right: var(--inset);
justify-content: flex-end;
transform: translate3d(0, -88px, 0);
transition: transform 1s var(--ease-quart);
transition-delay: 100ms;
pointer-events: none;
@include bp (sm) {
--inset: 32px;
justify-content: space-between;
}
// Visible state
&.is-visible {
transform: translate3d(0,0,0);
}
}
// Notifications
:global(.notifications) {
position: fixed;

135
src/style/pages/shop/_intro.scss → src/style/pages/shop/_banner.scss
View File

@@ -1,7 +1,7 @@
/*
** Shop: Intro
** Shop: Intro banner
*/
.shop-page__intro {
.shop-banner {
position: relative;
z-index: 30;
height: 30vw;
@@ -70,8 +70,8 @@
}
}
// Site Title
.shop-page__title {
// Page title
.title {
position: absolute;
z-index: 2;
top: 42%;
@@ -98,56 +98,8 @@
}
}
// Background Image
:global(picture) {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
background-color: $color-primary-darker;
pointer-events: none;
user-select: none;
:global(img) {
opacity: 0.55;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
// Gradient
&:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(45, 4, 88, 0) 72.5%, #1E0538 100%);
}
}
// Cart button
:global(.button-cart) {
position: absolute;
z-index: 21;
top: 16px;
right: 16px;
@include bp (sm) {
top: auto;
bottom: 32px;
right: 32px;
}
}
}
// Intro: Navigation
.shop-page__nav {
// Navigation
.nav {
position: absolute;
z-index: 20;
bottom: 0;
@@ -221,4 +173,79 @@
}
}
}
}
// Background Image
:global(picture) {
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
background-color: $color-primary-darker;
pointer-events: none;
user-select: none;
:global(img) {
opacity: 0.55;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
// Gradient
&:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(45, 4, 88, 0) 72.5%, #1E0538 100%);
}
}
// Cart button
:global(.button-cart) {
position: absolute;
z-index: 21;
top: 16px;
right: 16px;
@include bp (sm) {
top: auto;
bottom: 32px;
right: 32px;
}
}
}
// Quick nav
.shop-quicknav {
--inset: 20px;
display: flex;
position: fixed;
z-index: 20;
top: var(--inset);
left: var(--inset);
right: var(--inset);
justify-content: flex-end;
transform: translate3d(0, -88px, 0);
transition: transform 1s var(--ease-quart);
transition-delay: 100ms;
pointer-events: none;
@include bp (sm) {
--inset: 32px;
justify-content: space-between;
}
// Visible state
&.is-visible {
transform: translate3d(0,0,0);
}
}