diff options
| author | Adam Soltys <[email protected]> | 2022-12-20 13:20:41 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2022-12-20 13:20:41 -0800 |
| commit | 4b3cf3b3e2b40d3cb3dd2bf8b3bf3afe3e77249a (patch) | |
| tree | 15bb2ab8fe41995c12407e4b328a115ee12251ca | |
| parent | f97af62e050ac4f1ecac42a5aac32406fd1e3d00 (diff) | |
| download | coinos-ui-4b3cf3b3e2b40d3cb3dd2bf8b3bf3afe3e77249a.tar.gz coinos-ui-4b3cf3b3e2b40d3cb3dd2bf8b3bf3afe3e77249a.zip | |
max w
| -rw-r--r-- | src/routes/(app)/feed/+page.svelte | 44 |
1 files changed, 24 insertions, 20 deletions
diff --git a/src/routes/(app)/feed/+page.svelte b/src/routes/(app)/feed/+page.svelte index d5846533..93fe47e7 100644 --- a/src/routes/(app)/feed/+page.svelte +++ b/src/routes/(app)/feed/+page.svelte @@ -16,33 +16,37 @@ $: sorted = Object.values($events) .filter((ev) => ev?.pubkey) .sort((a, b) => b.seen - a.seen); + + let w; </script> -<div class="mt-24 mb-20"> +<svelte:window bind:innerWidth={w} /> + +<div class="mb-20"> <div class="container w-full mx-auto text-lg px-4 md:max-w-2xl space-y-5"> - <div class="vs"> - {#if browser} - <VirtualScroll data={sorted} key="id" let:data pageMode={true}> - <div class="flex border-b py-4" :key={data.id} use:fade> - <div class="mb-auto mr-2"> - <div class="md:hidden"> - <Avatar size={12} src={`/api/public/runners/${runner()}`} /> - </div> - <div class="hidden md:block"> - <Avatar size={20} src={`/api/public/runners/${runner()}`} /> - </div> + {#if browser} + <VirtualScroll data={sorted} key="id" let:data pageMode={true} estimateSize={200}> + <div class="flex border-b py-4 text-sm text-secondary" :key={data.id} use:fade> + <div class="mb-auto mr-2"> + <div class="md:hidden"> + <Avatar size={12} src={`/api/public/runners/${runner()}`} /> + </div> + <div class="hidden md:block"> + <Avatar size={20} src={`/api/public/runners/${runner()}`} /> </div> + </div> - <div class="text-secondary break-words w-full"> - <div class="w-full flex text-sm pb-1"> - <div class="text-black">{data.pubkey.substr(0, 6)}</div> - <div class="ml-auto text-sm">{format(new Date(data.seen * 1000), 'h:mm aaa')}</div> - </div> + <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 class="ml-auto">{format(new Date(data.seen * 1000), 'h:mm aaa')}</div> + </div> + <div class="break-words"> {data.content} </div> </div> - </VirtualScroll> - {/if} - </div> + </div> + </VirtualScroll> + {/if} </div> </div> |