Add dataset feed to homepage

CHANGELOG.md

@@ -4,10 +4,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Feat #199: Add dataset feed to homepage
+- Feat #208: Homepage news items section rework
 - Feat #456: Improve DataCite metadata by migrating to Datacite version 4.6
 - Fix #1727: Sort files and samples by id in descending order when querying
 
-## v4.4.1 - 2024-12-24 - 51c426dfe - 
+## v4.4.1 - 2024-12-24 - 51c426dfe -
 
 - Feat #2067: Sort files by size in dataset page
 - Feat #372: Save dataset as xml in log

less/index.less

@@ -64,4 +64,7 @@
 @import "modules/team-grid.less";
 @import "modules/map.less";
 @import "modules/lists.less";
-@import "modules/tooltip.less";
+@import "modules/tooltip.less";
+@import "modules/carousel-slider.less";
+@import "modules/news-section.less";
+@import "modules/dataset-feed-section.less"

less/modules/carousel-slider.less

@@ -0,0 +1,156 @@
+.carousel-container {
+  padding: 0;
+}
+
+.carousel.with-indicators {
+  // offset indicators height to keep consistent spacing with next section
+  margin-bottom: 16px;
+}
+
+.carousel-inner > .item > .row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-block: 0;
+  margin-inline: -7px;
+}
+
+.carousel-item {
+  flex: 1 0 auto;
+  padding: 8px;
+  .carousel-block {
+    margin: 0;
+    padding: 24px;
+    background: @color-true-white;
+    border: 1px solid @color-light-gray;
+    height: 220px;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border-color: @color-gigadb-green-600;
+    }
+  }
+}
+
+.carousel-control {
+  width: 44px;
+  height: 44px;
+  background-color: @color-true-white;
+  color: @color-gigadb-green;
+  border: 1px solid @color-light-gray;
+  border-radius: 50%;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 1;
+  background-image: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  position: absolute;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+
+  &:hover,
+  &:focus {
+    color: @color-true-white;
+    background-color: @color-gigadb-green;
+    border-color: @color-gigadb-green;
+    box-shadow: 0 4px 12px rgba(8, 137, 62, 0.15);
+    transform: translateY(-50%) scale(1.05);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(8, 137, 62, 0.2);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.98);
+  }
+
+  &.left {
+    left: 10px;
+  }
+
+  &.right {
+    right: 10px;
+  }
+}
+
+.carousel-indicators {
+  bottom: -40px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  .carousel-indicator {
+    @size: 16px;
+    min-width: @size;
+    min-height: @size;
+    border: none;
+    background-color: transparent;
+    border-radius: 50%;
+    margin: 0;
+    padding: 0;
+    transform: scale(1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    &.active {
+      .carousel-indicator-link::after {
+        background-color: @color-gigadb-green;
+        transform: scale(1.333);
+      }
+    }
+    .carousel-indicator-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      border-radius: 50%;
+      position: relative;
+      &::after {
+        content: "";
+        width: 6px;
+        height: 6px;
+        background-color: fade(@color-gigadb-green, 30%);
+        border-radius: 50%;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      &:hover::after {
+        background-color: fade(@color-gigadb-green, 50%);
+      }
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px fade(@color-gigadb-green, 20%);
+      }
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .carousel-control.left {
+    left: -20px;
+  }
+
+  .carousel-control.right {
+    right: -20px;
+  }
+}
+
+@media (min-width: 992px) {
+  .carousel-control.left {
+    left: -20px;
+  }
+
+  .carousel-control.right {
+    right: -20px;
+  }
+}

less/modules/dataset-feed-section.less

@@ -0,0 +1,49 @@
+.dataset-feed-section {
+  .carousel-block {
+    height: auto;
+  }
+  .dataset-item {
+    .dataset-image-wrapper {
+      width: 100%;
+      padding-bottom: 100%;
+      position: relative;
+      background-color: @color-lighter-gray;
+      margin-bottom: 15px;
+
+      .dataset-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .dataset-doi {
+      font-size: 14px;
+      color: @color-darker-gray;
+      margin-bottom: 10px;
+    }
+
+    .dataset-title {
+      margin: 0 0 10px 0;
+      line-height: 1.4;
+      color: @color-warm-black;
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+      // fixing the height of the title to minimize layout issues
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+      line-clamp: 3;
+      height: 4.2em; // line-height * 3
+    }
+
+    .dataset-date {
+      font-size: 14px;
+      color: @color-darker-gray;
+      height: 1em;
+    }
+  }
+}

less/modules/news-section.less

@@ -0,0 +1,51 @@
+.news-section {
+  .news-title {
+    margin: 0 0 16px;
+    color: @color-warm-black;
+    font-size: 1.25rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .news-body {
+    flex-grow: 1;
+    margin-bottom: 16px;
+    overflow: hidden;
+    color: @darker-gray-on-white;
+    line-height: 1.5;
+    font-size: 0.95rem;
+  }
+
+  .news-more-link {
+    align-self: flex-end;
+    color: @gigadb-green-on-white;
+    font-weight: 500;
+    text-decoration: none;
+    padding: 6px 0;
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: 4px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: currentColor;
+      transform: scaleX(0);
+      transition: transform 0.2s ease;
+    }
+
+    &:hover:after {
+      transform: scaleX(1);
+    }
+
+    &:focus {
+      outline-offset: 2px;
+      outline: solid 2px @color-warm-black;
+    }
+  }
+}

protected/components/NewsAndFeedsService.php

@@ -95,4 +95,24 @@ public function getRss()
 
         return $feed;
     }
+
+    public function getFeedDatasets($limit = 10)
+    {
+        $model = new Dataset();
+        $model->unsetAttributes();
+
+        $criteria = new CDbCriteria();
+        $criteria->addCondition("upload_status = 'Published'");
+        $criteria->order = 'publication_date DESC';
+
+        if (isset($_GET['Dataset'])) {
+            $model->setAttributes($_GET['Dataset']);
+        }
+
+        $dataProvider = $model->search();
+        $dataProvider->criteria->mergeWith($criteria);
+        $dataProvider->pagination->pageSize = $limit;
+
+        return $dataProvider->getData();
+    }
 }

protected/controllers/SiteController.php

@@ -100,6 +100,8 @@ public function actionIndex() {
 
         $rss_arr = Yii::app()->newsAndFeedsService->getFeedsData();
 
+        $feed_datasets = Yii::app()->newsAndFeedsService->getFeedDatasets(12);
+
         //Get dataset types number
         $sql_1="select * from homepage_dataset_type";
         $command = Yii::app()->db->createCommand($sql_1);
@@ -208,30 +210,30 @@ public function actionIndex() {
 			'dataset_hint'=>$datasettypes_hints ,
 			'rss_arr' => $rss_arr ,
 			'count' => count($publicIds),
-                        'count_sample' => $count_sample[0]['count'],
-                        'count_file' => $count_file[0]['count'],
-                        'number_genome_mapping'=>$number_genome_mapping,
-                        'number_climate' => $number_climate,
-                        'number_ecology'=>$number_ecology,
-                        'number_eeg'=>$number_eeg,
-                        'number_epi'=>$number_epi,
-                        'number_genomic'=>$number_genomic,
-                        'number_imaging'=>$number_imaging,
-                        'number_lipi'=>$number_lipi,
-                        'number_metabarcoding'=>$number_metabarcoding,
-                        'number_metabolomic'=>$number_metabolomic,
-                        'number_metadata'=>$number_metadata,
-                        'number_metagenomic'=>$number_metagenomic,
-                        'number_na'=>$number_na,
-                        'number_ns'=>$number_ns,
-                        'number_pt'=>$number_pt,
-                        'number_proteomic'=>$number_proteomic,
-                        'number_software'=>$number_software,
-                        'number_ts'=>$number_ts,
-                        'number_vm'=>$number_vm,
-                        'number_wf'=>$number_wf,
-
-                        )
+      'count_sample' => $count_sample[0]['count'],
+      'count_file' => $count_file[0]['count'],
+      'number_genome_mapping'=>$number_genome_mapping,
+      'number_climate' => $number_climate,
+      'number_ecology'=>$number_ecology,
+      'number_eeg'=>$number_eeg,
+      'number_epi'=>$number_epi,
+      'number_genomic'=>$number_genomic,
+      'number_imaging'=>$number_imaging,
+      'number_lipi'=>$number_lipi,
+      'number_metabarcoding'=>$number_metabarcoding,
+      'number_metabolomic'=>$number_metabolomic,
+      'number_metadata'=>$number_metadata,
+      'number_metagenomic'=>$number_metagenomic,
+      'number_na'=>$number_na,
+      'number_ns'=>$number_ns,
+      'number_pt'=>$number_pt,
+      'number_proteomic'=>$number_proteomic,
+      'number_software'=>$number_software,
+      'number_ts'=>$number_ts,
+      'number_vm'=>$number_vm,
+      'number_wf'=>$number_wf,
+      'feed_datasets'=>$feed_datasets
+      )
 
 		);
 	}