diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Avatar.svelte | 24 | ||||
| -rw-r--r-- | src/components/Feed.svelte | 26 |
2 files changed, 28 insertions, 22 deletions
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index 7ee774bf..f0b9768f 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -1,30 +1,30 @@ <script> import { colorTheme } from '$lib/store'; import { Icon } from '$comp'; + import { runner } from '$lib/utils'; export let user; export let size = 32; export let disabled = false; - export let src = undefined; $: s = size.toString(); $: link = user ? `/${user.username}` : '/'; + + let src = + '/api/public/' + + (user?.profile + ? user.username + '-profile.webp' + : 'runners/' + runner(user?.pubkey || parseInt(Math.random() * 255).toString(16))); </script> <a href={link} class:pointer-events-none={disabled}> <div class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center" > - {#if user?.profile} - <img - src={`/api/public/${user.username}-profile.webp`} - class="w-full h-full object-cover object-center overflow-hidden" - alt={user.username} - /> - {:else if src} - <img {src} class="w-full h-full object-cover object-center overflow-hidden" alt="Avatar" /> - {:else} - <Icon icon="logo-symbol-white" style="w-4/5" /> - {/if} + <img + {src} + class="w-full h-full object-cover object-center overflow-hidden" + alt={user.username} + /> </div> </a> diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte index 973afa19..9f09630a 100644 --- a/src/components/Feed.svelte +++ b/src/components/Feed.svelte @@ -5,12 +5,18 @@ import { runner } from '$lib/utils'; export let events; - let distance = (d) => { - let diff = Math.round(Date.now() / 1000) - d; - return diff > 3600 - ? Math.round(diff / 3600) + 'd' - : diff > 60 - ? Math.round(diff / 60) + 'm' + let distance = (date) => { + let m = 60; + let h = 60 * m; + let d = 24 * h; + + let diff = Math.round(Date.now() / 1000) - date; + return diff > d + ? Math.round(diff / d) + 'd' + : diff > h + ? Math.round(diff / h) + 'h' + : diff > m + ? Math.round(diff / m) + 'm' : diff > 2 ? diff + 's' : 'now'; @@ -24,20 +30,20 @@ {#if browser} <VirtualScroll data={events} key="id" let:data pageMode={true} estimateSize={200}> <div class="flex border-b py-4 text-sm lg:text-lg text-secondary" :key={data.id}> - <a href={`/${data.pubkey}`}> + <a href={`/${data.user.anon ? data.user.pubkey : data.user.username}`}> <div class="mb-auto mr-2"> <div class="md:hidden"> - <Avatar size={12} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} /> + <Avatar size={12} user={data.user} disabled={true} /> </div> <div class="hidden md:block"> - <Avatar size={20} src={`/api/public/runners/${runner(data.pubkey)}`} disabled={true} /> + <Avatar size={20} user={data.user} disabled={true} /> </div> </div> </a> <div class="grow" style={`max-width: ${w - 100}px`}> <div class="w-full flex pb-1 text-black"> - <div>{data.pubkey.substr(0, 6)}</div> + <div>{data.user.username}</div> <div class="text-secondary"> {distance(data.seen)}</div> </div> <div class="break-words"> |