nobswebdev/private_image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make upload and metadata UI responsive on mobile.

Browse Source 
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:
nobswebdev
2026-10-30 16:23:09 +01:00
parent 938229eeea
commit bb08bb389f
20 changed files with 96 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/upload/UploadQueueList.vue
+17 -11
View File
@@ -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>