From 5db50d6cdc227e98a1d25dea53997e7de9fbe276 Mon Sep 17 00:00:00 2001
From: Vinoth Kannan <vinothkannan@vinkas.com>
Date: Thu, 29 Nov 2018 09:32:03 +0530
Subject: [PATCH] UX: Use aspect ratio to calculate width and height precisely

Followup on 1da265d
---
 .../discourse/components/cdn-img.js.es6       |  7 +++++
 .../templates/components/cdn-img.hbs          |  4 ++-
 .../common/base/category-list.scss            | 10 ++++++-
 .../stylesheets/desktop/topic-list.scss       | 26 ++++++++++++++--
 app/assets/stylesheets/mobile/topic-list.scss | 30 +++++++++++++++----
 5 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/cdn-img.js.es6 b/app/assets/javascripts/discourse/components/cdn-img.js.es6
index 68cd65b6248..f10b1d9e1eb 100644
--- a/app/assets/javascripts/discourse/components/cdn-img.js.es6
+++ b/app/assets/javascripts/discourse/components/cdn-img.js.es6
@@ -6,5 +6,12 @@ export default Ember.Component.extend({
   @computed("src")
   cdnSrc(src) {
     return Discourse.getURLWithCDN(src);
+  },
+
+  @computed("width", "height")
+  style(width, height) {
+    if (width && height) {
+      return Ember.String.htmlSafe(`--aspect-ratio: ${width / height};`);
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
index 16d2e983b12..9e58abd2bf2 100644
--- a/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
+++ b/app/assets/javascripts/discourse/templates/components/cdn-img.hbs
@@ -1,3 +1,5 @@
 {{#if src}}
-  <img src={{cdnSrc}} class={{class}} width={{width}} height={{height}}>
+  <div class="{{class}} aspect-image" style={{style}}>
+    <img src={{cdnSrc}} width={{width}} height={{height}}>
+  </div>
 {{/if}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 66234afa8a5..82d3556f278 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -41,13 +41,21 @@
       width: 100%;
     }
 
-    .logo {
+    .logo.aspect-image img {
       display: block;
       width: auto;
       height: 40px;
       margin: 0 auto 1em auto;
     }
 
+    @supports (--custom: property) {
+      .logo.aspect-image img {
+        --height: 40px;
+        width: calc(var(--height) * var(--aspect-ratio));
+        max-width: 100%;
+      }
+    }
+
     h3 .fa {
       color: $primary;
     }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index a5669500a75..fb82703b993 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -221,11 +221,31 @@ button.dismiss-read {
   clear: both;
 }
 
-.category-logo {
-  width: auto;
-  max-height: 150px;
+.category-logo.aspect-image {
   float: left;
   margin: 0.25em 1em 0.5em 0;
+
+  img {
+    width: auto;
+    max-height: 150px;
+  }
+}
+
+@supports (--custom: property) {
+  .category-logo.aspect-image {
+    --max-height: 150px;
+    max-height: var(--max-height);
+    width: calc(var(--max-height) * var(--aspect-ratio));
+    max-width: 25%;
+    height: auto;
+
+    img {
+      width: 100%;
+      height: inherit;
+      max-width: initial;
+      max-height: initial;
+    }
+  }
 }
 
 /* Tablet (portrait) ----------- */
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 71b0a7ae2ac..8d9d4b24ec0 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -478,12 +478,32 @@ ol.category-breadcrumb {
   padding-top: 10px;
 }
 
-.category-logo {
+.category-logo.aspect-image {
   display: block;
-  width: auto;
-  max-width: 100%;
-  max-height: 150px;
-  padding: 8px 0;
+  margin: 8px 0;
+
+  img {
+    width: auto;
+    max-width: 100%;
+    max-height: 150px;
+  }
+}
+
+@supports (--custom: property) {
+  .category-logo.aspect-image {
+    --max-height: 150px;
+    max-height: var(--max-height);
+    width: calc(var(--max-height) * var(--aspect-ratio));
+    max-width: 100%;
+    height: auto;
+
+    img {
+      width: 100%;
+      height: inherit;
+      max-width: initial;
+      max-height: initial;
+    }
+  }
 }
 
 button.dismiss-read {