Merge pull request #999 from City-of-Helsinki/UHF-9736_article_featur…

…e_fixes UHF-9736: Article feature fixes
City-of-Helsinki · May 30, 2024 · c466850 · c466850
2 parents 7af3ada + bddba74
commit c466850
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 40 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/05_objects/__index.scss b/src/scss/05_objects/__index.scss
@@ -4,5 +4,6 @@
 @import 'hyphenate';
 @import 'link';
 @import 'quote';
+@import 'unpublished-content-flag';
 @import 'user-edited-content';
 @import 'main-image';
diff --git a/src/scss/05_objects/_card.scss b/src/scss/05_objects/_card.scss
@@ -167,6 +167,11 @@ $item-gap: $spacing-half;
   @include font('body');
   padding-left: $spacing-double; // icon-size + gap
 
+  [dir='rtl'] & {
+    padding-left: 0;
+    padding-right: $spacing-double; // icon-size + gap
+  }
+
   & + & {
     margin-top: $item-gap;
   }
@@ -177,6 +182,11 @@ $item-gap: $spacing-half;
   display: inline-block;
   margin-left: - $spacing-double;
   margin-right: $spacing-half;
+
+  [dir='rtl'] & {
+    margin-left: $spacing-half;
+    margin-right: - $spacing-double;
+  }
 }
 
 .card__meta__label {

diff --git a/src/scss/05_objects/_link.scss b/src/scss/05_objects/_link.scss
@@ -39,4 +39,14 @@ a:hover .link__type {
     margin-inline-start: calc(var(--line-height) * -1em - $spacing-half);
     transform: scaleX(var(--lang-direction, 1));
   }
+
+  [dir='rtl'] & {
+    padding-left: 0;
+    padding-right: calc(var(--line-height) * 1em + $spacing-half);
+
+    &::before {
+      margin-left: $spacing-half;
+      margin-right: calc(var(--line-height) * -1em - $spacing-half);
+    }
+  }
 }
diff --git a/src/scss/05_objects/_unpublished-content-flag.scss b/src/scss/05_objects/_unpublished-content-flag.scss
@@ -0,0 +1,29 @@
+[data-unpublished]::before {
+  @include font('small');
+
+  --line-height: 1;
+  background: $color-error;
+  color: $color-white;
+  content: attr(data-unpublished);
+  display: block;
+  padding-left: $spacing-half;
+  padding-right: $spacing-half;
+  position: fixed;
+  transform: rotate(-90deg) translateX(calc(-50% - 50vh));
+  transform-origin: top left;
+  z-index: 2;
+
+  [dir='rtl'] & {
+    right: 27px;
+    transform: rotate(-90deg) translateX(calc(0% - 44vh));
+    transform-origin: top right;
+  }
+
+  @include breakpoint($component-side-padding-breakpoint) {
+    content: attr(data-unpublished-long);
+
+    @include font('body');
+
+    --line-height: 1.5;
+  }
+}
diff --git a/src/scss/06_components/pages/_basic-page.scss b/src/scss/06_components/pages/_basic-page.scss
@@ -1,27 +1,3 @@
-[data-unpublished]::before {
-  @include font('small');
-
-  --line-height: 1;
-  background: $color-error;
-  color: $color-white;
-  content: attr(data-unpublished);
-  display: block;
-  padding-left: $spacing-half;
-  padding-right: $spacing-half;
-  position: fixed;
-  transform: rotate(-90deg) translateX(calc(-50% - 50vh));
-  transform-origin: top left;
-  z-index: 2;
-
-  @include breakpoint($component-side-padding-breakpoint) {
-    content: attr(data-unpublished-long);
-
-    @include font('body');
-
-    --line-height: 1.5;
-  }
-}
-
 .lead-in .component__content {
   @include font('lead');
   max-width: $content-width-max;

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, .component--top-news .news-listing) > .news-listing__item {
+:not(.component--latest-news .news-listing, .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
@@ -89,28 +89,24 @@
 
 // Latest news block variant.
 .news-listing--latest-medium-teasers {
+  margin-bottom: 0;
   padding-inline-start: 0; // User agent stylesheet override
+  padding-right: 0;
 
   @include breakpoint($breakpoint-m) {
-    display: flex;
-    flex-wrap: wrap;
+    grid-column-gap: $spacing-and-half;
+    grid-row-gap: $spacing-double;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   .news-listing__item {
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:nth-child(2) {
-      @include breakpoint($breakpoint-m) {
-        margin-top: 0;
-      }
-    }
+    list-style: none;
+    margin-top: $spacing-and-half;
+    position: relative;
 
     @include breakpoint($breakpoint-m) {
-      margin-top: $spacing-double;
-      padding-inline-end: $spacing-and-half;
-      width: 50%;
+      margin-top: 0;
     }
   }
 }
@@ -133,6 +129,21 @@
     width: $spacing-quarter;
   }
 
+  [dir='rtl'] & {
+    padding-left: 0;
+    padding-right: $spacing + $spacing-quarter;
+
+    @include breakpoint($breakpoint-l) {
+      padding-left: 0;
+      padding-right: $spacing-and-half + $spacing-quarter;
+    }
+
+    &::before {
+      left: auto;
+      right: 0;
+    }
+  }
+
   .news-listing__title {
     @include font(h5);
 
@@ -285,6 +296,16 @@
       padding: $spacing 0 0 0;
       width: unset;
     }
+
+    [dir='rtl'] & {
+      padding-left: 0;
+      padding-right: $spacing;
+
+      @include breakpoint($breakpoint-m) {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
   }
 
   .news-listing__link {