153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<script lang="ts" setup>
|
|
import Navbar from "../../../components/Navbar.vue";
|
|
import Footer from "../../../components/MyFooter.vue";
|
|
import type { JahrMitBild } from "~/dto/galerie.dto";
|
|
|
|
const route=useRoute();
|
|
|
|
const {event, year} = route.params;
|
|
|
|
function capitalizeFirstLetter(str: string){
|
|
|
|
if (str.length === 0) return str;
|
|
return str[0].toUpperCase() + str.slice(1);
|
|
|
|
}
|
|
|
|
const {$gql} = useNuxtApp();
|
|
|
|
const bilder: string[]=(await $gql.request<{bilder:JahrMitBild[]}>(`
|
|
{
|
|
bilder(event: "${event}", jahr: ${year}) {
|
|
jahr
|
|
bild
|
|
}
|
|
}
|
|
`)).bilder[0].bild;
|
|
|
|
function toTable<T>(input: T[], columns: number = 5): T[][] {
|
|
if (columns <= 0) {
|
|
throw new Error("columns must be > 0");
|
|
}
|
|
|
|
const result: T[][] = [];
|
|
|
|
for (let i = 0; i < input.length; i += columns) {
|
|
const row = input.slice(i, i + columns);
|
|
result.push(row);
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function getImg(filename){
|
|
|
|
return 'http://localhost:3000/api/galerie/bild/'+event+'/'+year+'/'+filename;
|
|
|
|
}
|
|
|
|
const bildersplitted=toTable<string>(bilder);
|
|
console.log(bildersplitted);;
|
|
|
|
</script>
|
|
<template>
|
|
<Navbar />
|
|
<section class="galerie-section">
|
|
<div class="galerie-container">
|
|
<h2>{{ capitalizeFirstLetter(<string>event) }} {{ year }}</h2>
|
|
Vorschaubilder <br />
|
|
{{ bilder.length }} Bilder
|
|
<table>
|
|
<tbody>
|
|
<tr v-for="row, i in bildersplitted">
|
|
<td v-for="column, j in row">
|
|
<NuxtLink :to="'/bildschau/'+event+'/'+year+'/'+(i*5+j)"
|
|
><img :src="getImg(column)" alt="Vorschaubild"
|
|
/></NuxtLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<div class="platzhalter" v-if="bilder.length<=5"></div> <!-- Eine Reihe -->
|
|
<Footer></Footer>
|
|
</template>
|
|
<style scoped>
|
|
.galerie-container {
|
|
width: 80%; /* Breite der Galerie anpassen */
|
|
margin: 0 auto; /* Galerie in der Mitte ausrichten */
|
|
}
|
|
|
|
table {
|
|
width: 100%; /* Tabelle über die gesamte Breite des Containers */
|
|
border-collapse: collapse; /* Zellränder entfernen */
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
|
|
text-align: center; /* Text in der Mitte ausrichten */
|
|
}
|
|
|
|
img {
|
|
width: 70%; /* Breite der Vorschaufotos */
|
|
height: auto; /* Automatisches Seitenverhältnis bewahren */
|
|
margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
|
|
border-radius: 15px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Smartphones (ca. Portrait-Modus) */
|
|
table {
|
|
width: 100%; /* Galerie über die gesamte Breite */
|
|
}
|
|
|
|
tr {
|
|
display: flex; /* Bilder in einer Reihe anordnen */
|
|
flex-wrap: wrap; /* Zeilenumbruch aktivieren */
|
|
}
|
|
|
|
td {
|
|
flex: 1 0 50%; /* Zellenbreite gleichmäßig aufteilen */
|
|
padding: 10px; /* Randabstand verringern */
|
|
}
|
|
|
|
img {
|
|
width: 100%; /* Bilder über die gesamte Zellenbreite */
|
|
height: auto; /* Seitenverhältnis bewahren */
|
|
margin: 0; /* Bildränder entfernen */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
/* Tablets (ca. Portrait-Modus) */
|
|
table {
|
|
width: 80%; /* Galerie etwas schmaler */
|
|
}
|
|
|
|
tr {
|
|
display: flex; /* Bilder in 3 Reihen anordnen */
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
td {
|
|
flex: 1 0 33%; /* Zellenbreite gleichmäßig aufteilen */
|
|
padding: 15px; /* Randabstand etwas erhöhen */
|
|
}
|
|
|
|
img {
|
|
width: 100%; /* Bilder über die gesamte Zellenbreite */
|
|
height: auto; /* Seitenverhältnis bewahren */
|
|
margin: 0; /* Bildränder entfernen */
|
|
}
|
|
}
|
|
.galerie-section {
|
|
margin-top: 150px;
|
|
margin-bottom: 150px;
|
|
}
|
|
.platzhalter {
|
|
height: 150px;
|
|
}
|
|
</style>
|