rename PostCard to PostTeaser

webapp/assets/_new/styles/tokens.scss

@@ -316,7 +316,7 @@ $z-index-page-submenu: 2500;
 $z-index-page-header: 2000;
 $z-index-page-sidebar: 1500;
 $z-index-sticky: 100;
-$z-index-post-card-link: 5;
+$z-index-post-teaser-link: 5;
 
 /**
  * @tokens Media Query

webapp/components/NotificationsTable/NotificationsTable.story.js

@@ -3,7 +3,7 @@ import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
 import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
 import helpers from '~/storybook/helpers'
-import { post } from '~/components/PostCard/PostCard.story.js'
+import { post } from '~/components/PostTeaser/PostTeaser.story.js'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 
 helpers.init()

webapp/components/PostTeaser/PostTeaser.spec.js

@@ -2,14 +2,14 @@ import { config, shallowMount, mount, RouterLinkStub } from '@vue/test-utils'
 
 import Vuex from 'vuex'
 
-import PostCard from './PostCard.vue'
+import PostTeaser from './PostTeaser.vue'
 
 const localVue = global.localVue
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
 
-describe('PostCard', () => {
+describe('PostTeaser', () => {
   let store
   let stubs
   let mocks
@@ -55,7 +55,7 @@ describe('PostCard', () => {
   describe('shallowMount', () => {
     Wrapper = () => {
       store = new Vuex.Store({ getters })
-      return shallowMount(PostCard, {
+      return shallowMount(PostTeaser, {
         store,
         propsData,
         mocks,
@@ -99,7 +99,7 @@ describe('PostCard', () => {
       const store = new Vuex.Store({
         getters,
       })
-      return mount(PostCard, {
+      return mount(PostTeaser, {
         stubs,
         mocks,
         propsData,

webapp/components/PostTeaser/PostTeaser.story.js

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import HcPostCard from './PostCard.vue'
+import PostTeaser from './PostTeaser.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
@@ -48,20 +48,20 @@ storiesOf('Post Card', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('without image', () => ({
-    components: { HcPostCard },
+    components: { PostTeaser },
     store: helpers.store,
     data: () => ({
       post,
     }),
     template: `
-      <hc-post-card
+      <post-teaser
         :post="post"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
       />
     `,
   }))
   .add('with image', () => ({
-    components: { HcPostCard },
+    components: { PostTeaser },
     store: helpers.store,
     data: () => ({
       post: {
@@ -70,14 +70,14 @@ storiesOf('Post Card', module)
       },
     }),
     template: `
-      <hc-post-card
+      <post-teaser
         :post="post"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
       />
     `,
   }))
   .add('pinned by admin', () => ({
-    components: { HcPostCard },
+    components: { PostTeaser },
     store: helpers.store,
     data: () => ({
       post: {
@@ -90,7 +90,7 @@ storiesOf('Post Card', module)
       },
     }),
     template: `
-      <hc-post-card
+      <post-teaser
         :post="post"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
       />

webapp/components/PostTeaser/PostTeaser.vue

@@ -6,19 +6,18 @@
     <base-card
       :lang="post.language"
       :class="{
-        'post-card': true,
         'disabled-content': post.disabled,
-        '--pinned': isPinned,
+        '--highlight': isPinned,
         '--blur-image': post.imageBlurred,
       }"
     >
-      <div class="card-image">
+      <div v-if="post.image" class="card-image">
         <img :src="post.image | proxyApiUrl" class="image" />
       </div>
       <client-only>
         <user-teaser :user="post.author" :date-time="post.createdAt" />
       </client-only>
-      <h2 class="card-heading hyphentate-text">{{ post.title }}</h2>
+      <h2 class="card-heading hyphenate-text">{{ post.title }}</h2>
       <!-- TODO: replace editor content with tiptap render view -->
       <!-- eslint-disable vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
@@ -67,7 +66,7 @@ import { mapGetters } from 'vuex'
 import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 
 export default {
-  name: 'HcPostCard',
+  name: 'PostTeaser',
   components: {
     UserTeaser,
     HcCategory,
@@ -146,67 +145,67 @@ export default {
   height: 100%;
   color: $text-color-base;
 
-  .user-teaser {
-    margin-bottom: $space-small;
-  }
-
-  > .base-card {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    &.--pinned {
-      border: 1px solid $color-warning;
-    }
-
-    &.--blur-image > .card-image > .image {
-      filter: blur(22px);
-    }
-
-    > .card-image {
-      overflow: hidden;
-
-      > .image {
-        width: 100%;
-        object-fit: contain;
-      }
-    }
-
-    > .content {
-      flex-grow: 1;
-      margin-bottom: $space-small;
-    }
-
-    > .footer {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      > .categories {
-        flex-grow: 1;
-      }
-
-      > .counter-icon {
-        display: block;
-        margin-right: $space-small;
-        opacity: 0.5;
-      }
-
-      > .content-menu {
-        position: relative;
-        z-index: $z-index-post-card-link;
-      }
-
-      .ds-tag {
-        margin: 0;
-      }
-    }
-  }
-
   > .ribbon {
     position: absolute;
     top: 50%;
     right: -7px;
   }
 }
+
+.post-teaser > .base-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &.--pinned {
+    border: 1px solid $color-warning;
+  }
+
+  &.--blur-image > .card-image > .image {
+    filter: blur(22px);
+  }
+
+  > .card-image {
+    overflow: hidden;
+
+    > .image {
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+
+  > .content {
+    flex-grow: 1;
+    margin-bottom: $space-small;
+  }
+
+  > .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > .categories {
+      flex-grow: 1;
+    }
+
+    > .counter-icon {
+      display: block;
+      margin-right: $space-small;
+      opacity: 0.5;
+    }
+
+    > .content-menu {
+      position: relative;
+      z-index: $z-index-post-teaser-link;
+    }
+
+    .ds-tag {
+      margin: 0;
+    }
+  }
+
+  .user-teaser {
+    margin-bottom: $space-small;
+  }
+}
 </style>

webapp/components/_new/generic/BaseCard/BaseCard.vue

@@ -16,6 +16,20 @@ export default {}
   background-color: $color-neutral-100;
   box-shadow: $box-shadow-base;
 
+  &.--highlight {
+    border: $border-size-base solid $color-primary;
+  }
+
+  &.--wide-content {
+    padding: $space-small;
+
+    > .card-image {
+      width: calc(100% + (2 * #{$space-small}));
+      margin: -$space-small;
+      margin-bottom: $space-base;
+    }
+  }
+
   > .card-image {
     width: calc(100% + (2 * #{$space-base}));
     margin: -$space-base;

webapp/components/features/ReportList/ReportList.story.js

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
-import { post } from '~/components/PostCard/PostCard.story.js'
+import { post } from '~/components/PostTeaser/PostTeaser.story.js'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import helpers from '~/storybook/helpers'
 import ReportList from './ReportList'

webapp/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <masonry-grid>
-      <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
+      <ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
@@ -26,7 +26,7 @@
           :key="post.id"
           :imageAspectRatio="post.imageAspectRatio"
         >
-          <hc-post-card
+          <post-teaser
             :post="post"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
@@ -67,7 +67,7 @@
 // import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import HcEmpty from '~/components/Empty/Empty'
-import HcPostCard from '~/components/PostCard/PostCard.vue'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import { mapGetters, mapMutations } from 'vuex'
@@ -79,7 +79,7 @@ export default {
   components: {
     // DonationInfo,
     FilterMenu,
-    HcPostCard,
+    PostTeaser,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,

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

@@ -24,7 +24,7 @@
           :key="relatedPost.id"
           :imageAspectRatio="relatedPost.imageAspectRatio"
         >
-          <hc-post-card
+          <post-teaser
             :post="relatedPost"
             :width="{ base: '100%', lg: 1 }"
             @removePostFromList="removePostFromList"
@@ -38,7 +38,7 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
-import HcPostCard from '~/components/PostCard/PostCard.vue'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import { relatedContributions } from '~/graphql/PostQuery'
@@ -51,7 +51,7 @@ export default {
     mode: 'out-in',
   },
   components: {
-    HcPostCard,
+    PostTeaser,
     HcCategory,
     HcHashtag,
     HcEmpty,

webapp/pages/profile/_id/_slug.vue

@@ -242,7 +242,7 @@
               :key="post.id"
               :imageAspectRatio="post.imageAspectRatio"
             >
-              <hc-post-card
+              <post-teaser
                 :post="post"
                 :width="{ base: '100%', md: '100%', xl: '50%' }"
                 @removePostFromList="removePostFromList"
@@ -275,7 +275,7 @@
 <script>
 import uniqBy from 'lodash/uniqBy'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import HcPostCard from '~/components/PostCard/PostCard.vue'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
@@ -303,7 +303,7 @@ const tabToFilterMapping = ({ tab, id }) => {
 export default {
   components: {
     UserTeaser,
-    HcPostCard,
+    PostTeaser,
     HcFollowButton,
     HcCountTo,
     HcBadges,