libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

refactor carousel and collapsable components; improve button styles and accessibility

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 03:35:01 +02:00
parent d1026a8edf
commit c6c1ad26de
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Carousel.pug
View File

@@ -5,20 +5,20 @@ mixin Carousel(items, options)
.carousel-container.relative.w-full.overflow-hidden(id=id)
//- Navigation buttons
button.carousel-btn.carousel-prev.absolute.left-4.z-20.transform(
class=`-translate-y-1/2 top-1/2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
button.absolute.left-1.z-20.transform(
class=`-translate-y-1/2 top-1/2 sm:left-2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-2 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Previous slide",
onclick=`carouselPrev('${id}'); umami.track('carousel navigation', { direction: 'prev', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(fill="none", stroke="currentColor", viewBox="0 0 24 24")
svg.w-3.h-3.text-gray-800(class="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M15 19l-7-7 7-7")
button.carousel-btn.carousel-next.absolute.right-4.z-20.transform(
class=`top-1/2 -translate-y-1/2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
button.absolute.right-1.z-20.transform(
class=`top-1/2 sm:right-2 -translate-y-1/2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-2 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Next slide",
onclick=`carouselNext('${id}'); umami.track('carousel navigation', { direction: 'next', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(fill="none", stroke="currentColor", viewBox="0 0 24 24")
svg.w-3.h-3.text-gray-800(class="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M9 5l7 7-7 7")
//- Carousel track

2
src/components/Collapsable.pug
View File

@@ -1,6 +1,6 @@
mixin Collapsable(name, data, open)
- const isExpanded = open || false;
- const color = data.color ? `focus:ring-nls-${data.color} text-nls-${data.color} focus:text-nls-${data.color} dark:focus:text-nls-${data.color}` : "nls-text-black dark:nls-text-white ring-nls-black dark:ring-nls-white/50 focus:text-black dark:focus:text-white";
- const color = data.color ? `focus:ring-nls-${data.color} text-nls-${data.color} focus:text-nls-${data.color} dark:focus:text-nls-${data.color}` : "nls-text-black dark:nls-text-white ring-nls-black dark:ring-nls-white focus:text-black dark:focus:text-white";
- const category = data.category || "default";
- const linkEventName = "external link clicked";