55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<v-container fluid class="py-6">
|
|
<div class="fc-showcase__head">
|
|
<h1 class="fc-h1">Showcase</h1>
|
|
<v-btn
|
|
prepend-icon="mdi-shuffle-variant" variant="tonal" color="accent"
|
|
:loading="store.loading" @click="store.shuffle()"
|
|
>Shuffle</v-btn>
|
|
</div>
|
|
|
|
<v-alert v-if="store.error" type="error" variant="tonal" closable class="my-4">
|
|
Failed to load: {{ store.error }}
|
|
</v-alert>
|
|
<v-alert v-else-if="store.isEmpty" type="info" variant="tonal" class="my-4">
|
|
No images yet.
|
|
</v-alert>
|
|
|
|
<MasonryGrid
|
|
:items="store.images"
|
|
:loading="store.loading"
|
|
:has-more="store.hasMore"
|
|
@load-more="store.fetchPage()"
|
|
@open="openImage"
|
|
/>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useShowcaseStore } from '../stores/showcase.js'
|
|
import MasonryGrid from '../components/discovery/MasonryGrid.vue'
|
|
|
|
const store = useShowcaseStore()
|
|
const router = useRouter()
|
|
|
|
onMounted(() => { if (store.images.length === 0) store.fetchPage() })
|
|
|
|
function openImage(id) {
|
|
router.push({ name: 'gallery', query: { image: id } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-h1 {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 32px; font-weight: 500;
|
|
color: rgb(var(--v-theme-on-surface));
|
|
}
|
|
.fc-showcase__head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|