108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<script lang="ts">
|
|
import Navbar from "../components/Navbar.vue";
|
|
import RitzenbergenLib from "../../../ritzenbergenlib";
|
|
import Footer from "../components/MyFooter.vue";
|
|
|
|
</script>
|
|
<template>
|
|
<Navbar />
|
|
Bildvorschau
|
|
<!--<section class="galerie-section">
|
|
<div class="galerie-container">
|
|
<h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
|
|
Vorschaubilder <br />
|
|
{{ bilder.length }} Bilder
|
|
<table>
|
|
<tbody>
|
|
<tr v-for="row, i in bildersplitted">
|
|
<td v-for="column, j in row">
|
|
<RouterLink :to="jahr+'/'+(i*5+j).toString()"
|
|
><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
|
|
/></RouterLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<div class="platzhalter" v-if="einereihe"></div>-->
|
|
<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>
|