make upload and metadata UI responsive on mobile.
Improve narrow-viewport layout for upload, About, and shell overflow; keep modal scroll without extra dismiss or a11y markup changes.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="flex min-h-48 flex-col rounded-lg border border-border bg-card">
|
||||
<header class="border-b border-border px-4 py-3">
|
||||
<header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
|
||||
<h2 class="text-sm font-medium text-card-foreground">Metadata Inspector</h2>
|
||||
<p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
|
||||
</header>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<pre
|
||||
class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
|
||||
class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed break-all whitespace-pre-wrap text-foreground"
|
||||
><slot /></pre>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<label class="flex flex-col gap-1.5 text-xs">
|
||||
<span class="font-medium text-muted-foreground">{{ label }}</span>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col gap-2 sm:flex-row">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 rounded-md border border-border px-3 py-2 text-xs font-medium transition-colors hover:bg-muted/60"
|
||||
class="shrink-0 rounded-md border border-border px-3 py-2.5 text-xs font-medium transition-colors hover:bg-muted/60 sm:py-2"
|
||||
@click="onCopyClick"
|
||||
>
|
||||
{{ copied ? 'Copied' : 'Copy' }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center bg-black/50 p-4 sm:items-center">
|
||||
<div v-if="open" class="fixed inset-0 z-50 flex items-end justify-center overflow-y-auto bg-black/50 p-4 sm:items-center">
|
||||
<div class="flex w-full max-w-lg flex-col rounded-lg border border-border bg-card shadow-lg">
|
||||
<header class="border-b border-border px-4 py-3">
|
||||
<h2 class="text-base font-medium text-card-foreground">
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
<div
|
||||
v-if="open && metadataErrorConfirmOpen"
|
||||
class="fixed inset-0 z-60 flex items-end justify-center bg-black/50 p-4 sm:items-center"
|
||||
class="fixed inset-0 z-60 flex items-end justify-center overflow-y-auto bg-black/50 p-4 sm:items-center"
|
||||
>
|
||||
<div class="flex w-full max-w-md flex-col rounded-lg border border-border bg-card shadow-lg">
|
||||
<header class="border-b border-border px-4 py-3">
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="flex w-full flex-col gap-3">
|
||||
<p class="mb-3 text-base text-muted-foreground">
|
||||
<p class="text-sm text-muted-foreground sm:text-base">
|
||||
Drop anywhere, paste or choose files. Max {{ maxQueueSize }} images, up to {{ maxImageSizeLabel }} each.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<label
|
||||
class="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90"
|
||||
class="inline-flex w-full items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90 sm:w-auto"
|
||||
:class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
|
||||
>
|
||||
Choose images
|
||||
@@ -24,7 +24,7 @@
|
||||
<button
|
||||
v-if="!uploadConfirmed"
|
||||
type="button"
|
||||
class="inline-flex shrink-0 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
class="inline-flex w-full shrink-0 items-center justify-center rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
|
||||
:disabled="!canOpenConfigure"
|
||||
@click="configureModalOpen = true"
|
||||
>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<li v-for="row in rows" :key="row.key">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/60"
|
||||
class="flex w-full items-start gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/60 sm:items-center sm:px-4"
|
||||
:class="isRowSelected(row) ? 'bg-muted/80' : ''"
|
||||
@click="emit('select', row.file)"
|
||||
>
|
||||
@@ -19,16 +19,22 @@
|
||||
class="h-10 w-10 shrink-0 rounded border border-border bg-muted/60"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium">{{ row.file.name }}</span>
|
||||
<span class="shrink-0 text-xs text-muted-foreground">
|
||||
{{ prettyBytes(row.file.size, { maximumFractionDigits: 1 }) }}
|
||||
</span>
|
||||
<span class="shrink-0 max-w-32 truncate text-xs sm:max-w-40" :class="metadataStatusClass(row.metadata)">
|
||||
{{ row.metadata.message }}
|
||||
</span>
|
||||
<span class="shrink-0 max-w-32 truncate text-xs sm:max-w-40" :class="uploadStatusClass(row.upload)">
|
||||
{{ row.upload.message }}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1 space-y-1">
|
||||
<div class="flex min-w-0 items-baseline justify-between gap-2">
|
||||
<span class="min-w-0 truncate text-sm font-medium">{{ row.file.name }}</span>
|
||||
<span class="shrink-0 text-xs text-muted-foreground">
|
||||
{{ prettyBytes(row.file.size, { maximumFractionDigits: 1 }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-col gap-0.5 text-xs sm:flex-row sm:flex-wrap sm:gap-x-3">
|
||||
<span class="min-w-0 truncate" :class="metadataStatusClass(row.metadata)">
|
||||
{{ row.metadata.message }}
|
||||
</span>
|
||||
<span class="min-w-0 truncate" :class="uploadStatusClass(row.upload)">
|
||||
{{ row.upload.message }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -52,12 +52,12 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<label class="flex flex-col gap-1.5 text-sm">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<label class="flex min-w-0 flex-col gap-1.5 text-sm">
|
||||
<span class="font-medium">Expiry</span>
|
||||
<select
|
||||
v-model="settings.expiryPreset"
|
||||
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-base"
|
||||
>
|
||||
<option v-for="option in expiryOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
@@ -65,11 +65,11 @@
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1.5 text-sm">
|
||||
<label class="flex min-w-0 flex-col gap-1.5 text-sm">
|
||||
<span class="font-medium">Max views</span>
|
||||
<select
|
||||
v-model="settings.maxViewsPreset"
|
||||
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-base"
|
||||
>
|
||||
<option v-for="option in maxViewsOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
@@ -92,7 +92,7 @@
|
||||
v-model="settings.password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="rounded-md border border-input bg-background px-3 py-2 text-sm"
|
||||
class="rounded-md border border-input bg-background px-3 py-2 text-base"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="flex min-h-48 flex-col rounded-lg border border-border bg-card">
|
||||
<header class="border-b border-border px-4 py-3">
|
||||
<header class="border-b border-border px-3 py-2.5 sm:px-4 sm:py-3">
|
||||
<h2 class="text-sm font-medium text-card-foreground">Share links</h2>
|
||||
<p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user