feat: change news design

.gitignore

@@ -15,5 +15,6 @@ nbproject
 /backup
 /bin
 /public
+/packages/base/Resources/Public/Css
 /node_modules
 composer.lock

packages/base/Resources/Private/Extensions/News/Partials/List/Item.html

@@ -1,12 +1,13 @@
-<div class="article news-list-item">
+<div class="news-list-item {f:if(condition: '{big}', then: ' news-list-item-big')}">
-    <f:if condition="{newsItem.media}">
+    <f:link.page pageUid="{newsItem.link}" class="news-item-link">
-        <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
+        <f:if condition="{newsItem.media}">
-    </f:if>
+            <f:image image="{newsItem.media.0}" class="news-item-grid-image" alt="{newsItem.title}" />
-    <div class="news-item-content">
-        <f:if condition="{newsItem.firstCategory}">
-            <div class="news-item-category">{newsItem.firstCategory.title}</div>
         </f:if>
-        <h5 class="news-item-title">{newsItem.title}</h5>
+        <div class="news-item-content">
-        <f:link.page pageUid="{newsItem.link}" class="news-item-link"></f:link.page>
+            <f:if condition="{newsItem.firstCategory}">
-    </div>
+                <div class="news-item-category">{newsItem.firstCategory.title}</div>
+            </f:if>
+            <h3 class="news-item-title">{newsItem.title}</h3>
+        </div>
+    </f:link.page>
 </div>

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}" />

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 {
+    .news-item-content {
-      position: relative;
+      position: absolute;
-      padding: .5rem;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      background: var(--bs-primary);
+      color: #fff;
+      border-top-right-radius: 1rem;
+      padding: 1rem;
     }
 
-    time {
+    h3 {
-      padding-left: .6rem;
+      font-family: 'Inter', sans-serif;
-      color: var(--bs-gray-900);
+      font-size: 1.25rem;
-    }
+      font-weight: 500;
-
+      margin: 0;
-    .readmore {
+    }
-      color: var(--bs-primary);
+  }
+}
+
+.news-list-item-big {
+  a .news-item-content {
+    @media (min-width: $breakpoint-md) {
+      padding: 2.875rem;
     }
   }
 }