From 9ddb9f46fdec8a5a84d041666a230845bd6ccff8 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Tue, 22 Jul 2025 13:30:25 +0200
Subject: [PATCH] refactor(Cis4 News Widget Responsive): changes the responsive
 column layouts for the news widget

---
 public/css/components/dashboard/news.css     | 11 +++++++++--
 public/js/components/DashboardWidget/News.js | 10 +++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
index 975ef7a81..a5bca7afe 100644
--- a/public/css/components/dashboard/news.css
+++ b/public/css/components/dashboard/news.css
@@ -169,6 +169,13 @@
 	cursor: pointer;
 }
 
-.fhc-news-items-sm{
-
+.news-truncate {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	/* number of lines to show */
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-break: break-word;
 }
+
diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js
index 7f4419aa6..a6c94b90e 100644
--- a/public/js/components/DashboardWidget/News.js
+++ b/public/js/components/DashboardWidget/News.js
@@ -224,7 +224,7 @@ export default {
         <div class="h-100 fhc-news-items-sm" style="overflow-y: auto" v-show="width == 1" >
             <div  v-for="(news, index) in newsList" :key="news.news_id" class="py-2">
 				<div class="row m-0">
-					<div class="col-12 col-md-3 d-flex">
+					<div class="col-12 d-flex">
 						<span class="small">{{ formatDate(news.insertamum) }} </span>
 						<span class="ms-auto small">{{ formatTime(news.insertamum) }} </span>
 					</div>
@@ -235,20 +235,20 @@ export default {
 			</div>
 		</div>
         <div v-show="width >1" class="row h-100 g-0">
-        	<div style="overflow: auto;" class="fhc-news-items-lg border-end h-100 g-0 col-12 col-sm-3 col-md-4 col-lg-5" >
+        	<div :class="'col-'+(width == 4? 3: width == 3? 4 :6)" style="overflow: auto;" class="fhc-news-items-lg border-end h-100 g-0 " >
         		<template v-for="news in newsList" :key="'menu-'+news.news_id" >
 				<div class="row m-0 py-2" @click="setSelected(news)">
-					<div class="col-md-12 d-flex">
+					<div class="col-md-12 d-flex mb-2">
 						<span class="small">{{ formatDate(news.insertamum) }} </span>
 						<span class="ms-auto small">{{ formatTime(news.insertamum) }} </span>
 					</div>
-					<div class="col-md-12">
+					<div class="col-md-12 news-truncate">
 						<span >{{ news.content_obj.betreff?news.content_obj.betreff:getDate(news.insertamum) }}</span>
 					</div>
 				</div>
 				</template>
 			</div>
-			<div style="padding-left: 0px; padding-right: 0px;" ref="htmlContent" class="h-100 col-12 col-sm-9 col-md-8 col-lg-7">
+			<div style="padding-left: 0px; padding-right: 0px;" ref="htmlContent" class="h-100 col">
 				<div class="container h-100" style="padding: 0px;"  ref="carocontainer">
 					<div id="FhcCarouselContainer" style="height: 100%;" ref="carousel" class="carousel slide fhc-carousel" data-bs-interval="false">