Add styling to pinned post

webapp/components/PostCard/PostCard.spec.js

@@ -2,7 +2,7 @@ import { config, shallowMount, mount, createLocalVue, RouterLinkStub } from '@vu
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
 import Filters from '~/plugins/vue-filters'
-import PostCard from '.'
+import PostCard from './PostCard.vue'
 
 const localVue = createLocalVue()
 

webapp/components/PostCard/PostCard.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcPostCard from '~/components/PostCard'
+import HcPostCard from './PostCard.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -76,3 +76,23 @@ storiesOf('Post Card', module)
       />
     `,
   }))
+  .add('pinned by admin', () => ({
+    components: { HcPostCard },
+    store: helpers.store,
+    data: () => ({
+      post: {
+        ...post,
+        pinnedBy: {
+          id: '4711',
+          name: 'Ad Min',
+          role: 'admin',
+        },
+      },
+    }),
+    template: `
+      <hc-post-card
+        :post="post"
+        :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      />
+    `,
+  }))

webapp/components/PostCard/PostCard.vue

@@ -1,7 +1,7 @@
 <template>
   <ds-card
     :image="post.image | proxyApiUrl"
-    :class="{ 'post-card': true, 'disabled-content': post.disabled }"
+    :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--target': isPinned }"
   >
     <!-- Post Link Target -->
     <nuxt-link
@@ -16,7 +16,8 @@
       <client-only>
         <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </client-only>
-      <hc-ribbon :text="$t('post.name')" />
+      <hc-ribbon v-if="isPinned" :text="$t('post.pinned')" />
+      <hc-ribbon v-else :text="$t('post.name')" />
     </div>
     <ds-space margin-bottom="small" />
     <!-- Post Title -->
@@ -116,6 +117,9 @@ export default {
         this.deletePostCallback,
       )
     },
+    isPinned() {
+      return this.post && this.post.pinnedBy
+    },
   },
   methods: {
     async deletePostCallback() {
@@ -175,4 +179,8 @@ export default {
     text-indent: -999999px;
   }
 }
+
+.post--target {
+  border: 1px solid $color-primary;
+}
 </style>

webapp/locales/de.json

@@ -354,6 +354,7 @@
   },
   "post": {
     "name": "Beitrag",
+    "pinned": "Gepinnt",
     "moreInfo": {
       "name": "Mehr Info",
       "title": "Mehr Informationen",

webapp/locales/en.json

@@ -355,6 +355,7 @@
   },
   "post": {
     "name": "Post",
+    "pinned": "Pinned",
     "moreInfo": {
       "name": "More info",
       "title": "More information",

webapp/pages/index.vue

@@ -60,7 +60,7 @@
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import HcEmpty from '~/components/Empty'
-import HcPostCard from '~/components/PostCard'
+import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'

webapp/pages/post/_id/_slug/more-info.vue

@@ -37,7 +37,7 @@
 
 <script>
 import HcEmpty from '~/components/Empty.vue'
-import HcPostCard from '~/components/PostCard'
+import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import { relatedContributions } from '~/graphql/PostQuery'

webapp/pages/profile/_id/_slug.vue

@@ -268,7 +268,7 @@
 <script>
 import uniqBy from 'lodash/uniqBy'
 import User from '~/components/User/User'
-import HcPostCard from '~/components/PostCard'
+import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'