Bildschau hinzugefügt

src/assets/bildschau/style.sass

@@ -0,0 +1,46 @@
+.flex-card-wrapper
+    width: 90rem
+    max-width: 150rem
+    height: 40rem
+    max-height: 50rem
+    display: flex
+    flex-direction: row
+    justify-content: center
+    align-items: stretch
+    transition: 200ms all ease-in-out
+    .flex-card-container
+        padding: 0 0 0 0
+        height: 100%
+        
+        border-radius: 20px
+        cursor: pointer
+        overflow: hidden
+        position: relative
+        background-position: center center
+        background-size: cover
+        background-repeat: no-repeat
+        margin: 0 0 0 0
+        display: none
+        transition: 200ms all ease-in-out
+        
+
+        &:last-child
+            margin: 0 0 0 0
+        &.active
+            width: 80%
+            overflow: auto
+            margin-left: 1%
+            margin-right: 1%
+            display: block
+            background-size: contain
+                    
+        
+        &.unactive
+            width: 5%
+            display: block
+
+.main
+    flex-direction: column
+    display: flex
+    justify-content: center
+    align-items: center

src/router/index.ts

@@ -6,6 +6,7 @@ const routes = [
   { path: '/', component: () => import('../views/Main.vue') },
   { path: '/galerie', component: Galerie },
   { path: '/bild/:ev/:jahr', component: () => import('../views/Bildvorschau.vue') },
+  { path: '/bild/:ev/:jahr/:bild', component: () => import('../views/Bildschau.vue') },
 ]
 
 export default createRouter({

src/views/Bildschau.vue

@@ -0,0 +1,218 @@
+<script lang="ts">
+import Footer from "../components/Footer.vue";
+import Navbar from "../components/Navbar.vue";
+import RitzenbergenLib from "../ritzenbergenlib";
+import $ from "jquery";
+
+export default {
+  components: {
+    Navbar,
+    Footer,
+  },
+  data() {
+    return {
+      bild: this.$route.params.bild,
+      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;
+    },
+  },
+};
+</script>
+<template>
+  <Navbar />
+  <div class="main">
+    <section class="flex-card-wrapper">
+      <article
+        class="flex-card-container lazy-loading"
+        :class="{
+            active: bild == i,
+            unactive: (bild==i-1)||(bild==i+1)
+        }"
+        :style="{
+          backgroundImage:
+            'url('+RitzenbergenLib.get_img(bildel)+')',
+        }"
+        v-for="(bildel, i) in bilder"
+        @click="bild=i"
+      ></article>
+      
+    </section>
+    <br /><br />
+    <div class="kommentare"></div>
+
+    <form class="formular" method="post">
+      <input
+        class="username-input"
+        type="text"
+        name="username"
+        placeholder="Name"
+        maxlength="32"
+        required
+      />
+      <br />
+      <input
+        class="kommentar-input"
+        type="text"
+        name="kommentar"
+        placeholder="Kommentar"
+        maxlength="1024"
+        required
+      />
+      <input class="absenden-button" type="submit" value="Absenden" />
+    </form>
+  </div>
+  <br /><br />
+  <Footer></Footer>
+</template>
+<style scoped lang="scss">
+@import "../assets/bildschau/style.sass";
+
+.roboto-thin {
+  font-family: "Roboto", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.roboto-light {
+  font-family: "Roboto", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.roboto-regular {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.roboto-medium {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.roboto-bold {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.roboto-black {
+  font-family: "Roboto", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.roboto-thin-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.roboto-light-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.roboto-regular-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.roboto-medium-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+}
+
+.roboto-bold-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.roboto-black-italic {
+  font-family: "Roboto", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.kommentare {
+  flex-direction: column;
+  margin: 10px;
+  width: 80%;
+  text-align: center;
+  font-family: "Roboto", sans-serif;
+}
+
+.formular {
+  display: left;
+  flex-direction: row;
+  align-items: left;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+.username-input,
+.kommentar-input {
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ddd;
+  align-items: left;
+  border-radius: 3px;
+}
+
+.absenden-button {
+  background-color: #0073b7;
+  color: white;
+  padding: 10px 20px;
+  border: 1px solid #0073b7;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.absenden-button:hover {
+  background-color: #00578b;
+}
+
+@media (max-width: 768px) {
+  .kommentare {
+    flex-direction: column;
+  }
+  .username-input,
+  .kommentar-input {
+    width: 50%;
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 3px;
+  }
+}
+
+.main {
+  margin-top: 150px;
+}
+</style>