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

news widget prev/next button hover styles; mobile responsive menu & gutter layout fix;

Browse Source
This commit is contained in:
Johann Hoffmann
2024-12-06 13:04:28 +01:00
parent 39ffd6bdb9
commit 9fd0f43d3b
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/dashboard/news.css
+12
View File
@@ -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;
}
public/js/components/DashboardWidget/News.js
+6 -7
View File
@@ -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>