From 5470fc2648fc421ca7b323af1cf0d6613611f41a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Sun, 10 May 2020 16:19:52 +0200
Subject: [PATCH] fix: preserve card and image ratio on feed

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../card/app-feed-card/app-feed-card.scss     | 13 +++++--
 .../feed/card/app-feed-card/app-feed-card.tsx | 37 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss b/studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss
index b08c77b01..497bd1255 100644
--- a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss
+++ b/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);
+        }
       }
     }
 
diff --git a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx b/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx
index c77ccbf68..956a27bde 100644
--- a/studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx
+++ b/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() {