forked from coracle/flotilla
Move away from fixed positioned page elements because they act squirrely on android
This commit is contained in:
Jon Staab
@@ -37,7 +37,7 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<Page class="cw-full">
|
||||
<Page>
|
||||
<ContentSearch>
|
||||
{#snippet input()}
|
||||
<label class="row-2 input input-bordered">
|
||||
|
||||
@@ -180,8 +180,8 @@
|
||||
})
|
||||
</script>
|
||||
|
||||
<Page class="cw-full">
|
||||
<PageBar class="cw-full">
|
||||
<Page>
|
||||
<PageBar>
|
||||
{#if showSearch}
|
||||
<label class="input input-bordered input-sm flex flex-1 items-center gap-2" in:fly>
|
||||
<Icon icon={Magnifier} />
|
||||
@@ -218,7 +218,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</PageBar>
|
||||
<PageContent class="cw-full flex flex-col gap-2 p-2 pt-4">
|
||||
<PageContent class="flex flex-col gap-2 p-2 pt-4">
|
||||
<div class="flex flex-col gap-2" bind:this={element}>
|
||||
{#each PLATFORM_RELAYS as url (url)}
|
||||
<Button
|
||||
|
||||
@@ -22,10 +22,10 @@
|
||||
<svelte:window bind:innerWidth={width} />
|
||||
|
||||
{#if width <= md}
|
||||
<div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-4">
|
||||
<div class="ml-sai mt-sai mb-sai relative z-nav w-14 flex-shrink-0 bg-base-200 pt-2">
|
||||
<PrimaryNavSpaces />
|
||||
</div>
|
||||
<SecondaryNav class="!flex !min-h-0 !w-auto flex-grow pb-4">
|
||||
<SecondaryNav class="!flex !w-auto flex-grow pb-16">
|
||||
<SpaceMenu {url} />
|
||||
</SecondaryNav>
|
||||
{/if}
|
||||
|
||||
@@ -216,104 +216,100 @@
|
||||
<strong>Recent Activity</strong>
|
||||
{/snippet}
|
||||
{#snippet action()}
|
||||
<div>
|
||||
<button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={openSearch}>
|
||||
<Icon size={4} icon={Magnifier} />
|
||||
</button>
|
||||
{#if showSearch}
|
||||
<button class="fixed inset-0 z-feature" aria-label="Close search" onclick={closeSearch}
|
||||
></button>
|
||||
<div class="fixed cw top-0 right-0 z-feature p-2">
|
||||
<div
|
||||
class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
|
||||
transition:fly={{y: -40, duration: 150}}>
|
||||
<div class="flex justify-between">
|
||||
<strong>Search</strong>
|
||||
<Button onclick={clearSearch}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</div>
|
||||
<label class="input input-sm input-bordered flex w-full items-center gap-2">
|
||||
<Icon size={4} icon={Magnifier} />
|
||||
<input
|
||||
bind:this={searchInput}
|
||||
bind:value={term}
|
||||
class="min-w-0 grow"
|
||||
type="text"
|
||||
placeholder="Search this space..."
|
||||
oninput={onInput} />
|
||||
</label>
|
||||
<div class="max-h-[65vh] overflow-y-auto">
|
||||
{#if !term}
|
||||
<p class="text-sm opacity-70">Search for content across this space.</p>
|
||||
{:else if loading}
|
||||
<p class="text-sm opacity-70">Searching...</p>
|
||||
{:else if resultsByAge.size === 0}
|
||||
<p class="text-sm opacity-70">No results found.</p>
|
||||
{:else}
|
||||
<div class="col-2">
|
||||
{#each resultsByAge as [key, events] (key)}
|
||||
<button class="btn btn-neutral btn-sm btn-square" aria-label="Search" onclick={openSearch}>
|
||||
<Icon size={4} icon={Magnifier} />
|
||||
</button>
|
||||
{#if showSearch}
|
||||
<button class="fixed inset-0 z-feature" aria-label="Close search" onclick={closeSearch}
|
||||
></button>
|
||||
<div class="fixed top-sai right-sai left-content z-feature p-2">
|
||||
<div
|
||||
class="card2 card2-sm bg-alt flex flex-col gap-2 shadow-md"
|
||||
transition:fly={{y: -40, duration: 150}}>
|
||||
<div class="flex justify-between">
|
||||
<strong>Search</strong>
|
||||
<Button onclick={clearSearch}>
|
||||
<Icon icon={CloseCircle} />
|
||||
</Button>
|
||||
</div>
|
||||
<label class="input input-sm input-bordered flex w-full items-center gap-2">
|
||||
<Icon size={4} icon={Magnifier} />
|
||||
<input
|
||||
bind:this={searchInput}
|
||||
bind:value={term}
|
||||
class="min-w-0 grow"
|
||||
type="text"
|
||||
placeholder="Search this space..."
|
||||
oninput={onInput} />
|
||||
</label>
|
||||
<div class="max-h-[65vh] overflow-y-auto">
|
||||
{#if !term}
|
||||
<p class="text-sm opacity-70">Search for content across this space.</p>
|
||||
{:else if loading}
|
||||
<p class="text-sm opacity-70">Searching...</p>
|
||||
{:else if resultsByAge.size === 0}
|
||||
<p class="text-sm opacity-70">No results found.</p>
|
||||
{:else}
|
||||
<div class="col-2">
|
||||
{#each resultsByAge as [key, events] (key)}
|
||||
<div class="col-2">
|
||||
<p class="text-xs uppercase tracking-wide opacity-60">
|
||||
{#if key === "day"}
|
||||
Last 24 Hours
|
||||
{:else if key === "week"}
|
||||
Last 7 Days
|
||||
{:else}
|
||||
Older
|
||||
{/if}
|
||||
</p>
|
||||
<div class="col-2">
|
||||
<p class="text-xs uppercase tracking-wide opacity-60">
|
||||
{#if key === "day"}
|
||||
Last 24 Hours
|
||||
{:else if key === "week"}
|
||||
Last 7 Days
|
||||
{:else}
|
||||
Older
|
||||
{/if}
|
||||
</p>
|
||||
<div class="col-2">
|
||||
{#each events as event (event.id)}
|
||||
<button
|
||||
class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
|
||||
onclick={() => onResultClick(event)}>
|
||||
<p class="line-clamp-2 text-sm">
|
||||
{event.content.trim() ||
|
||||
getTagValue("title", event.tags) ||
|
||||
"(No text content)"}
|
||||
</p>
|
||||
<div class="row-2 text-xs opacity-70">
|
||||
<span>{getAgeLabel(event.created_at)}</span>
|
||||
<span>{formatTimestampAsDate(event.created_at)}</span>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#each events as event (event.id)}
|
||||
<button
|
||||
class="card2 bg-alt card2-sm col-2 transition-colors hover:bg-base-200 text-left"
|
||||
onclick={() => onResultClick(event)}>
|
||||
<p class="line-clamp-2 text-sm">
|
||||
{event.content.trim() ||
|
||||
getTagValue("title", event.tags) ||
|
||||
"(No text content)"}
|
||||
</p>
|
||||
<div class="row-2 text-xs opacity-70">
|
||||
<span>{getAgeLabel(event.created_at)}</span>
|
||||
<span>{formatTimestampAsDate(event.created_at)}</span>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</SpaceBar>
|
||||
|
||||
<div bind:this={element}>
|
||||
<PageContent class="flex flex-col gap-2 p-2 pt-4">
|
||||
{#if $recentActivity.length === 0}
|
||||
<p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
|
||||
{:else}
|
||||
{#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
|
||||
{#if type === "message"}
|
||||
<RecentConversation {url} {event} {count} />
|
||||
{:else if event.kind === THREAD}
|
||||
<ThreadItem {url} {event} />
|
||||
{:else if event.kind === CLASSIFIED}
|
||||
<ClassifiedItem {url} {event} />
|
||||
{:else if event.kind === ZAP_GOAL}
|
||||
<GoalItem {url} {event} />
|
||||
{:else if event.kind === EVENT_TIME}
|
||||
<CalendarEventItem {url} {event} />
|
||||
{:else if event.kind === Poll}
|
||||
<PollItem {url} {event} />
|
||||
{:else}
|
||||
<NoteItem {url} {event} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</PageContent>
|
||||
</div>
|
||||
<PageContent class="flex flex-col gap-2 p-2 pt-4" bind:element>
|
||||
{#if $recentActivity.length === 0}
|
||||
<p class="flex flex-col items-center py-20 text-center">No recent activity found!</p>
|
||||
{:else}
|
||||
{#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
|
||||
{#if type === "message"}
|
||||
<RecentConversation {url} {event} {count} />
|
||||
{:else if event.kind === THREAD}
|
||||
<ThreadItem {url} {event} />
|
||||
{:else if event.kind === CLASSIFIED}
|
||||
<ClassifiedItem {url} {event} />
|
||||
{:else if event.kind === ZAP_GOAL}
|
||||
<GoalItem {url} {event} />
|
||||
{:else if event.kind === EVENT_TIME}
|
||||
<CalendarEventItem {url} {event} />
|
||||
{:else if event.kind === Poll}
|
||||
<PollItem {url} {event} />
|
||||
{:else}
|
||||
<NoteItem {url} {event} />
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</PageContent>
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
import PageContent from "@lib/components/PageContent.svelte"
|
||||
</script>
|
||||
|
||||
<Page class="cw-full">
|
||||
<PageContent class="cw-full flex flex-col items-center gap-2 p-2 pt-4">
|
||||
<Page>
|
||||
<PageContent class="flex flex-col items-center gap-2 p-2 pt-4">
|
||||
<PageHeader>
|
||||
{#snippet title()}
|
||||
<div>Create your own Space</div>
|
||||
|
||||
Reference in New Issue
Block a user