ritzenbergen-frontend/src/views/Bildvorschau.vue

<script lang="ts">
import { RouterLink } from "vue-router";
import Navbar from "../components/Navbar.vue";
import RitzenbergenLib from "../ritzenbergenlib";
import Footer from "../components/Footer.vue";
import $ from "jquery";

export default {
  data() {
    return {
      ev: this.$route.params.ev,
      jahr: this.$route.params.jahr,
      RitzenbergenLib,
    };
  },
  computed: {
    bilder() {
      let result: any[] = [];

      $.ajax(RitzenbergenLib.api("/galerie/get_bilder.php"),{
        async: false,
        success(data: string) {
          result=JSON.parse(data);
        },
        method: "GET",
        data: {
          ev: this.ev,
          jahr: this.jahr
        }
      });

      return result;
    },
    bildersplitted() {
      let result: any[] = [];
      this.bilder.forEach((element, i) => {
        if (i % 5 == 0) {
          result.push([]);
        }
        result[result.length - 1].push(element);
      });
      return result;
    },
    einereihe() {
      return this.bilder.length <= 5;
    },
  },
  components: {
    RouterLink,
    Navbar,
    Footer,
  },
  methods: {
    capitalizeFirstLetter(str: string) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    },
  },
};
</script>
<template>
  <Navbar />
  <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>