Fix Galerie

app/pages/bildvorschau/[event]/[year].vue

@@ -0,0 +1,107 @@
+<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>