aspect ratio in Expo (#347)

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -107,7 +107,7 @@
   height: 0;
   margin-bottom: 1.6rem;
   overflow: hidden;
-  padding-bottom: 56.2%;
+  padding-bottom: 56.2%; //16:9
   position: relative;
   transform-origin: 50% 50%;
   transition: transform 1s ease-in-out;
@@ -267,6 +267,24 @@
   }
 }
 
+.aspectRatio1x1 {
+  .shoutCardCover {
+    padding-bottom: 100%;
+  }
+}
+
+.aspectRatio4x3 {
+  .shoutCardCover {
+    padding-bottom: 75%;
+  }
+}
+
+.aspectRatio16x9 {
+  .shoutCardCover {
+    padding-bottom: 56.25%;
+  }
+}
+
 .shoutCardType {
   height: 3.2rem;
   position: absolute;

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -46,6 +46,7 @@ export type ArticleCardProps = {
     withViewed?: boolean
     noAuthorLink?: boolean
   }
+  withAspectRatio?: boolean
   desktopCoverSize?: 'XS' | 'S' | 'M' | 'L'
   article: Shout
 }
@@ -112,6 +113,22 @@ export const ArticleCard = (props: ArticleCardProps) => {
   const [isCoverImageLoading, setIsCoverImageLoading] = createSignal(true)
 
   const description = getDescription(props.article.body)
+
+  const aspectRatio = () => {
+    switch (props.article.layout) {
+      case 'music': {
+        return styles.aspectRatio1x1
+      }
+      case 'image': {
+        return styles.aspectRatio4x3
+      }
+      case 'video':
+      case 'literature': {
+        return styles.aspectRatio16x9
+      }
+    }
+  }
+
   return (
     <section
       class={clsx(styles.shoutCard, props.settings?.additionalClass, {
@@ -127,6 +144,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardSingle]: props.settings?.isSingle,
         [styles.shoutCardBeside]: props.settings?.isBeside,
         [styles.shoutCardNoImage]: !props.article.cover,
+        [aspectRatio()]: props.withAspectRatio,
       })}
     >
       <Show when={!props.settings?.noimage && !props.settings?.isFeedMode}>
@@ -154,7 +172,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
           </div>
         </div>
       </Show>
-
       <div class={styles.shoutCardContent}>
         <Show
           when={

src/components/Views/Expo/Expo.tsx

@@ -143,7 +143,6 @@ export const Expo = (props: Props) => {
   const handleLoadMoreClick = () => {
     loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
   }
-
   return (
     <div class={styles.Expo}>
       <Show when={sortedArticles().length > 0} fallback={<Loading />}>
@@ -206,6 +205,7 @@ export const Expo = (props: Props) => {
                     article={shout}
                     settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
                     desktopCoverSize="XS"
+                    withAspectRatio={true}
                   />
                 </div>
               )}
@@ -220,6 +220,7 @@ export const Expo = (props: Props) => {
                     article={shout}
                     settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
                     desktopCoverSize="XS"
+                    withAspectRatio={true}
                   />
                 </div>
               )}
@@ -236,6 +237,7 @@ export const Expo = (props: Props) => {
                         article={shout}
                         settings={{ nodate: true, nosubtitle: true, noAuthorLink: true }}
                         desktopCoverSize="XS"
+                        withAspectRatio={true}
                       />
                     </div>
                   )}