Scroll a long file list on the download page on its own
A share with hundreds of files made the download page as tall as its list, so the recipient scrolled far past the buttons. The list now sits in .share-file-list, capped at min(32rem, 60dvh) with its own scroll, as the upload page's selected-files list already is; the download buttons stay on the first screen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
63bae2d1a6
commit
6c3202a0cf
@@ -94,25 +94,27 @@
|
||||
})"
|
||||
x-on:beforeunload.window="warnBeforeLeaving($event)"
|
||||
>
|
||||
<x-list :label="__('Shared Files')">
|
||||
@foreach ($files as $file)
|
||||
<x-list-item
|
||||
:title="$file->relative_path ?: $file->original_name"
|
||||
icon="description"
|
||||
wire:key="file-{{ $file->id }}"
|
||||
>
|
||||
<x-slot:description><span class="md-tabular">{{ Number::fileSize($file->file_size) }}</span></x-slot:description>
|
||||
<x-slot:end>
|
||||
<x-row gap="space100">
|
||||
<span x-show="isDone({{ $file->id }})" x-cloak data-test="file-downloaded">
|
||||
<x-icon name="download_done" class="md-ink-success" :label="__('Downloaded')" />
|
||||
</span>
|
||||
<x-button icon="download" :link="route('share.download.file', [$share, $file])" no-wire-navigate :aria-label="__('Download :name', ['name' => $file->original_name])" x-on:click="downloaded = true; markDone({{ $file->id }})" />
|
||||
</x-row>
|
||||
</x-slot:end>
|
||||
</x-list-item>
|
||||
@endforeach
|
||||
</x-list>
|
||||
<div class="share-file-list" data-test="share-file-list">
|
||||
<x-list :label="__('Shared Files')">
|
||||
@foreach ($files as $file)
|
||||
<x-list-item
|
||||
:title="$file->relative_path ?: $file->original_name"
|
||||
icon="description"
|
||||
wire:key="file-{{ $file->id }}"
|
||||
>
|
||||
<x-slot:description><span class="md-tabular">{{ Number::fileSize($file->file_size) }}</span></x-slot:description>
|
||||
<x-slot:end>
|
||||
<x-row gap="space100">
|
||||
<span x-show="isDone({{ $file->id }})" x-cloak data-test="file-downloaded">
|
||||
<x-icon name="download_done" class="md-ink-success" :label="__('Downloaded')" />
|
||||
</span>
|
||||
<x-button icon="download" :link="route('share.download.file', [$share, $file])" no-wire-navigate :aria-label="__('Download :name', ['name' => $file->original_name])" x-on:click="downloaded = true; markDone({{ $file->id }})" />
|
||||
</x-row>
|
||||
</x-slot:end>
|
||||
</x-list-item>
|
||||
@endforeach
|
||||
</x-list>
|
||||
</div>
|
||||
|
||||
<div x-show="running || finished" x-cloak data-test="folder-download">
|
||||
<x-stack gap="space100">
|
||||
|
||||
Reference in New Issue
Block a user