azalea/inkclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make write section sticky

Browse Source
This commit is contained in:
daylily
2026-01-15 18:24:51 -04:00
parent a7104e204b
commit a6e1dbdf62
7 changed files with 56 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/lib/layouts/write/WriteSection.svelte
+30 -15
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { Separator } from '$lib/components/ui/separator'
import { getImageContext } from '$lib/contexts/image.svelte'
import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
import IconPending from '~icons/material-symbols/pending'
@@ -10,22 +11,36 @@ const imageCtx = getImageContext()
let inProgress = $state(false)
</script>
<section class="flex flex-col gap-2 lg:flex-row" aria-labelledby="write-section-label">
<div class="grow">
<h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>
<section aria-labelledby="write-section-label">
<Separator decorative />
<div class="stack-h gap-1 text-sm" aria-live="polite">
{#if imageCtx.image === null}
<IconPending class="mt-0.5 shrink-0" aria-hidden /> Select an image file in order to write it
onto your device.
{:else if !inProgress}
<IconArrowUploadProgress class="mt-0.5 shrink-0" aria-hidden /> Write the pattern onto your device
if you have finished editing the image.
{:else}
<IconWarning class="mt-0.5 shrink-0" aria-hidden /> Refresh in progress. Do not disconnect device.
{/if}
<div class="mx-6 mt-4 mb-6 stack gap-2 lg:row xl:mx-0">
<div class="grow">
<h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>
<div class="stack-h gap-1 text-sm" aria-live="polite">
{#if imageCtx.image === null}
<IconPending class="mt-0.5 shrink-0" aria-hidden /> Select an image file in order to write it
onto your device.
{:else if !inProgress}
<IconArrowUploadProgress class="mt-0.5 shrink-0" aria-hidden /> Write the pattern onto your
device if you have finished editing the image.
{:else}
<IconWarning class="mt-0.5 shrink-0" aria-hidden /> Refresh in progress. Do not disconnect device.
{/if}
</div>
</div>
</div>
<WriteButton onprogress={v => (inProgress = v)} />
<WriteButton onprogress={v => (inProgress = v)} />
</div>
</section>
<style>
/* @media (display-mode: standalone) { */
section {
position: sticky;
bottom: 0;
background: var(--color-background);
}
/* } */
</style>