Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: feed end indicator (2) #385

Merged
merged 3 commits into from
Aug 2, 2024
Merged

feat: feed end indicator (2) #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4b0d8d
feat-feed-indicator
sevonj Jul 26, 2024
f561670
endfeed translation
sevonj Aug 1, 2024
4f52f2c
misc: add a scroll to top button
Xyphyn Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion src/lib/components/lemmy/post/feed/VirtualFeed.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import { Badge, Button } from 'mono-svelte'
import {
ArchiveBox,
ChevronDoubleUp,
ExclamationTriangle,
Icon,
Minus,
Expand All @@ -36,6 +37,7 @@
import { t } from '$lib/translations'
import InfiniteScroll from 'svelte-infinite-scroll'
import type { Readable } from 'svelte/motion'
import EndPlaceholder from '$lib/components/ui/EndPlaceholder.svelte'

export let posts: PostView[]
export let community: boolean = false
Expand Down Expand Up @@ -222,7 +224,7 @@
bind:this={virtualItemEls[index]}
data-index={row.index}
class="relative post-container"
in:fly={{ y: -16, easing: expoOut, duration: 500, opacity: 0 }}
in:fly={{ y: -16, easing: expoOut, duration: 500, opacity: 0 }}
>
{#if posts[row.index]}
<Post
Expand Down Expand Up @@ -274,6 +276,19 @@
<div class="w-24 h-8"></div>
</div>
</div>
{:else}
<div style="border-top-width: 0">
<EndPlaceholder>
{$t('routes.frontpage.endFeed', {
// @ts-ignore
community_name: feedData.community_name ?? 'undefined',
})}
<Button slot="action" color="tertiary">
<Icon src={ChevronDoubleUp} size="16" micro slot="prefix" />
{$t('routes.post.scrollToTop')}
</Button>
</EndPlaceholder>
</div>
{/if}
<InfiniteScroll window threshold={1000} on:loadMore={loadMore} />
{/if}
Expand Down
7 changes: 4 additions & 3 deletions src/lib/components/ui/EndPlaceholder.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<div
class="flex flex-row items-center text-sm text-slate-600 dark:text-zinc-400 gap-2"
class="flex flex-col sm:flex-row items-center
text-sm text-slate-600 dark:text-zinc-400 gap-2"
>
<span class="font-medium">
<span class="font-medium text-center sm:text-left">
<slot />
</span>
<hr class="border-slate-200 flex-1 dark:border-zinc-800" />
<hr class="border-slate-200 sm:flex-1 w-full dark:border-zinc-800" />
<slot name="action" />
</div>
3 changes: 2 additions & 1 deletion src/lib/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,8 @@
"routes": {
"frontpage": {
"title": "Frontpage",
"footer": "{{users:number}} active {{users; 1:user; default:users;}}"
"footer": "{{users:number}} active {{users; 1:user; default:users;}}",
"endFeed": "You have reached the end of {{community_name; undefined:the feed.; default:{{community_name}}.}}"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the cleanest way I could come up with.

I put it under routes.frontpage since that's where the old footer is too.
image

},
"modlog": "Modlog",
"instances": "Instances",
Expand Down