From abdc80727d8db6b611bbf9ce70c687e08fe67a66 Mon Sep 17 00:00:00 2001
From: Dries Cruyskens <dries.cruyskens@gmail.com>
Date: Thu, 28 May 2020 15:15:14 +0200
Subject: [PATCH] Hero image height on post page is now set withouth having to
 wait for the image to load. Vue gives the image aspect ratio to css as a css
 variable, css then sets the correct height in fuction of the width.

---
 webapp/pages/post/_id/_slug/index.vue | 30 +++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 9a4a796e1..c352d17b4 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -8,6 +8,7 @@
         'disabled-content': post.disabled,
         '--blur-image': blurred,
       }"
+      :style="heroImageStyle"
     >
       <template #heroImage v-if="post.image">
         <img :src="post.image | proxyApiUrl" class="image" />
@@ -179,6 +180,19 @@ export default {
       if (!author) return false
       return this.$store.getters['auth/user'].id === author.id
     },
+    heroImageStyle() {
+      /*  Return false when image property is not present or is not a number
+          so no unnecessary css variables are set.
+      */
+      if (!this.post.image || typeof this.post.image.aspectRatio !== 'number') return false
+
+      /*  Return the aspect ratio as a css variable. Later to be used when calculating
+          the height with respect to the width.
+      */
+      return {
+        '--hero-image-aspect-ratio': this.post.image.aspectRatio,
+      }
+    },
   },
   methods: {
     reply(message) {
@@ -248,6 +262,22 @@ export default {
 .post-page {
   > .hero-image {
     position: relative;
+    /*  The padding top makes sure the correct height is set (according to the
+        hero image aspect ratio) before the hero image loads so
+        the autoscroll works correctly when following a comment link. 
+    */
+    padding-top: calc(var(--hero-image-aspect-ratio) * 100%);
+
+    /*  Letting the image fill the container, since the container
+        is the one determining height
+    */
+    > .image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
   }
 
   > .menu {