From 41ad440cd402001ff21bcca77c6fa0ecc7965b5f Mon Sep 17 00:00:00 2001 From: Johann Hoffmann Date: Mon, 2 Dec 2024 16:41:42 +0100 Subject: [PATCH] update newsWidget template & css, fixed carousel css transition; --- public/css/components/dashboard/news.css | 30 ++++---- public/js/components/DashboardWidget/News.js | 81 ++++++++++++-------- 2 files changed, 66 insertions(+), 45 deletions(-) diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css index b979a6bec..742884371 100644 --- a/public/css/components/dashboard/news.css +++ b/public/css/components/dashboard/news.css @@ -15,31 +15,31 @@ width: 100%; justify-content: space-between; align-items: center; - /*background-color: #769b12;*/ background-color: #00649c; - /*background-color: var(--fhc-cis-menu-lvl-1-bg);*/ - border: 1px solid #f1f1f1; /* Button border */ - /*border-radius: 5px; !* Rounded corners *!*/ - font-size: 16px; /* Adjust text size */ - cursor: pointer; /* Make it look clickable */ + border: 1px solid #f1f1f1; + font-size: 16px; + cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */ } .fhc-news-menu-item:hover { - /*background-color: #8bb717; !* Darker shade for hover effect *!*/ background-color: var(--fhc-cis-menu-lvl-1-bg-hover); - border-color: #f1f1f1; /* Darker border for hover effect */ + border-color: #f1f1f1; } .fhc-news-menu-item:active { - /*background-color: #b1e81a; !* Even darker shade when clicked *!*/ background-color: var(--fhc-cis-menu-lvl-1-color-hover); - border-color: #f1f1f1; /* Darker border when clicked */ + border-color: #f1f1f1; +} + +.fhc-news-menu-item.selected { + background-color: var(--fhc-cis-menu-lvl-1-bg-hover); + border-right: 2px solid #fff; + } .fhc-news-menu-item:focus { - outline: none; /* Remove the outline on focus */ - /*box-shadow: 0 0 0 0.2rem rgba(183, 255, 0, 0.96); !* Focus ring for accessibility *!*/ + outline: none; } .fhc-news-menu-item-betreff @@ -58,15 +58,15 @@ } .fhc-carousel .carousel-item { - transition: transform 0.375s ease-in-out, opacity 0.75s ease-in-out; /* Customize duration and easing */ + transition: transform 0.375s ease-in-out, opacity 0.75s ease-in-out; } .fhc-carousel .carousel-item-next, .fhc-carousel .carousel-item-prev { - transition: transform 0.44s ease-in-out, opacity 0.8s ease-in-out; /* Apply the same timing */ + transition: transform 0.44s ease-in-out, opacity 0.8s ease-in-out; } .fhc-carousel .carousel-item-start, .fhc-carousel .carousel-item-end { - transition: transform 0.44s ease-in-out, opacity 0.8s ease-in-out; /* Ensure smooth entry and exit */ + transition: transform 0.44s ease-in-out, opacity 0.8s ease-in-out; } diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js index 94d14fdde..f774f0934 100644 --- a/public/js/components/DashboardWidget/News.js +++ b/public/js/components/DashboardWidget/News.js @@ -66,26 +66,50 @@ export default { const prevIndex = thisIndex ? thisIndex - 1 : this.allNewsList.length - 1 this.setSelected(this.allNewsList[prevIndex], 'prev') }, + getMenuItemClass(news) { + let classString = '' + if(this.selected && this.selected.news_id === news.news_id) { + classString += 'selected' + } + return classString + }, + getDynClassCarouselItem(news, index) { + // sets classes prev/active/next for bootstrap carousel + let classString = '' + + // return active class to news === selected OR very first news + if((this.selected.news_id === news.news_id) || (this.selected === null && index === 0)) { + classString = 'active'; + } else { // set prev/next class for news + const selectedIndex = this.newsList.indexOf(this.selected) + const ownIndex = this.newsList.indexOf(news) + const isPrev = (ownIndex + 1) === selectedIndex || (ownIndex === this.newsList.length - 1 && selectedIndex === 0) + if(isPrev) { + classString += ' carousel-item-prev' + } + const isNext = (ownIndex - 1) === selectedIndex || (ownIndex === 0 && selectedIndex === this.newsList.length - 1) + if(isNext) { + classString += ' carousel-item-next' + } + } + + return classString; + }, setSelected(news, direction = "next") { if (this.selected && news && this.selected === news) return + + const oldCard = document.getElementById('card-'+this.selected.news_id) - if(this.selected){ - const otherDirection = direction === "next" ? "prev" : "next" + // TODO: to show animation of non neighbour item through menu reapply css classes + if(direction === 'next') { + // set nextCard .carousel-item-next.carousel-item-start + oldCard.classList.add('carousel-item-start') - const oldCard = document.getElementById('card-'+this.selected.news_id) - oldCard.classList.remove('active') - oldCard.classList.add('carousel-item-'+otherDirection) + } else { + // set prevCard .carousel-item-prev.carousel-item-end + oldCard.classList.add('carousel-item-end') } - const newCard = document.getElementById('card-'+news.news_id) - newCard.classList.add('carousel-item-'+direction) - void newCard.offsetWidth; - newCard.classList.add('active') - - newCard.addEventListener('transitionend', () => { - newCard.classList.remove('carousel-item-'+direction); - }, { once: true }); - this.selected = news }, @@ -120,42 +144,39 @@ export default { {{ formatDateTime(news.insertamum) }} -
-
-
-
-
-
+ +
-
-
+
+
-