fixed post card design

webapp/components/Category/index.vue

@@ -13,7 +13,7 @@ export default {
   name: 'HcCategory',
   props: {
     icon: { type: String, required: true },
-    name: { type: String, required: true }
+    name: { type: String, default: '' }
   }
 }
 </script>

webapp/components/PostCard/index.vue

@@ -1,65 +1,64 @@
 <template>
   <ds-card
-    :header="post.title"
     :image="post.image"
     :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.title }}
     </nuxt-link>
+    <ds-space margin-bottom="small" />
+    <!-- Username, Image & Date of Post -->
+    <hc-user
+      :user="post.author"
+      :trunc="35"
+      :date-time="post.createdAt"
+    />
+    <hc-ribbon :text="$t('post.name')" />
+    <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 -->
-    <ds-space margin-bottom="large">
-      <div
-        class="hc-editor-content"
-        v-html="excerpt"
-      />
-    </ds-space>
+    <div
+      class="hc-editor-content"
+      v-html="excerpt"
+    />
     <!-- eslint-enable vue/no-v-html -->
-    <ds-space>
-      <ds-text
-        v-if="post.createdAt"
-        align="right"
-        size="small"
-        color="soft"
-      >
-        {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-      </ds-text>
-    </ds-space>
-    <ds-space
-      margin="small"
-      style="position: absolute; bottom: 44px;"
-    >
-      <!-- TODO: find better solution for rendering errors -->
-      <no-ssr>
-        <hc-user
-          :user="post.author"
-          :trunc="35"
-        />
-      </no-ssr>
-    </ds-space>
+    <!-- Footer o the Post -->
     <template slot="footer">
       <div style="display: inline-block; opacity: .5;">
-        <ds-icon
+        <!-- Categories -->
+        <hc-category
           v-for="category in post.categories"
           :key="category.id"
           v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
-          :name="category.icon"
-        />&nbsp;
+          :icon="category.icon"
+        />
       </div>
       <div style="display: inline-block; float: right">
+        <!-- Shouts Count -->
         <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
           <ds-icon name="bullhorn" />
           <small>{{ post.shoutedCount }}</small>
         </span>
         &nbsp;
+        <!-- Comments Count -->
         <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
           <ds-icon name="comments" />
           <small>{{ post.commentsCount }}</small>
         </span>
+        <!-- Menu -->
         <no-ssr>
           <content-menu
             resource-type="contribution"
@@ -75,13 +74,17 @@
 <script>
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
-import { randomBytes } from 'crypto'
+import HcCategory from '~/components/Category'
+import HcRibbon from '~/components/Ribbon'
+// import { randomBytes } from 'crypto'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcPostCard',
   components: {
     HcUser,
+    HcCategory,
+    HcRibbon,
     ContentMenu
   },
   props: {
@@ -95,6 +98,7 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
+      console.log(this.post)
       return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {

webapp/components/Ribbon/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="ribbon">
+    <small>{{ text }}</small>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HcRibbon',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ribbon {
+  $card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  font-size: 0.9em;
+  font-weight: bold;
+  padding: 6px 6px;
+  color: #fff;
+  background-color: $background-color-secondary-active;
+  right: -8px;
+  //top: -5px;
+  float: right;
+  border-radius: 2px 0 0 2px;
+  box-shadow: $card-shadow;
+  z-index: 11;
+  // border:           1px solid #ccc;
+  &:before {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 0;
+    bottom: -6px;
+    border-width: 3px 4px 3px 3px;
+    border-style: solid;
+    border-color: $background-color-secondary transparent transparent
+      $background-color-secondary;
+  }
+}
+</style>

webapp/components/User/index.vue

@@ -55,7 +55,7 @@
             style="display: inline;"
           >
             <ds-text
-              align="right"
+              align="left"
               size="small"
               color="soft"
             >

webapp/pages/post/_id/_slug/index.vue

@@ -70,30 +70,6 @@
         :is-shouted="post.shoutedByCurrentUser"
         :post-id="post.id"
       />
-      <!-- Categories -->
-      <ds-icon
-        v-for="category in post.categories"
-        :key="category.id"
-        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
-        :name="category.icon"
-        size="large"
-      />&nbsp;
-      <ds-space margin-bottom="small" />
-      <!-- Tags -->
-      <template v-if="post.tags && post.tags.length">
-        <ds-space margin="xx-small" />
-        <div class="tags">
-          <ds-icon name="tags" />
-          <ds-tag
-            v-for="tag in post.tags"
-            :key="tag.id"
-          >
-            <ds-icon name="tag" />
-            {{ tag.name }}
-          </ds-tag>
-        </div>
-      </template>
-      <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list :post="post" />