From 9fd0f43d3b961b0fc40727c4e3468826e6cc7471 Mon Sep 17 00:00:00 2001
From: Johann Hoffmann <ma0646@technikum-wien.at>
Date: Fri, 6 Dec 2024 13:04:28 +0100
Subject: [PATCH] news widget prev/next button hover styles; mobile responsive
 menu & gutter layout fix;

---
 public/css/components/dashboard/news.css     | 12 ++++++++++++
 public/js/components/DashboardWidget/News.js | 13 ++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
index 742884371..9cb5f1c32 100644
--- a/public/css/components/dashboard/news.css
+++ b/public/css/components/dashboard/news.css
@@ -70,3 +70,15 @@
 .fhc-carousel .carousel-item-end {
     transition: transform 0.44s ease-in-out, opacity 0.8s ease-in-out;
 }
+
+.carousel-control-prev,
+.carousel-control-next {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* Show the buttons when the carousel is hovered */
+.carousel:hover .carousel-control-prev,
+.carousel:hover .carousel-control-next {
+    opacity: 1;
+}
diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js
index dcc721cd5..1c84f33ed 100644
--- a/public/js/components/DashboardWidget/News.js
+++ b/public/js/components/DashboardWidget/News.js
@@ -145,13 +145,13 @@ export default {
                 <span class="small text-muted">{{ formatDateTime(news.insertamum) }}</span>
 			</div>
 		</div>
-        <div v-else class="row h-100">
-<!--        	TODO: mobile responsiveness of this part-->
+        <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;">
-						<div class="col-8 fhc-news-menu-item-betreff" style="overflow-y: hidden;"><p>{{news.content_obj.betreff ?? ''}}</p></div>
+					<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>
+<!--						TODO: format date in short form dd/mm/yyyy-->
 						<span class="fhc-news-menu-item-date fw-bold"
 						 >{{ news.datum ?? ''}}</span>
 					</div>
@@ -173,11 +173,10 @@ export default {
 								
 							</div>
 						</div>
-<!--						TODO: prev/next button styling && placement-->
-						<button @click="setPrev" style="z-index: 9999; color: black; opacity: 1;" data-bs-target="#carouselExample" class="carousel-control-prev" type="button">
+						<button @click="setPrev" style="z-index: 9999; color: black; overflow: hidden; width: 10%; margin-left: 5%;" data-bs-target="#carouselExample" class="carousel-control-prev" type="button">
 							<i class="fa fa-chevron-left"></i>
 						</button>
-						<button @click="setNext" style="z-index: 9999; color: black; opacity: 1;" data-bs-target="#carouselExample" class="carousel-control-next"  type="button">
+						<button @click="setNext" style="z-index: 9999; color: black; overflow: hidden; width: 10%; margin-right: 5%;" data-bs-target="#carouselExample" class="carousel-control-next"  type="button">
 							<i class="fa fa-chevron-right"></i>
 						</button>
 					</div>