💄 new sliders controls in timeline page
continuous-integration/drone/push Build is passing Details

tutorial
Mathis FRAMIT 2 weeks ago
parent f84b3be085
commit 4f983285f0

@ -93,32 +93,82 @@
<!-- Carrousel d'images -->
<ng-container *ngIf="imageUrls[pins.indexOf(pin)].length > 0">
<div class="relative flex items-center justify-center">
<button
*ngIf="imageUrls[pins.indexOf(pin)].length > 1"
(click)="prevImage(pins.indexOf(pin))"
class="absolute left-0 bg-white border border-blue-500 text-blue-500 rounded-full w-10 h-10 shadow-md hover:bg-blue-100 z-10"
<div
class="relative h-64 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
>
<div
*ngFor="
let imageId of imageUrls[pins.indexOf(pin)];
let index = index
"
[class]="
'absolute inset-0 transition-opacity duration-700 ease-in-out' +
(index === carouselIndexes[pins.indexOf(pin)]
? ' opacity-100'
: ' opacity-0')
"
>
</button>
<img
[src]="imageId"
class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
alt="image"
/>
</div>
<img
[src]="
imageUrls[pins.indexOf(pin)][
carouselIndexes[pins.indexOf(pin)]
]
"
alt="image"
class="rounded-xl mx-auto w-full h-64 object-contain shadow-lg"
/>
<!-- Slider controls -->
<div *ngIf="imageUrls[pins.indexOf(pin)].length > 1">
<button
type="button"
class="absolute top-0 left-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
(click)="prevImage(pins.indexOf(pin))"
>
<span
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
>
<svg
class="w-4 h-4 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 1 1 5l4 4"
/>
</svg>
<span class="sr-only">Précédent</span>
</span>
</button>
<button
*ngIf="imageUrls[pins.indexOf(pin)].length > 1"
(click)="nextImage(pins.indexOf(pin))"
class="absolute right-0 bg-white border border-blue-500 text-blue-500 rounded-full w-10 h-10 shadow-md hover:bg-blue-100 z-10"
>
</button>
<button
type="button"
class="absolute top-0 right-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
(click)="nextImage(pins.indexOf(pin))"
>
<span
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-black/30 group-hover:bg-black/50"
>
<svg
class="w-4 h-4 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 6 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 9l4-4-4-4"
/>
</svg>
<span class="sr-only">Suivant</span>
</span>
</button>
</div>
</div>
<!-- Indicateur de position -->
@ -147,15 +197,15 @@
<div class="text-gray-400 italic text-center">Aucune image</div>
</ng-container>
</div>
</div>
</ng-container>
</ng-container>
</div>
<!-- Message si vide -->
<div
*ngIf="!loading && pins.length === 0"
class="text-center text-gray-500 py-12 text-xl"
>
Aucun souvenir à afficher pour le moment.
<!-- Message si vide -->
<div
*ngIf="!loading && pins.length === 0"
class="text-center text-gray-500 py-12 text-xl"
>
Aucun souvenir à afficher pour le moment.
</div>
</div></ng-container
></ng-container
>
</div>

Loading…
Cancel
Save