Merge pull request #727 from deckgo/feed-card-img-ratio

fix: preserve card and image ratio on feed

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss

@@ -1,4 +1,6 @@
 app-feed-card {
+  display: block;
+
   ion-card {
     --background: white;
 
@@ -22,10 +24,15 @@ app-feed-card {
 
       deckgo-lazy-img {
         display: block;
-        height: 48vw;
-        max-height: 400px;
         --deckgo-lazy-img-width: 100%;
-        --deckgo-lazy-img-height: auto;
+        --deckgo-lazy-img-height: calc(((var(--card-width) - 20px) * 576) / 1024);
+        --deckgo-lazy-img-display: block;
+      }
+
+      &.ios {
+        deckgo-lazy-img {
+          --deckgo-lazy-img-height: calc(((var(--card-width) - 32px) * 576) / 1024);
+        }
       }
     }
 

studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx

@@ -1,4 +1,6 @@
-import {Component, Prop, State, h} from '@stencil/core';
+import { Component, Prop, State, h, Element } from "@stencil/core";
+
+import { debounce } from "@deckdeckgo/utils";
 
 import DateTimeFormatOptions = Intl.DateTimeFormatOptions;
 
@@ -12,6 +14,8 @@ import {EnvironmentConfigService} from '../../../../services/core/environment/en
   shadow: false
 })
 export class AppFeedCard {
+  @Element() el: HTMLElement;
+
   @Prop()
   compact: boolean = true;
 
@@ -39,8 +43,37 @@ export class AppFeedCard {
   @State()
   private screenshot: string;
 
+  @State()
+  private width: number;
+
   async componentWillLoad() {
     await this.init();
+
+    this.initWindowResize();
+  }
+
+  async componentDidLoad() {
+    await this.onWindowResize();
+  }
+
+  componentDidUnload() {
+    this.removeWindowResize();
+  }
+
+  private initWindowResize() {
+    if (window) {
+      window.addEventListener('resize', debounce(this.onWindowResize));
+    }
+  }
+
+  private removeWindowResize() {
+    if (window) {
+      window.removeEventListener('resize', debounce(this.onWindowResize));
+    }
+  }
+
+  private onWindowResize = async () => {
+    this.width = this.el.offsetWidth;
   }
 
   private init(): Promise<void> {
@@ -125,7 +158,7 @@ export class AppFeedCard {
   }
 
   render() {
-    return <ion-card class="ion-margin-top">{this.renderCardContent()}</ion-card>;
+    return <ion-card class="ion-margin-top" style={{'--card-width': `${this.width}px`}}>{this.renderCardContent()}</ion-card>;
   }
 
   private renderCardContent() {