Merge pull request #994 from City-of-Helsinki/UHF-9915

UHF-9915: Change News card teaser styling
City-of-Helsinki · May 29, 2024 · c47c419 · c47c419
2 parents f2b3f0b + ef63209
commit c47c419
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 32 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/pages/_news-page.scss b/src/scss/06_components/pages/_news-page.scss
@@ -8,7 +8,7 @@
   padding-top: 0;
 }
 
-:not(.latest-news-list) > .news-listing__item {
+:not(.latest-news-list, .component--top-news .news-listing) > .news-listing__item {
   list-style: none;
   margin-top: $spacing-and-half;
   padding-left: 0; // Remove card paddings from news listing
@@ -75,6 +75,19 @@
 }
 
 // News listings using medium teasers.
+.news-listing--medium-teasers {
+  list-style: none;
+
+  .news-listing__item + .news-listing__item {
+    margin-top: $spacing-and-half;
+
+    @include breakpoint($breakpoint-m) {
+      margin-top: 0;
+    }
+  }
+}
+
+// Latest news block variant.
 .news-listing--latest-medium-teasers {
   padding-inline-start: 0; // User agent stylesheet override
 
@@ -201,34 +214,28 @@
 }
 
 .news-listing--card-teasers {
-  padding-inline-start: 0; // User agent stylesheet override
+  grid-gap: 0;
+  display: grid;
+  list-style: none;
+  padding-left: 0;
 
   @include breakpoint($breakpoint-m) {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-inline-end: -#{$spacing-and-half};
+    grid-column-gap: $spacing-and-half;
+    grid-template-columns: repeat(3, 1fr);
   }
 
-  .news-listing__item {
-    @include breakpoint($breakpoint-m) {
-      width: 50%;
-    }
+  .news-listing__item + .news-listing__item {
+    margin-top: $spacing-double;
 
-    @include breakpoint($breakpoint-l) {
-      width: 25%;
+    @include breakpoint($breakpoint-m) {
+      margin-top: 0;
     }
   }
-
-  .news-listing__card-teaser {
-    height: 100%;
-  }
 }
 
 .news-listing__card-teaser {
-  border-bottom: 1px solid var(--color-black-5);
   display: flex;
-  padding-bottom: $spacing;
+  height: 100%;
   position: relative;
 
   &:hover .hel-icon--arrow-right {
@@ -240,21 +247,12 @@
   }
 
   @include breakpoint($breakpoint-m) {
-    border: 1px solid var(--color-black);
     flex-direction: column;
-    margin-inline-end: $spacing-and-half;
     padding-bottom: 0;
   }
 
   .news-listing__title {
-    @include font('h5');
-
-    // The card style changes already on breakpoint-m so we need to switch to larger
-    // h5-style earlier.
-    @include breakpoint($breakpoint-m) {
-      font-size: remify(20px);
-      line-height: 30 / 20;
-    }
+    @include font('h4');
   }
 
   .news-listing__img {
@@ -284,11 +282,15 @@
     width: 60%;
 
     @include breakpoint($breakpoint-m) {
-      padding: $spacing;
+      padding: $spacing 0 0 0;
       width: unset;
     }
   }
 
+  .news-listing__link {
+    text-decoration: underline;
+  }
+
   .news-listing__title,
   .news-listing__datetime {
     margin-bottom: $spacing-half;

diff --git a/templates/module/helfi-news-item/node--news-item--card-teaser.html.twig b/templates/module/helfi-news-item/node--news-item--card-teaser.html.twig
@@ -27,7 +27,5 @@
         {{ published_at|format_date('publication_date_format') }}
       </time>
     {% endif %}
-
-    {% include "@hdbt/misc/icon.twig" with {icon: 'arrow-right'} only %}
   </div>
 </div>