diff --git a/application/controllers/api/frontend/v1/Cms.php b/application/controllers/api/frontend/v1/Cms.php index 16142532b..e41196f45 100644 --- a/application/controllers/api/frontend/v1/Cms.php +++ b/application/controllers/api/frontend/v1/Cms.php @@ -125,7 +125,7 @@ class Cms extends FHCAPI_Controller //get the data or terminate with error $news = $this->getDataOrTerminateWithError($news); - + // collect the content of the news foreach($news as $news_element){ $this->addMeta("content_id",$news_element->content_id); @@ -134,12 +134,17 @@ class Cms extends FHCAPI_Controller $this->NewsModel->resetQuery(); $content = $this->cmslib->getContent($news_element->content_id); - $content = $this->getDataOrTerminateWithError($content); + $content = getData($content); $news_element->content_obj = $content; } + $withContent = function($news) { + return $news->content_obj != null; + }; + + $newsWithContent = array_filter($news, $withContent); - $this->terminateWithSuccess($news); + $this->terminateWithSuccess($newsWithContent); } diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css index d0c68ae87..b979a6bec 100644 --- a/public/css/components/dashboard/news.css +++ b/public/css/components/dashboard/news.css @@ -1,23 +1,72 @@ -.widgets-news .card-header { - flex-direction: column; - align-items: flex-start !important; - -} - :root{ --news-widget-height: 1; } -.widgets-news .news-content > div, -.widgets-news .news-content .row:nth-child(1), -.widgets-news .news-content .news-list, -.widgets-news .news-content .news-list-item, -.widgets-news .news-content .card-body -{ - height: 100%; -} - .widgets-news img { max-width: 100%; -} \ No newline at end of file +} + +.fhc-news-menu-item { + padding: 0.375rem; + color: var(--fhc-cis-menu-lvl-1-color); + min-height: 5%; + max-height: 30%; + 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 */ + 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 */ +} + +.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 */ +} + +.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 *!*/ +} + +.fhc-news-menu-item-betreff +{ + width: 100%; + text-align: center; + max-height: 100%; + height: 100%; +} + +.fhc-news-menu-item-date { + text-align: end; + width: 100%; + max-height: 100%; + height: 100%; +} + +.fhc-carousel .carousel-item { + transition: transform 0.375s ease-in-out, opacity 0.75s ease-in-out; /* Customize duration and easing */ +} + +.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 */ +} + +.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 */ +} diff --git a/public/js/components/DashboardWidget/News.js b/public/js/components/DashboardWidget/News.js index 2946e24b1..94d14fdde 100644 --- a/public/js/components/DashboardWidget/News.js +++ b/public/js/components/DashboardWidget/News.js @@ -1,14 +1,17 @@ import AbstractWidget from './Abstract'; import BsModal from '../Bootstrap/Modal'; -const MAX_LOADED_NEWS = 10; +const MAX_LOADED_NEWS = 30; export default { name: "WidgetsNews", - components: {BsModal}, + components: { + BsModal + }, data: () => ({ allNewsList: [], singleNews: {}, + selected: null }), mixins: [AbstractWidget], computed: { @@ -17,10 +20,12 @@ export default { }, newsList() { //Return news amount depending on widget width and size - let quantity = this.width; + // let quantity = this.width; + let quantity = MAX_LOADED_NEWS; + if (this.width === 1) { - quantity = this.height === 1 ? 4 : 10; + quantity = this.height === 1 ? 4 : MAX_LOADED_NEWS; } return this.allNewsList.slice(0, quantity); @@ -31,12 +36,18 @@ export default { "skin/images/fh_technikum_wien_illustration_klein.png" ); }, + activeNews() { + return this.allNewsList.find(news => news.minimized === false) ?? this.allNewsList[0] ?? null + } }, created() { this.$fhcApi.factory.cms .news(MAX_LOADED_NEWS) .then((res) => { - this.allNewsList = res.data; + this.allNewsList = Array.from(Object.values(res.data)); + + this.selected = this.allNewsList.length ? this.allNewsList[0] : null + }) .catch((err) => { console.error("ERROR: ", err.response.data); @@ -45,6 +56,39 @@ export default { this.$emit("setConfig", false); }, methods: { + setNext(){ + const thisIndex = this.allNewsList.findIndex(n=>n.news_id == this.selected.news_id) + const nextIndex = thisIndex == (this.allNewsList.length - 1) ? 0 : thisIndex + 1 + this.setSelected(this.allNewsList[nextIndex]) + }, + setPrev() { + const thisIndex = this.allNewsList.findIndex(n=>n.news_id == this.selected.news_id) + const prevIndex = thisIndex ? thisIndex - 1 : this.allNewsList.length - 1 + this.setSelected(this.allNewsList[prevIndex], 'prev') + }, + setSelected(news, direction = "next") { + if (this.selected && news && this.selected === news) return + + if(this.selected){ + const otherDirection = direction === "next" ? "prev" : "next" + + const oldCard = document.getElementById('card-'+this.selected.news_id) + oldCard.classList.remove('active') + oldCard.classList.add('carousel-item-'+otherDirection) + } + + 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 + + }, contentURI: function (content_id) { return ( FHC_JS_DATA_STORAGE_OBJECT.app_root + @@ -67,23 +111,56 @@ export default { }, template: /*html*/ `
-
+
+
-
+
- {{ news.content_obj.betreff?news.content_obj.betreff:getDate(news.insertamum) }}
- {{ formatDateTime(news.insertamum) }} -
-
-
-
-
-
-
-
-
-
-
+ {{ news.content_obj.betreff?news.content_obj.betreff:getDate(news.insertamum) }}
+ {{ formatDateTime(news.insertamum) }} +
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+
`,