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

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

@@ -202,4 +202,18 @@
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);
}
}
}