feat: news item ordering main content (#992)

* feat: news item ordering main content * fix: cover column * fix: header-right always right placement
helsingborg-stad · Dec 10, 2024 · 2fe602e · 2fe602e
1 parent 82de7b4
commit 2fe602e
Showing 1 changed file with 55 additions and 26 deletions.
diff --git a/source/sass/component/_newsitem.scss b/source/sass/component/_newsitem.scss
@@ -3,18 +3,27 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
 
 // Basic laying down
 .c-newsitem {
-    display: block;
+    display: grid;
+    gap: calc($base * 2);
+    grid-template-columns: repeat(12, 1fr);
     container-type: inline-size;
     container-name: newsitem;
 
     // Areas (components)
-    .c-newsitem__main {
-        display: grid;
-        gap: calc($base * 3);
-        grid-template-columns: 2fr 1fr;
+    .c-newsitem__main-left {
+        grid-column: span 8;
+
+        &.cover {
+            grid-column: span 12;
+        }
+    }
+
+    .c-newsitem__main-right {
+        grid-column: span 4;
     }
 
     .c-newsitem__header {
+        grid-column: span 12;
         display: flex;
         justify-content: space-between;
         padding: $base 0;
@@ -23,12 +32,16 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
     }
 
     .c-newsitem__title {
-        margin: calc($base * 2) 0;
+        grid-column: span 12;
         display: grid;
         grid-template-columns: 1fr auto;
         gap: calc($base * 3);
     }
 
+    .c-newsitem__title-left.cover {
+        grid-column: span 2;
+    }
+
     // Partials (individual items)
     .c-newsitem__heading {
         color: $c-newsitem-heading-color;
@@ -42,6 +55,10 @@ $c-newsitem-heading-color: var(--c-newsitem-heading-color, $color-primary) !defa
         gap: $base;
     }
 
+    .c-newsitem__header-right {
+        margin-left: auto;
+    }
+
     .c-newsitem__date,
     .c-newsitem__read-time {
         display: flex;
@@ -88,49 +105,61 @@ a.c-newsitem {
 
 // Standing
 .c-newsitem.c-newsitem--standing {
-    .c-newsitem__main {
-        grid-template-columns: 1fr;
-        gap: calc($base * 2);
+    .c-newsitem__header {
+        order: 1;
     }
-
     .c-newsitem__main-right {
-        order: 1;
+        order: 2;
+        grid-column: span 12;
+    }
+
+    .c-newsitem__title {
+        order: 3;
     }
 
     .c-newsitem__main-left {
-        order: 2;
+        order: 4;
+        grid-column: span 12;
     }
 }
 
 // Responsive
 .c-newsitem {
     @container newsitem (max-width: 650px) {
-        .c-newsitem__main {
-            grid-template-columns: 1fr;
-            gap: calc($base * 2);
+        .c-newsitem__header {
+            order: 1;
         }
-
         .c-newsitem__main-right {
-            order: 1;
+            order: 2;
+            grid-column: span 12;
         }
-
+
+        .c-newsitem__title {
+            order: 3;
+        }
+
         .c-newsitem__main-left {
-            order: 2;
+            order: 4;
+            grid-column: span 12;
         }
     }
 
     @supports not (container-type: inline-size) {
-        .c-newsitem.c-newsitem__main {
-            grid-template-columns: 1fr;
-            gap: calc($base * 2);
+        .c-newsitem__header {
+            order: 1;
         }
-
         .c-newsitem__main-right {
-            order: 1;
+            order: 2;
+            grid-column: span 12;
         }
-
+
+        .c-newsitem__title {
+            order: 3;
+        }
+
         .c-newsitem__main-left {
-            order: 2;
+            order: 4;
+            grid-column: span 12;
         }
     }
 }