images better
This commit is contained in:
@@ -16,19 +16,53 @@
|
|||||||
>
|
>
|
||||||
@foreach ($media as $item)
|
@foreach ($media as $item)
|
||||||
@if (str_starts_with($item->mime_type, 'image/'))
|
@if (str_starts_with($item->mime_type, 'image/'))
|
||||||
<div class="flex flex-col items-center gap-2">
|
<div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
|
||||||
<img
|
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
|
||||||
src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}"
|
<img
|
||||||
class="w-full rounded-lg"
|
src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}"
|
||||||
/>
|
class="w-full h-full object-cover"
|
||||||
<button
|
/>
|
||||||
type="button"
|
</div>
|
||||||
class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500"
|
|
||||||
@click="$dispatch('open-modal', { id: 'preview-image-{{ $item->id }}' })"
|
<div class="flex-grow overflow-hidden">
|
||||||
>
|
<p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $item->name }}">
|
||||||
{{ __('Watch Full') }}
|
{{ $item->name }}
|
||||||
</button>
|
</p>
|
||||||
</div>
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{{ $item->human_readable_size }}
|
||||||
|
<span class="text-gray-300 dark:text-gray-600 px-1">•</span>
|
||||||
|
<span class="uppercase">{{ $item->extension }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex shrink-0 items-center gap-2 pr-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
|
||||||
|
@click="$dispatch('open-modal', { id: 'preview-image-{{ $item->id }}' })"
|
||||||
|
title="{{ __('View') }}"
|
||||||
|
>
|
||||||
|
<x-filament::icon
|
||||||
|
icon="heroicon-m-eye"
|
||||||
|
class="h-5 w-5"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
@if ($entry->isDownloadable())
|
||||||
|
<a
|
||||||
|
href="{{ $entry->getMediaUrl($item) }}"
|
||||||
|
download
|
||||||
|
class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
|
||||||
|
title="{{ __('Download') }}"
|
||||||
|
>
|
||||||
|
<x-filament::icon
|
||||||
|
icon="heroicon-m-arrow-down-tray"
|
||||||
|
class="h-5 w-5"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<x-filament::modal id="preview-image-{{ $item->id }}" width="5xl" :close-button="true">
|
<x-filament::modal id="preview-image-{{ $item->id }}" width="5xl" :close-button="true">
|
||||||
<x-slot name="heading">
|
<x-slot name="heading">
|
||||||
|
|||||||
Reference in New Issue
Block a user