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

Show message when no photos are available on Location

Browse Source
This commit is contained in:
Félix Péault
2021-10-12 17:12:33 +02:00
parent 759dbaf7b3
commit 56c523679b
2 changed files with 66 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,56 +145,65 @@
<div class="location-page__illustration" /> <div class="location-page__illustration" />
</section> </section>
<section class="location-page__houses grid"> {#if photos.length}
{#each photos as { title, image: { id, title: alt }, slug, date_taken }, index} <section class="location-page__houses grid">
<div class="house grid"> {#each photos as { title, image: { id, title: alt }, slug, date_taken }, index}
<div class="house__info"> <div class="house grid">
<a href="/{params.country}/{params.location}/{slug}"> <div class="house__info">
<h2 class="title-image"> <a href="/{params.country}/{params.location}/{slug}">
{title} <h2 class="title-image">
</h2> {title}
<time class="text-date" datetime={dayjs(date_taken).format('YYYY-MM-DD')}> </h2>
{dayjs(date_taken).format('MMMM, Do YYYY')} <time class="text-date" datetime={dayjs(date_taken).format('YYYY-MM-DD')}>
</time> {dayjs(date_taken).format('MMMM, Do YYYY')}
</time>
</a>
</div>
<a class="house__photo" href="/{params.country}/{params.location}/{slug}">
<Image
id={id}
alt="{alt}"
width={1280}
height={853}
class="shadow-photo"
/>
<span class="house__index title-index">
{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
</span>
</a> </a>
</div> </div>
<a class="house__photo" href="/{params.country}/{params.location}/{slug}"> {/each}
<Image </section>
id={id}
alt="{alt}"
width={1280}
height={853}
class="shadow-photo"
/>
<span class="house__index title-index">
{(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
</span>
</a>
</div>
{/each}
</section>
<section class="location-page__next"> <section class="location-page__next">
<div class="container"> <div class="container">
<div class="pagination" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}> <div class="pagination" 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>
<span class="total">{totalPhotos}</span> <span class="total">{totalPhotos}</span>
{#if !ended} {#if !ended}
<p class="pagination__more">See more photos</p> <p class="pagination__more">See more photos</p>
{:else} {:else}
<p class="pagination__message">You've seen it all!</p> <p class="pagination__message">You've seen it all!</p>
{/if} {/if}
</div>
</div> </div>
</div>
{#if ended} {#if ended}
<Newsletter theme="light" /> <Newsletter theme="light" />
{/if} {/if}
</div>
</section>
{:else}
<div class="location-page__message">
<p>
No photos available for {data.name}.<br>
Come back later!
</p>
</div> </div>
</section> {/if}
</main> </main>

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

@@ -202,4 +202,18 @@
cursor: not-allowed; cursor: not-allowed;
} }
} }
// Message
&__message {
padding: clamp(96px, 24vw, 360px) 0 clamp(96px, 16vw, 280px);
text-align: center;
color: $color-text;
font-size: rem(24px);
font-weight: 200;
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
}
}
} }