section spacing; dashboard widgets section backgrounds; set scrollbar width css variable via new helper in FhcApp (Dashboard); WIP stundenplan alle Termine einer LV -> c4 link in bfi addon adapted;

public/css/Cis4/Cis.css

@@ -238,7 +238,7 @@ html {
   body {
     display: flex;
     padding-top: var(--fhc-cis-header-height);
-    width: calc(100vw - var(--scrollbar-width, 0px));
+    width: calc(100svw - var(--scrollbar-width, 0px));
     /* overflow: visible !important; */
   }
   #cis-header {

public/js/apps/Dashboard/Fhc.js

@@ -1,6 +1,7 @@
 import FhcDashboard from '../../components/Dashboard/Dashboard.js';
 import FhcApi from '../../plugin/FhcApi.js';
 import Phrasen from '../../plugin/Phrasen.js';
+import { setScrollbarWidth } from "../../helpers/CssVarCalcHelpers";
 
 const app = Vue.createApp({
   name: 'FhcApp',
@@ -11,6 +12,9 @@ const app = Vue.createApp({
     FhcDashboard
   }
 });
+
+setScrollbarWidth();
+
 app.config.unwrapInjectedRef = true;
 app.use(FhcApi);
 app.use(Phrasen);

public/js/components/Dashboard/Section.js

@@ -31,6 +31,13 @@ export default {
 		}
 	},
 	computed: {
+		getSectionStyle() {
+
+			const bgString = `background: 
+			  linear-gradient(0deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.1) 50%, rgba(128, 128, 128, 0.05) 100%)`
+
+			return 'margin-bottom: 8px;' + bgString;
+		},
 		items() {
 			return this.widgets.map(item => {
 				return { ...item, ...(item.place[this.gridWidth] || {h: 1, w:1, x:0, y:0})};
@@ -170,10 +177,10 @@ export default {
 		});
 	},
 	template: `
-	<div class="dashboard-section" ref="container">
-		<h3 class="d-flex">
-			<span class="col">{{name}}</span>
-			<button class="col-auto btn" @click.prevent="editMode = !editMode"><i class="fa-solid fa-gear"></i></button>
+	<div class="dashboard-section" ref="container" :style="getSectionStyle">
+		<h3>
+			<span >{{$p.t('ui/section' + name)}}</span>
+			<button style="margin-left: 8px;" class="btn" @click="editMode = !editMode"><i class="fa-solid fa-gear"></i></button>
 		</h3>
 		<drop-grid v-model:cols="gridWidth" :items="items" :placeholders="items_placeholders" :active="editMode" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item" #default>
@@ -203,4 +210,4 @@ OLD VERSION - ON HOVER
 <template #empty-tile-hover="{x,y}">
 	<div class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x,y,w:1,h:1}}, custom: 1 })"></div>
 </template>
-*/
+*/

public/js/components/Drop/Grid.js

@@ -61,6 +61,8 @@ export default {
 			return {
 				'--fhc-dg-row-height': 100/(this.rows + addH) + '%',
 				'--fhc-dg-col-width': 100/this.cols + '%',
+				'--fhc-dg-item-padding-horizontal': '0.5%',
+				'--fhc-dg-item-padding-top': '0.5%',
 				'padding-bottom': 100 * (this.rows + addH)/this.cols + '%'
 			}
 		},
@@ -130,9 +132,12 @@ export default {
 		cols() {
 			this.dragCancel();
 		},
-	    rows(value){
-			this.$emit('gridHeight',value);
-		}, 
+	    rows: {
+			handler(value) {
+				this.$emit('gridHeight', value);
+			},
+			immediate: true
+		},
 		indexedItems: {
 			handler(value) {
 				this.dragCancel();
@@ -366,7 +371,10 @@ export default {
 				top: 'calc(' + item.y + ' * var(--fhc-dg-row-height))',
 				left: 'calc(' + item.x + ' * var(--fhc-dg-col-width))',
 				width: 'calc(' + item.w + ' * var(--fhc-dg-col-width))',
-				height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))'
+				height: 'calc(' + item.h + ' * var(--fhc-dg-row-height))',
+				paddingTop: 'var(--fhc-dg-item-padding-top)',
+				paddingLeft: 'var(--fhc-dg-item-padding-horizontal)',
+				paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
 			}">
 			<template v-slot="item">
 				<slot v-bind="item.data" v-bind="item" :x="item.x" :y="item.y" ></slot>

public/js/helpers/CssVarCalcHelpers.js

@@ -0,0 +1,29 @@
+// Create a temporary div element, set styles to ensure it's scrollable and off-screen, get scrollbar width from that
+function getScrollbarWidth() {
+	const div = document.createElement('div');
+
+	div.style.position = 'absolute';
+	div.style.top = '-9999px';
+	div.style.width = '100px';
+	div.style.height = '100px';
+	div.style.overflow = 'scroll';
+
+	document.body.appendChild(div);
+	const scrollbarWidth = div.offsetWidth - div.clientWidth;
+	document.body.removeChild(div);
+
+	return scrollbarWidth;
+}
+
+// Detect the browser and set a CSS variable for the scrollbar width since chrome scrollbars mess with 100vw/vh css
+export function setScrollbarWidth() {
+	const isChromium = /Chrome/.test(navigator.userAgent);
+	const isFirefox = /Firefox/.test(navigator.userAgent);
+
+	if (isChromium) {
+		const width = getScrollbarWidth() + 'px';
+		document.body.style.setProperty('--scrollbar-width', width); // Set the value for Chrome
+	} else if (isFirefox) {
+		document.body.style.setProperty('--scrollbar-width', '0px'); // Set the value for Firefox or adjust as needed
+	}
+}