Show post-card in notification et al.

* add notification in seeds
* extremely odd styling - on the index page the notification looks OK,
on the post page, the post card elements appear more densely packed

backend/src/seed/seed-db.js

@@ -1,3 +1,4 @@
+import faker from 'faker'
 import Factory from './factories'
 
 /* eslint-disable no-multi-spaces */
@@ -96,7 +97,7 @@ import Factory from './factories'
       asTrick.create('Post',     { id: 'p4' }),
       asTrack.create('Post',     { id: 'p5' }),
       asAdmin.create('Post',     { id: 'p6' }),
-      asModerator.create('Post', { id: 'p7' }),
+      asModerator.create('Post', { id: 'p7', content: `Hey @jenny-rostock, what's up? ${faker.lorem.paragraph()}` }),
       asUser.create('Post',      { id: 'p8' }),
       asTick.create('Post',      { id: 'p9' }),
       asTrick.create('Post',     { id: 'p10' }),

webapp/components/Notification.vue

@@ -0,0 +1,29 @@
+<template>
+  <nuxt-link
+    :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+  >
+  <hc-post-card :post="post" />
+  </nuxt-link>
+</template>
+
+<script>
+import HcPostCard from '~/components/PostCard.vue'
+
+export default {
+  name: 'HcNotification',
+  components: {
+    HcPostCard
+  },
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    post() {
+      return this.notification.post
+    }
+  }
+}
+</script>

webapp/layouts/default.vue

@@ -49,13 +49,11 @@
                   slot="popover"
                 >
                   <div class="notifications-menu-popover">
-                    <nuxt-link
+                    <notification
                       v-for="notification in notifications"
                       :key="notification.id"
-                      :to="{ name: 'post-id-slug', params: { id: notification.post.id, slug: notification.post.slug } }"
-                    >
-                      {{ notification.post.contentExcerpt }}
-                    </nuxt-link>
+                      :notification="notification"
+                    />
                   </div>
                 </template>
               </dropdown>
@@ -145,6 +143,7 @@ import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
+import Notification from '~/components/Notification'
 import seo from '~/components/mixins/seo'
 
 export default {
@@ -153,7 +152,8 @@ export default {
     LocaleSwitch,
     SearchInput,
     Modal,
-    LocaleSwitch
+    LocaleSwitch,
+    Notification
   },
   mixins: [seo],
   data() {

webapp/store/auth.js

@@ -89,7 +89,11 @@ export const actions = {
               createdAt
               post {
                 author {
+                  id
+                  slug
                   name
+                  disabled
+                  deleted
                 }
                 title
                 contentExcerpt