Init project
This commit is contained in:
41
templates/image/add.html.twig
Normal file
41
templates/image/add.html.twig
Normal file
@@ -0,0 +1,41 @@
|
||||
{% extends 'base_admin.html.twig' %}
|
||||
{% block body %}
|
||||
<main class="lg:pl-72">
|
||||
<div class="xl:pr-96">
|
||||
<div
|
||||
class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6 ">
|
||||
<!-- Main area -->
|
||||
<div class="col-span-full mt-60">
|
||||
<div id="drop-zone" data-controller="image--drop-zone" data-image--drop-zone-target="dropZone" class="flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
|
||||
<div class="text-center">
|
||||
<svg viewbox="0 0 24 24" fill="currentColor" data-slot="icon" aria-hidden="true" class="mx-auto size-12 text-gray-300">
|
||||
<path d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z" clip-rule="evenodd" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="mt-4 flex justify-center text-sm/6 text-gray-600">
|
||||
<label for="file-upload" onclick="event.stopPropagation()" class="relative cursor-pointer rounded-md bg-white font-semibold text-amber-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-amber-600 hover:text-amber-500">
|
||||
<span>Télécharger des fichiers</span>
|
||||
<input id="file-upload" type="file" name="file-upload[]" class="sr-only" multiple data-image--drop-zone-target="input"/>
|
||||
</label>
|
||||
<p class="pl-1">ou glisser-déposer</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs/5 text-gray-600">PNG, JPG, GIF jusqu'à 10 Mo</p>
|
||||
</div>
|
||||
<div data-image--drop-zone-target="preview" class="mt-4 flex flex-wrap gap-2"></div>
|
||||
<div class="mt-4 flex justify-center">
|
||||
{% include "component/loader.html.twig" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10">
|
||||
<!-- Secondary column (hidden on smaller screens) -->
|
||||
<a href="{{ path('admin_image_index') }}" class="rounded-md bg-amber-600 px-4 py-2.5 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 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">Mes images</a>
|
||||
|
||||
</aside>
|
||||
{% endblock %}
|
||||
166
templates/image/index.html.twig
Normal file
166
templates/image/index.html.twig
Normal file
@@ -0,0 +1,166 @@
|
||||
{% extends 'base_admin.html.twig' %}
|
||||
{% block body %}
|
||||
<div data-controller="image--delete-img-modal">
|
||||
<main class="lg:pl-72">
|
||||
<div class="xl:pr-96">
|
||||
<div
|
||||
class="px-4 py-10 sm:px-6 lg:px-8 lg:py-6"
|
||||
data-controller="component--loader-progress-bar"
|
||||
>
|
||||
<!-- Main area -->
|
||||
{% for message in app.flashes('error') %}
|
||||
<div class="mb-4 rounded-md bg-red-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="shrink-0">
|
||||
<svg
|
||||
class="size-5 text-red-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewbox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-red-800">
|
||||
{{ message }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if images is empty %}
|
||||
<div class="text-center mt-60">
|
||||
<svg
|
||||
viewbox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
class="mx-auto size-12 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
|
||||
stroke-width="2"
|
||||
vector-effect="non-scaling-stroke"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-semibold text-gray-900">
|
||||
Pas d'image
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Commencez par ajouter une nouvelle image.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a
|
||||
class="inline-flex items-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"
|
||||
href="{{ path('admin_image_add') }}"
|
||||
>
|
||||
Ajouter des images
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% include 'component/loader-progress-bar.html.twig' %}
|
||||
<div
|
||||
data-component--loader-progress-bar-target="imagesWrapper"
|
||||
style="opacity:0;"
|
||||
>
|
||||
<ul
|
||||
role="list"
|
||||
data-component--loader-progress-bar-target="list"
|
||||
class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
|
||||
>
|
||||
{% for image in images %}
|
||||
<li class="relative">
|
||||
<div
|
||||
class="group relative overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
src="{{ image.url }}"
|
||||
alt=""
|
||||
class="pointer-events-none aspect-10/7 rounded-lg object-cover outline -outline-offset-1 outline-black/5 dark:outline-white/10"
|
||||
/>
|
||||
|
||||
<!-- BANDEAU visible au hover -->
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bg-black/50 h-10 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-end px-2 pointer-events-auto"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-action="image--delete-img-modal#open"
|
||||
data-url="{{
|
||||
path(
|
||||
'admin_image_delete',
|
||||
{
|
||||
id: image.id
|
||||
}
|
||||
)
|
||||
}}"
|
||||
data-token="{{
|
||||
csrf_token(
|
||||
'delete_image' ~ image.id
|
||||
)
|
||||
}}"
|
||||
class="p-1 rounded hover:bg-white/20 transition text-amber-600"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
{{ image.name }}
|
||||
</p>
|
||||
<p
|
||||
class="block text-sm font-medium text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ (image.size / 1024 / 1024)|number_format(2) }}
|
||||
MB
|
||||
</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'component/confirm-delete-image.html.twig' %}
|
||||
</main>
|
||||
|
||||
<aside
|
||||
class="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l border-gray-200 px-4 py-6 sm:px-6 lg:px-8 xl:block dark:border-white/10"
|
||||
>
|
||||
<!-- Secondary column (hidden on smaller screens) -->
|
||||
<a
|
||||
href="{{ path('admin_image_add') }}"
|
||||
class="rounded-md bg-amber-600 px-4 py-2.5 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 dark:bg-amber-500 dark:shadow-none dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500"
|
||||
>
|
||||
Ajouter des images
|
||||
</a>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user