45 lines
4.0 KiB
Twig
45 lines
4.0 KiB
Twig
<el-dialog>
|
|
<dialog id="edit-news-image-dialog" data-action="show->news--edit-image-selector#onDialogOpen" aria-labelledby="dialog-title" class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
|
|
<el-dialog-backdrop class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-gray-900/50"></el-dialog-backdrop>
|
|
|
|
<div tabindex="0" class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
|
|
<el-dialog-panel class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-3xl sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10">
|
|
<div>
|
|
<div class="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-500/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-green-600 dark:text-green-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-3 text-center sm:mt-5">
|
|
<h3 id="dialog-title" class="text-base font-semibold text-gray-900 dark:text-white">Ajouter des images</h3>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Ajouter des images
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-4 gap-4 mt-4 max-h-96 overflow-y-auto p-2" data-news--edit-image-selector-target="list">
|
|
{% for image in images %}
|
|
<label class="cursor-pointer block relative rounded-md overflow-hidden transition transform" data-action="click->news--edit-image-selector#cardClick" data-news--edit-image-selector-target="card" data-id="{{ image.id }}" data-url="{{ image.url }}">
|
|
<input type="checkbox" class="hidden" value="{{ image.id }}" data-action="change->news--edit-image-selector#toggleCheckbox" data-news--edit-image-selector-target="checkbox">
|
|
<img src="{{ image.url }}" alt="" class="w-full h-24 object-cover">
|
|
<div class="absolute inset-0 bg-black/20 hidden" data-news--edit-image-selector-target="overlay"></div>
|
|
<span class="absolute top-2 right-2 hidden text-green-400" data-news--edit-image-selector-target="checkIcon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewbox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414-1.414L7 12.172 4.707 9.879a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l9-9z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
{% else %}
|
|
<p class="col-span-4 text-center text-gray-500">Aucune image disponible</p>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
|
|
<button data-action="news--edit-image-selector#validate" class="inline-flex w-full justify-center rounded-md bg-amber-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 sm:col-start-2 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">Valider</button>
|
|
<button type="button" command="close" commandfor="edit-news-image-dialog" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">Retour</button>
|
|
</div>
|
|
</el-dialog-panel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</el-dialog>
|