From 76facc40b9e3b465fd5808e8cdf102349b6215f5 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 1 Oct 2024 12:14:34 +0200
Subject: [PATCH] changes the layout for the LvMenu to a flex instead of a grid

---
 public/css/components/dashboard.css     |  4 ----
 public/js/components/Cis/Mylv/LvMenu.js | 12 +++++++-----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index 10b865027..d2635d4e9 100755
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -36,10 +36,6 @@
 	cursor: move;
 }
 
-.lvUebersichtMenuPunkt:hover{
-	background-color:rgba(0, 100, 156, 0.25);
-}
-
 .underline_hover:hover{
 	color:var(--bs-primary);
 	text-decoration: underline;
diff --git a/public/js/components/Cis/Mylv/LvMenu.js b/public/js/components/Cis/Mylv/LvMenu.js
index 7c292bff2..bbffe7ad4 100644
--- a/public/js/components/Cis/Mylv/LvMenu.js
+++ b/public/js/components/Cis/Mylv/LvMenu.js
@@ -71,12 +71,14 @@ export default {
 		<iframe class="h-100 w-100" :src="selectedMenu.c4_link" :title="selectedMenu.name"></iframe>
 	</div>
 	<div v-else-if="!menu">No Menu available</div>
-	<div v-else :style="{'display':'grid', 'row-gap':'10px', 'column-gap':'10px', 'grid-template-columns':'repeat(3,minmax(100px,1fr))', 'grid-template-rows':'repeat('+Math.ceil(menu.length / 3)+',minmax(100px,1fr))'} ">
-		<div :title="menuItem.name" role="button" @click="selectMenu(menuItem)" class="lvUebersichtMenuPunkt border border-1 d-flex flex-column align-items-center justify-content-center p-1 text-center" v-for="(menuItem, index) in menu" :key="index">
-			<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
-			<span @click="selectMenu(menuItem)" class="underline_hover mt-2">{{menuItem.name}}</span>
-			<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)"  :class="{'underline_hover':menuItem.c4_linkList[index][1] != '#'}" class="mt-1" :index="index">{{text}}</span>
+	<div v-else class="container">
+		<div class="row">
+			<div style="min-height:150px" :title="menuItem.name" role="button" @click="selectMenu(menuItem)" class="col-12 col-lg-6 col-xl-4 border border-1 d-flex flex-column align-items-center justify-content-center p-1 text-center" v-for="(menuItem, index) in menu" :key="index">
+				<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
+				<span @click="selectMenu(menuItem)" class="underline_hover mt-2">{{menuItem.name}}</span>
+				<span v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)"  :class="{'underline_hover':menuItem.c4_linkList[index][1] != '#'}" class="mt-1" :index="index">{{text}}</span>
 
+			</div>
 		</div>
 	</div>
 	`