justinzeus/handin-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial release

Browse source
This commit is contained in:
Justin Visser 2026-03-03 16:16:36 +01:00
parent e156de22c3
commit b3ac11a85e
37 changed files with 3649 additions and 669 deletions
Download patch file Download diff file Expand all files Collapse all files

70
frontend/src/components/segments/GallerySegment.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from "vue";
import { ref, computed } from "vue";
import type { Segment } from "@/types/segment";
const props = defineProps<{
@ -8,21 +8,67 @@ const props = defineProps<{
const images = computed(() => {
const meta = props.segment.metadata;
if (Array.isArray(meta.images)) {
return meta.images as string[];
}
if (Array.isArray(meta.images)) return meta.images as string[];
return [];
});
const current = ref(0);
function prev() {
current.value = (current.value - 1 + images.value.length) % images.value.length;
}
function next() {
current.value = (current.value + 1) % images.value.length;
}
</script>
<template>
<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
<img
v-for="(src, index) in images"
:key="index"
:src="src"
:alt="`${segment.title} image ${index + 1}`"
class="aspect-square w-full rounded object-cover"
/>
<div v-if="images.length > 0" class="select-none">
<!-- Fixed-height image box with arrows overlaid inside it -->
<div class="relative flex h-[70vh] items-center justify-center overflow-hidden rounded bg-white dark:bg-gray-900">
<img
:src="images[current]"
:alt="`${segment.title} image ${current + 1}`"
class="h-full w-full object-contain"
/>
<!-- Arrows (only when multiple images) -->
<template v-if="images.length > 1">
<button
type="button"
class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/40 p-1.5 text-white transition-colors hover:bg-black/65"
aria-label="Previous image"
@click="prev"
>
<svg class="h-5 w-5" 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" />
</svg>
</button>
<button
type="button"
class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/40 p-1.5 text-white transition-colors hover:bg-black/65"
aria-label="Next image"
@click="next"
>
<svg class="h-5 w-5" 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" />
</svg>
</button>
</template>
</div>
<!-- Dot indicators below (only when multiple images) -->
<div v-if="images.length > 1" class="mt-3 flex justify-center gap-1.5">
<button
v-for="(_, i) in images"
:key="i"
type="button"
class="h-2 rounded-full transition-all"
:class="i === current ? 'w-4 bg-gray-600 dark:bg-gray-300' : 'w-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'"
:aria-label="`Go to image ${i + 1}`"
@click="current = i"
/>
</div>
</div>
</template>