blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-01 20:29:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

update newsWidget template & css, fixed carousel css transition;

Browse Source
This commit is contained in:
Johann Hoffmann
2024-12-02 16:41:42 +01:00
parent bf5e8e9c0e
commit 41ad440cd4
2 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/dashboard/news.css
+15 -15
View File
@@ -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;
}
public/js/components/DashboardWidget/News.js
+51 -30
View File
@@ -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 {
<span class="small text-muted">{{ formatDateTime(news.insertamum) }}</span>
</div>
</div>
<div v-else-if="width > 1 && height === 1" class="h-100" :class="'row row-cols-' + width">
<div class="h-100" v-for="news in newsList" :key="news.id">
<div class="news-content h-100" :style="'--news-widget-height: '+height" ref="htmlContent" v-html="news.content_obj.content"></div>
</div>
</div>
<div v-else class="row h-100">
<div :class="'col-'+(width == 2? 6 : 4) + ' h-100'" style="overflow: auto; padding-right: 0px; margin: 0px;">
<!-- TODO: mobile responsiveness of this part-->
<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)">
<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>
<span class="fhc-news-menu-item-date"
<span class="fhc-news-menu-item-date fw-bold"
>{{ news.datum ?? ''}}</span>
</div>
</template>
</div>
<div :class="'col-'+(width == 2? 6 : 8) + ' h-100'" ref="htmlContent" style="padding: 0px; margin: 0px;">
<div class="container" style="padding: 0px; height: 100%;" ref="carocontainer">
<div :class="'col-'+(width == 2? 6 : 8) + ' h-100'" style="padding-left: 0px; padding-right: 0px;" ref="htmlContent">
<div class="container h-100" style="padding: 0px;" ref="carocontainer">
<div id="carouselExampleControls" style="height: 100%;" class="carousel slide fhc-carousel" data-bs-ride="carousel"
<div id="carouselExample" style="height: 100%;" class="carousel slide fhc-carousel" data-bs-ride="carousel"
data-bs-interval="false"
ref="carocontrols">
<div class="carousel-indicators">
<button v-for="(news, index) in newsList" :id="'indicator-'+news_news_id" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="index"></button>
<button v-for="(news, index) in newsList" :id="'indicator-'+news_news_id" type="button" data-bs-target="#carouselExample" data-bs-slide-to="index"></button>
</div>
<div class="carousel-inner" style="height: 100%;">
<div v-for="news in newsList" class="carousel-item" :class="(this.selected.news_id === news.news_id ? 'active' : '')" :id="'card-'+news.news_id" style="height: 100%; overflow-y: auto; margin: 0px;" v-html="news.content_obj.content">
<div class="carousel-inner" style="height: 100%; max-width: 100%;">
<div v-for="(news, index) in newsList" class="carousel-item" :class="getDynClassCarouselItem(news, index)" style="overflow-y: auto; height: 100%;" :id="'card-'+news.news_id" v-html="news.content_obj.content">
</div>
</div>
<button @click="setPrev" style="z-index: 9999; color: black; opacity: 1;" class="carousel-control-prev" type="button">
<!-- 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">
<i class="fa fa-chevron-left"></i>
</button>
<button @click="setNext" style="z-index: 9999; color: black; opacity: 1;" class="carousel-control-next" type="button">
<button @click="setNext" style="z-index: 9999; color: black; opacity: 1;" data-bs-target="#carouselExample" class="carousel-control-next" type="button">
<i class="fa fa-chevron-right"></i>
</button>
</div>