Init project
This commit is contained in:
44
templates/component/add-images-modal.html.twig
Normal file
44
templates/component/add-images-modal.html.twig
Normal file
@@ -0,0 +1,44 @@
|
||||
<el-dialog>
|
||||
<dialog id="dialog" data-action="show->news--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--image-selector-target="list">
|
||||
{% for image in images %}
|
||||
<label class="cursor-pointer block relative rounded-md overflow-hidden transition transform" data-action="click->news--image-selector#cardClick" data-news--image-selector-target="card" data-id="{{ image.id }}" data-url="{{ image.url }}">
|
||||
<input type="checkbox" class="hidden" value="{{ image.id }}" data-action="change->news--image-selector#toggleCheckbox" data-news--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--image-selector-target="overlay"></div>
|
||||
<span class="absolute top-2 right-2 hidden text-green-400" data-news--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--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="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>
|
||||
22
templates/component/confirm-delete-image.html.twig
Normal file
22
templates/component/confirm-delete-image.html.twig
Normal file
@@ -0,0 +1,22 @@
|
||||
<div data-image--delete-img-modal-target="dialog" class="hidden fixed inset-0 z-50 items-center justify-center bg-black/50 p-4">
|
||||
|
||||
<div class="bg-white rounded-lg p-6 w-full max-w-md">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Supprimer l'image</h3>
|
||||
<p class="text-sm text-gray-500 mb-6">
|
||||
Êtes-vous sûr de vouloir supprimer cette image ? Cette action est irréversible.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button type="button" data-action="image--delete-img-modal#close" class="bg-gray-200 text-gray-900 px-3 py-2 rounded hover:bg-gray-300">
|
||||
Annuler
|
||||
</button>
|
||||
|
||||
<form method="post" data-image--delete-img-modal-target="form">
|
||||
<input type="hidden" name="_token" data-image--delete-img-modal-target="token">
|
||||
<button type="submit" class="bg-red-600 text-white px-3 py-2 rounded hover:bg-red-500">
|
||||
Supprimer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
22
templates/component/confirm-delete-news.html.twig
Normal file
22
templates/component/confirm-delete-news.html.twig
Normal file
@@ -0,0 +1,22 @@
|
||||
<div data-news--delete-target="dialog" class="hidden fixed inset-0 z-50 items-center justify-center bg-black/50 p-4">
|
||||
<div class="bg-white rounded-lg p-6 w-full max-w-md">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-4">Supprimer l'actualité</h3>
|
||||
|
||||
<p class="text-sm text-gray-500 mb-6">
|
||||
Êtes-vous sûr de vouloir supprimer cette actualité ? Cette action est irréversible.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button type="button" data-action="news--delete#close" class="bg-gray-200 text-gray-900 px-3 py-2 rounded hover:bg-gray-300">
|
||||
Annuler
|
||||
</button>
|
||||
|
||||
<form method="post" data-news--delete-target="form">
|
||||
<input type="hidden" name="_token" data-news--delete-target="token">
|
||||
<button type="submit" class="bg-red-600 text-white px-3 py-2 rounded hover:bg-red-500">
|
||||
Supprimer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
44
templates/component/edit-images-modal.html.twig
Normal file
44
templates/component/edit-images-modal.html.twig
Normal file
@@ -0,0 +1,44 @@
|
||||
<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>
|
||||
5
templates/component/loader-progress-bar.html.twig
Normal file
5
templates/component/loader-progress-bar.html.twig
Normal file
@@ -0,0 +1,5 @@
|
||||
<div data-component--loader-progress-bar-target="loaderWrapper" class="relative mb-4 hidden">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div data-component--loader-progress-bar-target="loaderProgressBar" class="bg-amber-500 h-2 rounded-full mt-60" style="width:0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
38
templates/component/loader.html.twig
Normal file
38
templates/component/loader.html.twig
Normal file
@@ -0,0 +1,38 @@
|
||||
<div id="loader" data-image--drop-zone-target="loader" class="loader" style="display:none;"></div>
|
||||
|
||||
<style>
|
||||
.loader {
|
||||
display: block;
|
||||
--height-of-loader: 4px;
|
||||
--loader-color: #f59e0b;
|
||||
width: 130px;
|
||||
height: var(--height-of-loader);
|
||||
border-radius: 30px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--loader-color);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: 30px;
|
||||
animation: moving 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes moving {
|
||||
50% {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 0;
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user