Fix Photos grid bottom elements

This commit is contained in:
2021-10-05 23:40:25 +02:00
parent d0fedfcc80
commit 012dba9a6b
2 changed files with 14 additions and 4 deletions

View File

@@ -10,12 +10,12 @@
</script> </script>
{#if tag === 'button'} {#if tag === 'button'}
<button class={classes}> <button class={classes} on:click>
<slot /> <slot />
{text} {text}
</button> </button>
{:else if tag === 'a'} {:else if tag === 'a'}
<a href={url} class={classes}> <a href={url} class={classes} on:click>
<slot /> <slot />
<span>{text}</span> <span>{text}</span>
</a> </a>

View File

@@ -67,6 +67,15 @@
filtered = false filtered = false
filterCountry = defaultCountry filterCountry = defaultCountry
filterSort = defaultSort filterSort = defaultSort
/**
* Load more photos from CTA
*/
const loadMorePhotos = () => {
console.log('load more photos')
// TODO: Append more photos from API including options and page
} }
</script> </script>
@@ -158,9 +167,10 @@
<div class="controls grid"> <div class="controls grid">
<p class="controls__date">Last updated: 4 days ago</p> <p class="controls__date">Last updated: 4 days ago</p>
<Button url="#" text="See more photos" /> <Button text="See more photos" tag="button" on:click={loadMorePhotos} />
<div class="controls__count"> <div class="controls__count">
<span class="current">21/</span> <span class="current">21</span>
<span>/</span>
<span class="total">129</span> <span class="total">129</span>
</div> </div>
</div> </div>