refactor(Dashboard UX): improves user experience for dashboard

public/css/components/dashboard.css

@@ -1,6 +1,19 @@
 @import './calendar.css';
 @import './dashboard/news.css';
 
+@media (max-width: 576px){
+	.widget-icon {
+		max-height: 250px;
+		object-fit: cover;
+	}
+	.widget-icon-container{
+		max-width: 250px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+
+
 .empty-tile-hover {
 	height: 100%;
 	width: 100%;

public/js/apps/Dashboard/Fhc.js

@@ -299,6 +299,7 @@ app.use(primevue.config.default, {
 		tooltip: 8000
 	}
 })
+app.directive('tooltip', primevue.tooltip);
 app.use(PluginsPhrasen);
 app.directive('contrast', contrast);
 app.mount('#fhccontent');

public/js/components/Dashboard/Dashboard.js

@@ -177,7 +177,13 @@ export default {
 				});
 				remove.forEach(wid => this.widgetRemove(name, wid));
 			}
-			this.sections = this.sections.sort((section1, section2) => section2.widgets.length - section1.widgets.length);
+			this.sections = this.sections.sort((section1, section2) => {
+				if(section1.name == 'custom')
+					return 1;
+				if (section2.name == 'custom')
+					return -1;
+				return section2.widgets.length - section1.widgets.length;
+			});
 		}).catch(err => console.error('ERROR:', err));
 	},
 	async beforeMount() {

public/js/components/Dashboard/Section.js

@@ -1,5 +1,4 @@
 import BsConfirm from "../Bootstrap/Confirm.js";
-import SectionModal from "../Bootstrap/Alert.js";
 import DropGrid from '../Drop/Grid.js'
 import DashboardItem from "./Item.js";
 import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
@@ -109,13 +108,13 @@ export default {
 		},
 		showSectionInformation(){
 			if (this.name == "general"){
-				SectionModal.popup(this.$p.t('dashboard', 'dashboardGeneralSectionDescription')); 
+				return this.$p.t('dashboard', 'dashboardGeneralSectionDescription'); 
 			}
 			else if(this.name == "custom"){
-				SectionModal.popup(this.$p.t('dashboard', 'dashboardCustomSectionDescription'));
+				return this.$p.t('dashboard', 'dashboardCustomSectionDescription');
 			}
 			else{
-				SectionModal.popup(this.$p.t('dashboard', 'dashboardSectionDescription', [this.name]));
+				return this.$p.t('dashboard', 'dashboardSectionDescription', [this.name]);
 			}
 		},
 		handleConfigOpened() {
@@ -211,14 +210,14 @@ export default {
 	},
 	template: `
 	<h4 v-if="editModeIsActive" class=" mb-2">
-		<i @click="showSectionInformation(name)" class="fa-solid fa-circle-info section-info" ></i>
+		<i v-tooltip="{ value: showSectionInformation(name), hideDelay: 300 }" class="fa-solid fa-circle-info section-info" ></i>
 		{{sectionNameTranslation()}}:
 	</h4>
 	<div class="dashboard-section position-relative pb-3 border-bottom" ref="container" :style="getSectionStyle">
 		<button v-if="!additionalRow && editModeIsActive" @click="additionalRow=true" class="btn btn-outline-secondary rounded-circle newGridRow d-flex justify-content-center align-items-center">+</button>
 		<drop-grid v-model:cols="gridWidth" v-model:additionalRow="additionalRow" :items="items" :itemsSetup="computedWidgetsSetup" :active="editModeIsActive" :resize-limit="checkResizeLimit" :margin-for-extra-row=".01" @draggedItem="draggedItem=$event" @rearrange-items="updatePositions" @gridHeight="gridHeight=$event" >
 			<template #default="item">
-				<div v-if="item.placeholder" class="empty-tile-hover" @click="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
+				<div v-if="item.placeholder" class="empty-tile-hover" @pointerdown="$emit('widgetAdd', name, { widget: 1, config: {}, place: {[gridWidth]: {x:item.x,y:item.y,w:1,h:1}}, custom: 1 })"></div>
 				<dashboard-item 
 					v-else
 					:id="item.widget"

public/js/components/Dashboard/Widget/Picker.js

@@ -40,7 +40,7 @@ export default {
 					<div v-if="!widgets.length">
 						No Widgets available
 					</div>
-					<div v-for="widget in widgets" :key="widget.widget_id" class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-2">
+					<div v-for="widget in widgets" :key="widget.widget_id" class="widget-icon-container col-sm-6 col-md-4 col-lg-3 col-xl-2">
 						<widget-icon @select="pick" :widget="widget" ></widget-icon>
 					</div>
 				</div>

public/js/components/Dashboard/Widget/WidgetIcon.js

@@ -20,7 +20,7 @@ export default {
 	emits:["select"],
 	template: /*html */`
 	<div class="card h-100" @click="$emit('select',widget.widget_id);">
-		<img class="card-img-top" :src="path(widget.setup.icon)" :alt="'pictogram for ' + (widget.setup.name || widget.widget_kurzbz)">
+		<img class="card-img-top widget-icon" :src="path(widget.setup.icon)" :alt="'pictogram for ' + (widget.setup.name || widget.widget_kurzbz)">
 		<div class="card-body">
 			<h5 class="card-title">{{ widget.setup.name || widget.widget_kurzbz }}</h5>
 			<p class="card-text">{{ widget.beschreibung }}</p>