BuLi-Tipp Übersicht beendet, Galerie Debugged, Navbar Mobile Ansicht gefixt

src/components/Navbar.vue

@@ -19,7 +19,9 @@ export default {
         { link: "/footer", title: "Kontakt" },
         { link: "/bulitipp", title: "BuLi-Tipp" },
       ],
-      buttontextdata: "Über Ritzenbergen"
+      buttontextdata: "Über Ritzenbergen",
+			isNavCollapsed: true,
+			isCollapsing: false,
     }
   },
   created() {
@@ -33,13 +35,26 @@ export default {
       }else{
         this.$router.push("/willkommen");
       }
-    }
-  }
+    },
+		toggleCollapse(){
+				/*if (this.isNavCollapsed) {
+						document.body.classList.add("navbar-dropdown-open");
+				} else {
+						document.body.classList.remove("navbar-dropdown-open");
+				}*/
+				this.isCollapsing = true;
+				this.isNavCollapsed = !this.isNavCollapsed;
+				setTimeout(() => {
+					this.isCollapsing = false;
+				}, 300);
+				
+		}
+}
 };
 </script>
 <template>
   <section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
-    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
+			<nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg" :class="{ opened: !isNavCollapsed }">
       <div class="container">
         <div class="navbar-brand">
           <span class="navbar-logo">
@@ -59,6 +74,7 @@ export default {
         </div>
         <button
           class="navbar-toggler"
+					:class="{ collapsed: isNavCollapsed }"
           type="button"
           data-toggle="collapse"
           data-bs-toggle="collapse"
@@ -67,6 +83,7 @@ export default {
           aria-controls="navbarNavAltMarkup"
           aria-expanded="false"
           aria-label="Toggle navigation"
+					@click="toggleCollapse"
         >
           <div class="hamburger">
             <span></span>
@@ -75,7 +92,7 @@ export default {
             <span></span>
           </div>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+				<div class="navbar-collapse opacityScroll" :class="{show: !isNavCollapsed, collapsing: isCollapsing, collapse: !isCollapsing}" id="navbarSupportedContent">
           <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
             <li class="nav-item" v-for="link in datalinks">
               <RouterLink
@@ -108,4 +125,23 @@ export default {
 .link {
   font-weight: 400;
 }
+#navbarSupportedContent {
+		  transition: all 0.2s ease-in-out;
+			height: auto;
+}
+#navbarSupportedContent:not(.show) {
+		max-height: 0;
+		padding: 0;
+}
+#navbarSupportedContent.show {
+		max-height: 1000px;
+		padding: 16px;
+
+}
+@media (min-width: 1201px) {
+		#navbarSupportedContent {
+				max-height: 1000px !important;
+				height: 100%;
+		}
+}
 </style>

src/components/bulitipp/Tippen.vue

@@ -222,7 +222,7 @@ export default {
     </div>
   </div>
 </template>
-<style>
+<style scoped>
 img {
   width: 30px;
 }

src/components/bulitipp/Uebersicht.vue

@@ -9,6 +9,14 @@ export default {
 				spieltag: {
 						type: Number,
 						required: false
+				},
+				tipps: {
+						type: Array,
+						required: true
+				},
+				paarungen: {
+						type: Array,
+						required: true
 				}
     },
 		data(){
@@ -30,16 +38,28 @@ export default {
         <td v-for="user in users" @click="currentuser=user; modalOpen=true">{{ user.kuerzel }}</td>
       </tr>
       <tr>
-          <td v-for="user in users" :style="{color: user.hatgetippt()?'green':'red'}" @click="currentuser=user; modalOpen=true">{{ user.points }}</td>
+					<td v-for="user in users" :style='{"color": user.hatgetippt()?"green":"red"}' @click="currentuser=user; modalOpen=true">{{ user.points }}</td>
       </tr>
       </tbody>
     </table>
   </section>
 		<Modal v-if="modalOpen" @closemodal="modalOpen=false">
 				<div v-if="spieltag!=undefined">
-						{{ currentuser }}
-						
 						<h1>Detailansicht für {{ currentuser.username }}, {{ spieltag }}. Spieltag</h1>
+						<table>
+								<thead>
+										<tr>
+												<td>Paarung</td>
+												<td>Tipp von {{ currentuser.username }}</td>
+										</tr>
+								</thead>
+								<tbody>
+										<tr v-for="tipp, i in tipps.filter(t=>t.user==currentuser.id)">
+												<td>{{ paarungen[i].heim }} - {{ paarungen[i].gast }}</td>
+												<td>{{ tipp.tipp.heim }} - {{ tipp.tipp.gast }}</td>
+										</tr>
+								</tbody>
+						</table>
 				</div>
 				<div v-else>
 						<h1>Lade...</h1>