From e4908ed64052b85aeef052a4ee366e3c4eefaf63 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Apr 2019 19:33:27 -0300
Subject: [PATCH] Add component for Notifications' posts, style

---
 webapp/components/PostCard.vue                |  1 +
 .../components/notifications/Notification.vue |  8 +-
 .../notifications/NotificationMenu.vue        |  4 +
 .../notifications/NotificationPostCard.vue    | 84 +++++++++++++++++++
 4 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 webapp/components/notifications/NotificationPostCard.vue

diff --git a/webapp/components/PostCard.vue b/webapp/components/PostCard.vue
index 83b800031..58283dda3 100644
--- a/webapp/components/PostCard.vue
+++ b/webapp/components/PostCard.vue
@@ -131,6 +131,7 @@ export default {
   }
 
   .post-link {
+    margin: 15px;
     display: block;
     position: absolute;
     top: 0;
diff --git a/webapp/components/notifications/Notification.vue b/webapp/components/notifications/Notification.vue
index 8f6db439e..ecf696d75 100644
--- a/webapp/components/notifications/Notification.vue
+++ b/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: {
diff --git a/webapp/components/notifications/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu.vue
index 2e2cd2d3f..4ec80657f 100644
--- a/webapp/components/notifications/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu.vue
@@ -104,4 +104,8 @@ export default {
   display: flex;
   align-items: center;
 }
+
+.notifications-menu-popover {
+  max-width: 500px;
+}
 </style>
diff --git a/webapp/components/notifications/NotificationPostCard.vue b/webapp/components/notifications/NotificationPostCard.vue
new file mode 100644
index 000000000..90ded90c1
--- /dev/null
+++ b/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>