Fix webapp mobile layout

This commit is contained in:
daylily
2026-01-12 15:09:12 -06:00
parent 79b438623b
commit dfec24db24
11 changed files with 107 additions and 116 deletions
@@ -1,17 +1,17 @@
<script lang="ts">
import IconPending from '~icons/material-symbols/pending'
import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
import IconWarning from '~icons/material-symbols/warning'
import WriteButton from './WriteButton.svelte'
import IconPending from '~icons/material-symbols/pending'
import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
import IconWarning from '~icons/material-symbols/warning'
import WriteButton from './WriteButton.svelte'
import { getImageContext } from '$lib/contexts/image.svelte'
import { getImageContext } from '$lib/contexts/image.svelte'
const imageCtx = getImageContext()
const imageCtx = getImageContext()
let inProgress = $state(false)
let inProgress = $state(false)
</script>
<section class="row gap-2 max-lg:stack max-lg:items-stretch" aria-labelledby="write-section-label">
<section class="flex flex-col lg:flex-row gap-2" aria-labelledby="write-section-label">
<div class="grow">
<h2 class="font-semibold text-xl/8" id="write-section-label">Write pattern to device</h2>
@@ -19,7 +19,8 @@
{#if imageCtx.image === null}
<IconPending aria-hidden /> Select an image file in order to write it onto your device.
{:else if !inProgress}
<IconArrowUploadProgress aria-hidden /> Write the pattern onto your device if you have finished editing the image.
<IconArrowUploadProgress aria-hidden /> Write the pattern onto your device if you have finished
editing the image.
{:else}
<IconWarning aria-hidden /> Refresh in progress. Do not disconnect device.
{/if}