From 065f6bdedea9eb5d98ee3055308c61e079c9894b Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 22 Jan 2025 13:36:59 +0100
Subject: [PATCH] update(News Dashboard): updates the stylesheet so that the
 layout of the news is responsive

---
 public/css/components/dashboard/news.css     | 60 +++++++++++++++++++-
 public/js/components/DashboardWidget/News.js | 47 +++++++++++----
 2 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
index 9cb5f1c32..58d9ad263 100644
--- a/public/css/components/dashboard/news.css
+++ b/public/css/components/dashboard/news.css
@@ -2,6 +2,45 @@
     --news-widget-height: 1;
 }
 
+
+
+/* media query for sm sizes */
+@media (min-width :576px) {
+	.fhc-news-menu-item {
+		/* padding: top right bottom left */
+		padding:0em 0em 0em 0em !important;
+	}
+}
+/* media query for md sizes */
+@media (min-width :768px) {
+	.fhc-news-menu-item {
+		/* padding: top right bottom left */
+		padding: 0.3em 0.3em 0.3em 0.3em !important;
+	}
+}
+/* media query for lg sizes */
+@media (min-width :992px) {
+	.fhc-news-menu-item {
+		/* padding: top right bottom left */
+		padding: 0.3em 0.3em 0.3em 0.3em !important;
+	}
+}
+/* media query for xl sizes */
+@media (min-width :1200px) {
+	.fhc-news-menu-item {
+		/* padding: top right bottom left */
+		padding: 1em 1em 0.3em 1em !important;
+	}
+}
+
+/* media query for xxl sizes */
+@media (min-width :1400px) {
+	.fhc-news-menu-item {
+		/* padding: top right bottom left */
+		padding: 1.2em 1.2em 0.3em 1.2em !important;
+	}
+}
+
 .widgets-news img
 {
     max-width: 100%;
@@ -17,7 +56,6 @@
     align-items: center;
     background-color: #00649c;
     border: 1px solid #f1f1f1;
-    font-size: 16px;
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
 }
@@ -82,3 +120,23 @@
 .carousel:hover .carousel-control-next {
     opacity: 1;
 }
+
+.fhc-news-text{
+	font-size: 0.75em;
+}
+
+.fhc-news-xs {
+	font-size: 0.6em;
+}
+
+.fhc-news-sm {
+	font-size: 0.7em;
+}
+
+.fhc-news-md {
+	font-size: 1.1em;
+}
+
+.fhc-news-lg {
+	font-size: 1.4em;
+}
diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js
index a459e1325..198aa7736 100644
--- a/public/js/components/DashboardWidget/News.js
+++ b/public/js/components/DashboardWidget/News.js
@@ -11,10 +11,14 @@ export default {
 	data: () => ({
 		allNewsList: [],
 		singleNews: {},
-		selected: null
+		selected: null,
+		size:0,
 	}),
 	mixins: [AbstractWidget],
 	computed: {
+		sizeClass() {
+			return 'fhc-news-' + ['xs', 'sm', 'md', 'lg'][this.size];
+		},
 		getNewsWidgetStyle() {
 			return this.width == 1 ? "padding: 1rem 1rem;" : "padding: 0px;"
 		},
@@ -162,12 +166,29 @@ export default {
 		this.carouselInstance = new bootstrap.Carousel(this.$refs.carousel, {
 			wrap: false, // keep this off even though it actually wraps
 			interval: false
-		})
+		});
+
+		if (this.$refs.container) {
+			new ResizeObserver(entries => {
+				console.log(entries,"this are the entries")
+				for (const entry of entries) {
+					let w = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width;
+					// TODO(chris): rework sizing
+					if (w > 600)
+						this.size = 3;
+					else if (w > 350)
+						this.size = 2;
+					else if (w > 250)
+						this.size = 1;
+					else
+						this.size = 0;
+				}
+			}).observe(this.$refs.container);
+		}
 	},
 	template: /*html*/ `
-<div class="widgets-news h-100" :style="getNewsWidgetStyle">
+<div ref="container" class="widgets-news h-100" :class="sizeClass" :style="getNewsWidgetStyle">
     <div class="d-flex flex-column h-100">
-
         <div class="h-100" style="overflow-y: auto" v-if="width == 1">
             <div  v-for="(news, index) in newsList" :key="news.news_id" class="mt-2">
                 <div v-if="index > 0 " class="fhc-seperator"></div>
@@ -178,15 +199,17 @@ export default {
         <div v-else class="row h-100 g-0">
         	<div :class="'col-'+(width == 2? 6 : 4) + ' h-100 g-0'" style="overflow: auto;">
         		<template v-for="news in newsList" :key="'menu-'+news.news_id">
-					<div class="row fhc-news-menu-item" @click="setSelected(news)" :class="getMenuItemClass(news)" style="margin-right: 0px; margin-left: 0px; overflow-y: hidden;">
-						<div class="col-8 fhc-news-menu-item-betreff">
-							<p >
-								{{news.content_obj.betreff ?? ''}}
-							</p>
+					<div class="position-relative">
+						<div class="row fhc-news-menu-item " @click="setSelected(news)" :class="getMenuItemClass(news)" style="margin-right: 0px; margin-left: 0px; overflow-y: hidden;">
+							<div class="col-8 fhc-news-menu-item-betreff">
+								<p class="fhc-news-text mb-0">
+									{{news.content_obj.betreff ?? ''}}
+								</p>
+							</div>
+							<span style="top:2px; right:0" class=" position-absolute d-none d-xl-block fhc-news-text fhc-news-menu-item-date fw-bold">
+								{{ news.datumformatted ?? ''}}
+							</span>
 						</div>
-						<span class="fhc-news-menu-item-date fw-bold">
-							{{ news.datumformatted ?? ''}}
-						</span>
 					</div>
 				</template>
 			</div>