Skip to content

[6.x] Improve Asset fieldtype UI in smaller spaces #15243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jackmcdade merged 2 commits into from
Aug 22, 2026
+29 −9
Merged

[6.x] Improve Asset fieldtype UI in smaller spaces #15243

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15968b4
Improve Asset fieldtype ui in smaller spaces
jackmcdade Aug 21, 2026
6930d76
Merge branch '6.x' into better-asset-field-responsiveness
jackmcdade Aug 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 29 additions & 9 deletions resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
<div
v-if="!isReadOnly && showPicker"
data-asset-picker
class="not-[.link-fieldtype_&]:p-2 not-[.link-fieldtype_&]:border border-gray-300 dark:border-gray-700 dark:bg-gray-850 rounded-xl flex flex-col @[22rem]:flex-row gap-2 sm:gap-3 gap-y-3"
class="not-[.link-fieldtype_&]:p-2 not-[.link-fieldtype_&]:border border-gray-300 dark:border-gray-700 dark:bg-gray-850 rounded-xl flex items-center gap-3"
:class="{
'rounded-b-none': expanded,
'bard-drag-handle': isInBardField,
Expand All @@ -38,24 +38,44 @@
<Button
v-if="canBrowse"
icon="folder-open"
size="sm"
tabindex="0"
class="shrink-0 @sm:hidden"
:text="__('Browse')"
:aria-label="__('Browse Assets')"
@click="openSelector"
@keyup.space.enter="openSelector"
/>
<Button
v-if="canBrowse"
icon="folder-open"
tabindex="0"
class="hidden shrink-0 @sm:inline-flex"
:text="__('Browse Assets')"
class="w-full @2xs:w-auto"
@click="openSelector"
@keyup.space.enter="openSelector"
/>

<div class="text-sm text-gray-600 dark:text-gray-400 hidden not-[.link-fieldtype_&]:flex items-center flex-1 gap-1 ms-1" v-if="canUpload">
<ui-icon name="upload-cloud" class="size-5 text-gray-500 me-2" />
<div class="text-xs">
<span class="leading-tight" v-text="`${__('Drag & drop here or')}&nbsp;`" />
<button type="button" class="text-left underline underline-offset-2 cursor-pointer hover:text-gray-925 dark:hover:text-gray-200" @click.prevent="uploadFile">
<div class="min-w-0 flex-1 hidden not-[.link-fieldtype_&]:flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400" v-if="canUpload">
<ui-icon name="upload-cloud" class="size-5 shrink-0 text-gray-500 hidden @sm:block" />
<div class="min-w-0">
<span class="hidden @sm:inline">{{ __('Drag & drop here or') }}&nbsp;</span>
<span v-if="canBrowse" class="@sm:hidden">{{ __('or') }}&nbsp;</span>
<button type="button" class="underline underline-offset-2 cursor-pointer hover:text-gray-925 dark:hover:text-gray-200" @click.prevent="uploadFile">
{{ __('choose a file') }}
</button>.
<span class="leading-tight whitespace-nowrap" v-if="selectedFilesText" v-text="selectedFilesText" />
</button><span class="hidden @sm:inline">.</span>
</div>
</div>

<ui-badge
v-if="selectedFilesText"
size="sm"
pill
class="ms-auto shrink-0 tabular-nums px-1.5!"
:text="`${assets.length}/${maxFiles}`"
:aria-label="selectedFilesText"
/>

<div class="flex items-center justify-end" v-if="meta.rename_folder">
<ItemActions
:url="meta.rename_folder.url"
Expand Down
Loading