userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Improve scrolling, discover page

Browse Source
This commit is contained in:
Jon Staab
2024-10-17 14:26:53 -07:00
parent 9c31b12d48
commit 4683fc4203
12 changed files with 90 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/discover/+page.svelte
+32 -39
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import {onMount} from "svelte"
import {derived} from 'svelte/store'
import Masonry from "svelte-bricks"
import {addToMapKey, dec, gt, inc} from "@welshman/lib"
import type {Relay} from "@welshman/app"
import {relays, createSearch} from "@welshman/app"
import {relays, createSearch, relaySelections} from "@welshman/app"
import {createScroller} from "@lib/html"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
@@ -53,13 +52,12 @@
},
})
$: results = relaySearch.searchOptions(term).slice(0, limit)
onMount(() => {
discoverRelays($memberships)
discoverRelays($relaySelections)
const scroller = createScroller({
element: element.closest(".overflow-auto")!,
element,
onScroll: () => {
limit += 20
},
@@ -80,45 +78,40 @@
<Icon icon="magnifer" />
<input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
</label>
<Masonry
animate={false}
items={results}
minColWidth={300}
maxColWidth={800}
gap={16}
idKey="url"
let:item={relay}>
{#each relaySearch.searchOptions(term).slice(0, limit) as relay (relay.url)}
<Button
class="card2 bg-alt flex flex-col gap-2 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
class="card2 bg-alt col-4 text-left shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]"
on:click={() => openSpace(relay.url)}>
<div class="flex gap-4 relative">
<div class="relative">
<div class="avatar relative">
<div
class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
{#if relay.profile?.icon}
<img alt="" src={relay.profile.icon} />
{:else}
<Icon icon="ghost" size={5} />
{/if}
<div class="col-2">
<div class="flex gap-4 relative">
<div class="relative">
<div class="avatar relative">
<div
class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
{#if relay.profile?.icon}
<img alt="" src={relay.profile.icon} />
{:else}
<Icon icon="ghost" size={5} />
{/if}
</div>
</div>
{#if getMembershipUrls($userMembership).includes(relay.url)}
<div
class="absolute -right-1 -top-1 tooltip h-5 w-5 rounded-full bg-primary"
data-tip="You are already a member of this space.">
<Icon icon="check-circle" class="scale-110" />
</div>
{/if}
</div>
<div>
<h2 class="text-xl ellipsize whitespace-nowrap">
<RelayName url={relay.url} />
</h2>
<p class="text-sm opacity-75">{relay.url}</p>
</div>
{#if getMembershipUrls($userMembership).includes(relay.url)}
<div
class="absolute -right-1 -top-1 tooltip h-5 w-5 rounded-full bg-primary"
data-tip="You are already a member of this space.">
<Icon icon="check-circle" class="scale-110" />
</div>
{/if}
</div>
<div>
<h2 class="text-xl ellipsize whitespace-nowrap">
<RelayName url={relay.url} />
</h2>
<p class="text-sm opacity-75">{relay.url}</p>
</div>
<RelayDescription url={relay.url} />
</div>
<RelayDescription url={relay.url} />
{#if gt($wotGraph.get(relay.url)?.size, 0)}
<div class="row-2 card2 card2-sm bg-alt">
Members:
@@ -126,5 +119,5 @@
</div>
{/if}
</Button>
</Masonry>
{/each}
</div>