Merge pull request #953 from B77Mills/sectionFeedNode

SCSS & Marko section feed mobile card & 16:9 image ratio support within section feeds
parameter1 · Aug 27, 2024 · 60352e2 · 60352e2
2 parents a045eda + afeb7ac
commit 60352e2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 8 deletions.
diff --git a/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko
@@ -241,14 +241,14 @@ $ const blockName = "section-feed-content-node";
       $ const link = linkField && get(content, linkField) ? get(content, linkField) : get(content, "siteContext.path");
       <marko-web-picture>
         <@link href=link target=linkTarget attrs=linkAttrs />
-        <@source srcset=srcset media="(min-width: 768px)" width=250 height=167 />
+        <@source srcset=srcset media="(min-width: 768px)" width=imageOptions.w height=imageOptions.h />
         <@image
           src=srcMobile
           srcset=srcsetMobile
           class=[`${blockName}__image`]
           alt=primaryImage.alt
           lazyload=lazyload
-          attrs={ width: "112", height: "112" }
+          attrs={ width: mobileImageOptions.w, height: mobileImageOptions.h }
         />
       </marko-web-picture>
     </marko-web-element>

diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
@@ -1,10 +1,23 @@
 .section-feed-content-node {
   $self: &;
 
-  $image-size: 112px;
+  @function ab($a, $b: null) {
+    @if $b != null {
+        @return $b;
+    }
+    @return $a;
+  }
+
+  $image-size: 112px ;
+  $image-mobile-width: null !default;
+  $image-mobile-height: null !default;
+  $image-width: ab($image-size, $image-mobile-width);
+  $image-height: ab($image-size, $image-mobile-height);
+
   $image-desktop-width: 250px;
   $image-desktop-height: 167px;
 
+
   display: flex;
   width: 100%;
 
@@ -30,9 +43,9 @@
   }
 
   &__image-wrapper {
-    width: $image-size;
-    min-width: $image-size;
-    height: $image-size;
+    width: $image-width;
+    min-width: $image-width;
+    height: $image-height;
     margin-left: 15px;
     @include media-breakpoint-up(md) {
       width: $image-desktop-width;
@@ -44,8 +57,8 @@
   }
 
   &__image {
-    width: $image-size;
-    height: $image-size;
+    width: $image-width;
+    height: $image-height;
     object-fit: cover;
     object-position: left;
     border: 1px solid rgba(239, 239, 239, .9);
@@ -219,4 +232,22 @@
       }
     }
   }
+  //@todo this should also be dependend on the image width/height differing from 112
+  @include media-breakpoint-down(sm) {
+    &--section-feed-mobile-cards {
+      .section-feed-content-node {
+        &:first-child {
+          border-top: none;
+        }
+        flex-direction: column-reverse;
+        .section-feed-content-node__image-wrapper {
+          margin-left: 0;
+          margin-bottom: map-get($spacers, block);
+        }
+        .section-feed-content-node__content-teaser {
+          display: initial;
+        }
+      }
+    }
+  }
 }