Add component for Notifications' posts, style

webapp/components/PostCard.vue

@@ -131,6 +131,7 @@ export default {
   }
 
   .post-link {
+    margin: 15px;
     display: block;
     position: absolute;
     top: 0;

webapp/components/notifications/Notification.vue

@@ -3,17 +3,19 @@
     :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
     @click.native="$emit('read')"
   >
-    <hc-post-card :post="post" />
+    <ds-space margin-bottom="x-small">
+      <hc-notification-post-card :post="post" />
+    </ds-space>
   </nuxt-link>
 </template>
 
 <script>
-import HcPostCard from '~/components/PostCard.vue'
+import HcNotificationPostCard from './NotificationPostCard.vue'
 
 export default {
   name: 'Notification',
   components: {
-    HcPostCard
+    HcNotificationPostCard
   },
   props: {
     notification: {

webapp/components/notifications/NotificationMenu.vue

@@ -104,4 +104,8 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.notifications-menu-popover {
+  max-width: 500px;
+}
 </style>

webapp/components/notifications/NotificationPostCard.vue

@@ -0,0 +1,84 @@
+<template>
+  <ds-card
+    :header="post.title"
+    :image="post.image"
+    :class="{'post-card': true, 'disabled-content': post.disabled}"
+    hover
+    space="x-small"
+  >
+    <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="x-small" />
+    <no-ssr>
+      <hc-user
+        :user="post.author"
+        :trunc="35"
+      />
+    </no-ssr>
+    <ds-space margin-bottom="x-small" />
+    <div
+      class="hc-editor-content"
+      v-html="excerpt"
+    />
+  </ds-card>
+</template>
+
+<script>
+import HcUser from '~/components/User.vue'
+
+export default {
+  name: 'HcPostCard',
+  components: {
+    HcUser
+  },
+  props: {
+    post: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    excerpt() {
+      // remove all links from excerpt to prevent issues with the sorrounding link
+      let excerpt = this.post.contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      // do not display content that is only linebreaks
+      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+        excerpt = ''
+      }
+
+      return excerpt
+    }
+  },
+  methods: {
+    href(post) {
+      return this.$router.resolve({
+        name: 'post-id-slug',
+        params: { id: post.id, slug: post.slug }
+      }).href
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.post-card {
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+
+  .post-link {
+    margin: 15px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-indent: -999999px;
+  }
+}
+</style>