versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: 🔥 Remove extraneous div on timeline renderer

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-15 16:19:28 +01:00
parent aa61f28004
commit 8575afd632
No known key found for this signature in database
1 changed files with 38 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
components/timelines/timeline.vue
View file

@ -1,48 +1,45 @@
<!-- Timeline.vue -->
<template>
<div class="timeline rounded">
<TransitionGroup name="timeline-item" tag="div"
class="timeline-items *:rounded space-y-4 *:border">
<TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
@delete="removeItem" />
</TransitionGroup>
<TransitionGroup name="timeline-item" tag="div" class="timeline-items *:rounded space-y-4 *:border">
<TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
@delete="removeItem" />
</TransitionGroup>
<div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
<Loader class="size-8 animate-spin" />
</div>
<div v-if="error" class="timeline-error">
{{ error.message }}
</div>
<!-- If there are some posts, but the user scrolled to the end -->
<Card v-if="hasReachedEnd && items.length > 0" class="shadow-none bg-transparent border-none p-4">
<CardHeader class="text-center gap-y-4">
<CardTitle>{{ m.steep_suave_fish_snap() }}</CardTitle>
<CardDescription>
{{ m.muddy_bland_shark_accept() }}
</CardDescription>
</CardHeader>
</Card>
<!-- If there are no posts at all -->
<Card v-else-if="hasReachedEnd && items.length === 0" class="shadow-none bg-transparent border-none p-4">
<CardHeader class="text-center gap-y-4">
<CardTitle>{{ m.fine_arable_lemming_fold() }}</CardTitle>
<CardDescription>
{{ m.petty_honest_fish_stir() }}
</CardDescription>
</CardHeader>
</Card>
<div v-else-if="!infiniteScroll.value" class="py-10 px-4">
<Button variant="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
{{ m.gaudy_bland_gorilla_talk() }}
</Button>
</div>
<div v-else ref="loadMoreTrigger" class="h-20"></div>
<div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
<Loader class="size-8 animate-spin" />
</div>
<div v-if="error" class="timeline-error">
{{ error.message }}
</div>
<!-- If there are some posts, but the user scrolled to the end -->
<Card v-if="hasReachedEnd && items.length > 0" class="shadow-none bg-transparent border-none p-4">
<CardHeader class="text-center gap-y-4">
<CardTitle>{{ m.steep_suave_fish_snap() }}</CardTitle>
<CardDescription>
{{ m.muddy_bland_shark_accept() }}
</CardDescription>
</CardHeader>
</Card>
<!-- If there are no posts at all -->
<Card v-else-if="hasReachedEnd && items.length === 0" class="shadow-none bg-transparent border-none p-4">
<CardHeader class="text-center gap-y-4">
<CardTitle>{{ m.fine_arable_lemming_fold() }}</CardTitle>
<CardDescription>
{{ m.petty_honest_fish_stir() }}
</CardDescription>
</CardHeader>
</Card>
<div v-else-if="!infiniteScroll.value" class="py-10 px-4">
<Button variant="secondary" @click="loadNext" :disabled="isLoading" class="w-full">
{{ m.gaudy_bland_gorilla_talk() }}
</Button>
</div>
<div v-else ref="loadMoreTrigger" class="h-20"></div>
</template>
<script lang="ts" setup>