From 5e9997d41f1119d910cd3f8ad81906288ba987f1 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Sat, 14 Dec 2024 00:23:57 +0100
Subject: [PATCH] feat: change news design

---
 .gitignore                                    |  1 +
 .../Extensions/News/Partials/List/Item.html   | 21 ++++++-----
 .../Extensions/News/Templates/News/List.html  |  2 +-
 .../Public/Scss/components/_news.scss         | 37 ++++++++++++++-----
 4 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 07d3fe8..e88e727 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,5 +15,6 @@ nbproject
 /backup
 /bin
 /public
+/packages/base/Resources/Public/Css
 /node_modules
 composer.lock
diff --git a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
index c0d9517..091f3aa 100644
--- a/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
+++ b/packages/base/Resources/Private/Extensions/News/Partials/List/Item.html
@@ -1,12 +1,13 @@
-<div class="article news-list-item">
-    <f:if condition="{newsItem.media}">
-        <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
-    </f:if>
-    <div class="news-item-content">
-        <f:if condition="{newsItem.firstCategory}">
-            <div class="news-item-category">{newsItem.firstCategory.title}</div>
+<div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
+    <f:link.page pageUid="{newsItem.link}" class="news-item-link">
+        <f:if condition="{newsItem.media}">
+            <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
         </f:if>
-        <h5 class="news-item-title">{newsItem.title}</h5>
-        <f:link.page pageUid="{newsItem.link}" class="news-item-link"></f:link.page>
-    </div>
+        <div class="news-item-content">
+            <f:if condition="{newsItem.firstCategory}">
+                <div class="news-item-category">{newsItem.firstCategory.title}</div>
+            </f:if>
+            <h3 class="news-item-title">{newsItem.title}</h3>
+        </div>
+    </f:link.page>
 </div>
diff --git a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
index b7def99..50b86b3 100644
--- a/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
+++ b/packages/base/Resources/Private/Extensions/News/Templates/News/List.html
@@ -14,7 +14,7 @@
     <f:defaultCase>
         <f:if condition="{iterator.isFirst}">
             <f:then>
-                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
+                <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator,big:1}" />
             </f:then>
             <f:else>
                 <f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index 1823ad1..fecccf1 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -92,22 +92,39 @@
     height: auto;
   }
 
+
   a {
+    position: relative;
     display: flex;
     flex-direction: column;
+    border-radius: 1rem;
+    border-bottom-right-radius: 0;
+    overflow: hidden;
 
-    .body {
-      position: relative;
-      padding: .5rem;
+    .news-item-content {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: var(--bs-primary);
+      color: #fff;
+      border-top-right-radius: 1rem;
+      padding: 1rem;
     }
 
-    time {
-      padding-left: .6rem;
-      color: var(--bs-gray-900);
-    }
-
-    .readmore {
-      color: var(--bs-primary);
+    h3 {
+      font-family: 'Inter', sans-serif;
+      font-size: 1.25rem;
+      font-weight: 500;
+      margin: 0;
+    }
+  }
+}
+
+.news-list-item-big {
+  a .news-item-content {
+    @media (min-width: $breakpoint-md) {
+      padding: 2.875rem;
     }
   }
 }