From 0aa1b8046b94976aaf71ed32286b4ffee3308f10 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Sun, 18 Aug 2019 18:28:48 +0100
Subject: [PATCH] remove grid logic from post component

---
 webapp/components/PostCard/index.vue | 153 +++++++++++----------------
 1 file changed, 63 insertions(+), 90 deletions(-)

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index eee6eeead..3e104c7a4 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,73 +1,71 @@
 <template>
-  <ds-grid-item ref="postCard" :rowSpan="rowSpan">
-    <ds-card
-      :image="post.image | proxyApiUrl"
-      :class="{ 'post-card': true, 'disabled-content': post.disabled }"
+  <ds-card
+    :image="post.image | proxyApiUrl"
+    :class="{ 'post-card': true, 'disabled-content': post.disabled }"
+  >
+    <!-- Post Link Target -->
+    <nuxt-link
+      class="post-link"
+      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
     >
-      <!-- Post Link Target -->
-      <nuxt-link
-        class="post-link"
-        :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
-      >
-        {{ post.title }}
-      </nuxt-link>
-      <ds-space margin-bottom="small" />
-      <!-- Username, Image & Date of Post -->
-      <div>
-        <no-ssr>
-          <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
-        </no-ssr>
-        <hc-ribbon :text="$t('post.name')" />
+      {{ post.title }}
+    </nuxt-link>
+    <ds-space margin-bottom="small" />
+    <!-- Username, Image & Date of Post -->
+    <div>
+      <no-ssr>
+        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
+      </no-ssr>
+      <hc-ribbon :text="$t('post.name')" />
+    </div>
+    <ds-space margin-bottom="small" />
+    <!-- Post Title -->
+    <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
+    <ds-space margin-bottom="small" />
+    <!-- Post Content Excerpt -->
+    <!-- eslint-disable vue/no-v-html -->
+    <!-- TODO: replace editor content with tiptap render view -->
+    <div class="hc-editor-content" v-html="excerpt" />
+    <!-- eslint-enable vue/no-v-html -->
+    <!-- Footer o the Post -->
+    <template slot="footer">
+      <div style="display: inline-block; opacity: .5;">
+        <!-- Categories -->
+        <hc-category
+          v-for="category in post.categories"
+          :key="category.id"
+          v-tooltip="{
+            content: category.name,
+            placement: 'bottom-start',
+            delay: { show: 500 },
+          }"
+          :icon="category.icon"
+        />
       </div>
-      <ds-space margin-bottom="small" />
-      <!-- Post Title -->
-      <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
-      <ds-space margin-bottom="small" />
-      <!-- Post Content Excerpt -->
-      <!-- eslint-disable vue/no-v-html -->
-      <!-- TODO: replace editor content with tiptap render view -->
-      <div class="hc-editor-content" v-html="excerpt" />
-      <!-- eslint-enable vue/no-v-html -->
-      <!-- Footer o the Post -->
-      <template slot="footer">
-        <div style="display: inline-block; opacity: .5;">
-          <!-- Categories -->
-          <hc-category
-            v-for="category in post.categories"
-            :key="category.id"
-            v-tooltip="{
-              content: category.name,
-              placement: 'bottom-start',
-              delay: { show: 500 },
-            }"
-            :icon="category.icon"
+      <no-ssr>
+        <div style="display: inline-block; float: right">
+          <!-- Shouts Count -->
+          <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
+            <ds-icon name="bullhorn" />
+            <small>{{ post.shoutedCount }}</small>
+          </span>
+          &nbsp;
+          <!-- Comments Count -->
+          <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
+            <ds-icon name="comments" />
+            <small>{{ post.commentsCount }}</small>
+          </span>
+          <!-- Menu -->
+          <content-menu
+            resource-type="contribution"
+            :resource="post"
+            :modalsData="menuModalsData"
+            :is-owner="isAuthor"
           />
         </div>
-        <no-ssr>
-          <div style="display: inline-block; float: right">
-            <!-- Shouts Count -->
-            <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
-              <ds-icon name="bullhorn" />
-              <small>{{ post.shoutedCount }}</small>
-            </span>
-            &nbsp;
-            <!-- Comments Count -->
-            <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
-              <ds-icon name="comments" />
-              <small>{{ post.commentsCount }}</small>
-            </span>
-            <!-- Menu -->
-            <content-menu
-              resource-type="contribution"
-              :resource="post"
-              :modalsData="menuModalsData"
-              :is-owner="isAuthor"
-            />
-          </div>
-        </no-ssr>
-      </template>
-    </ds-card>
-  </ds-grid-item>
+      </no-ssr>
+    </template>
+  </ds-card>
 </template>
 
 <script>
@@ -97,11 +95,6 @@ export default {
       default: () => {},
     },
   },
-  data() {
-    return {
-      rowSpan: 10,
-    }
-  },
   computed: {
     ...mapGetters({
       user: 'auth/user',
@@ -132,26 +125,6 @@ export default {
         this.$toast.error(err.message)
       }
     },
-    calculateItemHeight() {
-      const grid = document.querySelector('.ds-grid')
-      const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
-      const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'))
-      grid.style.gridAutoRows = 'auto'
-      grid.style.alignItems = 'self-start'
-      const itemHeight = this.$refs.postCard.$el.clientHeight
-      this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
-      grid.style.gridAutoRows = `${rowHeight}px`
-      grid.style.alignItems = 'stretch'
-    },
-  },
-  mounted() {
-    const image = this.$refs.postCard.$el.querySelector('img')
-    if (image) {
-      image.onload = this.calculateItemHeight
-    } else {
-      // use timeout to make sure layout is set up before executing
-      setTimeout(this.calculateItemHeight, 0)
-    }
   },
 }
 </script>