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

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

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