matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Stack the hosting relay row and corner its alert dismiss on mobile

Browse source
This commit is contained in:
Coracle-Bot 2026-09-11 16:20:39 +00:00 committed by hodlbod
parent cfae0a105c
commit 32e46da440
2 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/app/components/hosting/BillingPrompts.svelte
View file

@ -70,19 +70,30 @@
})
</script>
{#snippet card(className: string, icon: string, message: string, actions: Snippet)}
<div
class={cx(
"card card-sm flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
className,
)}>
<div class="flex min-w-0 items-start gap-3">
<Icon {icon} size={5} class="mt-0.5 shrink-0" />
{#snippet card(
className: string,
icon: string,
message: string,
actions: Snippet,
dismiss?: () => void,
)}
<div class={cx("card card-sm flex items-start gap-3", className)}>
<Icon {icon} size={5} class="mt-0.5 shrink-0" />
<div
class="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<p class="min-w-0 text-sm">{message}</p>
<div class="flex shrink-0 items-center gap-2">
{@render actions()}
</div>
</div>
<div class="flex shrink-0 items-center gap-2">
{@render actions()}
</div>
{#if dismiss}
<Button
class="button button-link button-sm -mt-1 shrink-0"
aria-label="Dismiss"
onclick={dismiss}>
<Icon icon={Close} size={4} />
</Button>
{/if}
</div>
{/snippet}
@ -112,9 +123,6 @@
{#snippet autopayActions()}
<Button class="button button-sm button-primary" onclick={setUpNwc}>Set up autopay</Button>
<Button class="button button-link button-sm" aria-label="Dismiss" onclick={dismissAutopay}>
<Icon icon={Close} size={4} />
</Button>
{/snippet}
{#if tenant}
@ -152,6 +160,7 @@
InfoCircle,
"Set up automatic payments so your subscription renews without interruption.",
autopayActions,
dismissAutopay,
)}
{/if}
{/if}

16
src/app/components/hosting/RelayListItem.svelte
View file

@ -19,13 +19,15 @@
const href = $derived(makeSpacePath(getHostedRelayUrl(relay), "admin"))
</script>
<div class="flex flex-row items-center justify-between gap-3 {className}">
<ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium">{name}</p>
<p class="truncate text-xs opacity-75">{host}</p>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 {className}">
<div class="flex min-w-0 flex-1 items-center gap-3">
<ImageIcon size={8} alt="" class="rounded-xl" src={relay.info_icon || Server} />
<div class="min-w-0">
<p class="truncate text-sm font-medium">{name}</p>
<p class="truncate text-xs opacity-75">{host}</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-2">
<div class="flex flex-wrap items-center gap-2">
{#if relay.sync_error}
<Badge variant="warning" title={relay.sync_error}>Failed to sync</Badge>
{:else}
@ -36,6 +38,6 @@
<Badge variant={relay.plan_id === "free" ? "neutral" : "primary"}>
{ucFirst(relay.plan_id)}
</Badge>
<Link class="button button-neutral button-sm ml-auto" {href}>Manage</Link>
</div>
<Link class="button button-neutral button-sm shrink-0" {href}>Manage</Link>
</div>