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

Add Newsletter module when reached end on Location page

Browse Source
This commit is contained in:
Félix Péault
2021-10-10 14:20:21 +02:00
parent 4a51fa9d09
commit e44f51c0c4
2 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/[country]/[location]/index.svelte
View File

@@ -8,6 +8,7 @@
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import IconEarth from '$components/atoms/IconEarth.svelte' import IconEarth from '$components/atoms/IconEarth.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
export let data: any export let data: any
export let photos: any[] export let photos: any[]
@@ -169,7 +170,7 @@
</section> </section>
<section class="location-page__next"> <section class="location-page__next">
<div class="pagination" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}> <div class="pagination container" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}>
<div class="pagination__progress"> <div class="pagination__progress">
<span class="current">{currentPhotosAmount}</span> <span class="current">{currentPhotosAmount}</span>
<span>/</span> <span>/</span>
@@ -178,7 +179,10 @@
{#if !ended} {#if !ended}
<p class="pagination__more">See more photos</p> <p class="pagination__more">See more photos</p>
{:else} {:else}
<p>You've seen it all!</p> <p class="pagination__message">You've seen it all!</p>
<div class="container"></div>
<Newsletter theme="light" />
{/if} {/if}
</div> </div>
</section> </section>

26
src/style/pages/_location.scss
View File

@@ -146,10 +146,26 @@
// Next photos section // Next photos section
&__next { &__next {
margin-top: -120px; margin-top: 80px;
padding: 240px 0 104px; padding: 64px 0 48px;
background-color: $color-tertiary; background-color: $color-tertiary;
text-align: center; text-align: center;
@include bp (sm) {
margin-top: -120px;
padding-top: 240px;
padding-bottom: 104px;
}
// Newsletter block
.newsletter {
max-width: 600px;
margin: 56px auto 0;
@include bp (sm) {
margin-top: 72px;
}
}
} }
// Pagination // Pagination
@@ -162,7 +178,7 @@
&__progress { &__progress {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-size: rem(160px); font-size: clamp(80px, 16vw, #{rem(160px)});
color: rgba($color-text, 0.2); color: rgba($color-text, 0.2);
font-family: $font-serif; font-family: $font-serif;
font-weight: 200; font-weight: 200;
@@ -174,7 +190,7 @@
margin: 0 -10px; margin: 0 -10px;
} }
} }
p { & > p {
display: block; display: block;
margin: 16px auto 0; margin: 16px auto 0;
text-align: center; text-align: center;
@@ -186,7 +202,7 @@
font-size: rem(14px); font-size: rem(14px);
} }
&__more { &__more {
color: $color-secondary; color: $color-secondary !important;
} }
// Disabled state // Disabled state