From 7095e38947bdaf1767b8c4c39123c910846446d5 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Fri, 17 May 2019 23:10:10 +0200
Subject: [PATCH 1/3] fixed post card design

---
 webapp/components/Category/index.vue  |  2 +-
 webapp/components/PostCard/index.vue  | 70 ++++++++++++++-------------
 webapp/components/Ribbon/index.vue    | 48 ++++++++++++++++++
 webapp/components/User/index.vue      |  2 +-
 webapp/pages/post/_id/_slug/index.vue | 24 ---------
 5 files changed, 87 insertions(+), 59 deletions(-)
 create mode 100644 webapp/components/Ribbon/index.vue

diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index af602d4d0..028d8c4a4 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -13,7 +13,7 @@ export default {
   name: 'HcCategory',
   props: {
     icon: { type: String, required: true },
-    name: { type: String, required: true }
+    name: { type: String, default: '' }
   }
 }
 </script>
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index acddba5d6..aeb761fe1 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,65 +1,64 @@
 <template>
   <ds-card
-    :header="post.title"
     :image="post.image"
     :class="{'post-card': true, 'disabled-content': post.disabled}"
   >
+    <!-- Post Link Target -->
     <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="small" />
+    <!-- Username, Image & Date of Post -->
+    <hc-user
+      :user="post.author"
+      :trunc="35"
+      :date-time="post.createdAt"
+    />
+    <hc-ribbon :text="$t('post.name')" />
+    <ds-space margin-bottom="small" />
+    <!-- Post Title -->
+    <ds-heading
+      tag="h3"
+      no-margin
+    >
+      {{ post.title }}
+    </ds-heading>
+    <ds-space margin-bottom="small" />
+    <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
-    <ds-space margin-bottom="large">
-      <div
-        class="hc-editor-content"
-        v-html="excerpt"
-      />
-    </ds-space>
+    <div
+      class="hc-editor-content"
+      v-html="excerpt"
+    />
     <!-- eslint-enable vue/no-v-html -->
-    <ds-space>
-      <ds-text
-        v-if="post.createdAt"
-        align="right"
-        size="small"
-        color="soft"
-      >
-        {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-      </ds-text>
-    </ds-space>
-    <ds-space
-      margin="small"
-      style="position: absolute; bottom: 44px;"
-    >
-      <!-- TODO: find better solution for rendering errors -->
-      <no-ssr>
-        <hc-user
-          :user="post.author"
-          :trunc="35"
-        />
-      </no-ssr>
-    </ds-space>
+    <!-- Footer o the Post -->
     <template slot="footer">
       <div style="display: inline-block; opacity: .5;">
-        <ds-icon
+        <!-- Categories -->
+        <hc-category
           v-for="category in post.categories"
           :key="category.id"
           v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
-          :name="category.icon"
-        />&nbsp;
+          :icon="category.icon"
+        />
       </div>
       <div style="display: inline-block; float: right">
+        <!-- Shouts Count -->
         <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
           <ds-icon name="bullhorn" />
           <small>{{ post.shoutedCount }}</small>
         </span>
         &nbsp;
+        <!-- Comments Count -->
         <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
           <ds-icon name="comments" />
           <small>{{ post.commentsCount }}</small>
         </span>
+        <!-- Menu -->
         <no-ssr>
           <content-menu
             resource-type="contribution"
@@ -75,13 +74,17 @@
 <script>
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
-import { randomBytes } from 'crypto'
+import HcCategory from '~/components/Category'
+import HcRibbon from '~/components/Ribbon'
+// import { randomBytes } from 'crypto'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'HcPostCard',
   components: {
     HcUser,
+    HcCategory,
+    HcRibbon,
     ContentMenu
   },
   props: {
@@ -95,6 +98,7 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
+      console.log(this.post)
       return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
new file mode 100644
index 000000000..37fa86cd5
--- /dev/null
+++ b/webapp/components/Ribbon/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="ribbon">
+    <small>{{ text }}</small>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HcRibbon',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ribbon {
+  $card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  font-size: 0.9em;
+  font-weight: bold;
+  padding: 6px 6px;
+  color: #fff;
+  background-color: $background-color-secondary-active;
+  right: -8px;
+  //top: -5px;
+  float: right;
+  border-radius: 2px 0 0 2px;
+  box-shadow: $card-shadow;
+  z-index: 11;
+  // border:           1px solid #ccc;
+  &:before {
+    content: ' ';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 0;
+    bottom: -6px;
+    border-width: 3px 4px 3px 3px;
+    border-style: solid;
+    border-color: $background-color-secondary transparent transparent
+      $background-color-secondary;
+  }
+}
+</style>
diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 240c9dd6d..105a79f8c 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -55,7 +55,7 @@
             style="display: inline;"
           >
             <ds-text
-              align="right"
+              align="left"
               size="small"
               color="soft"
             >
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 87538eb6d..ad04f8421 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -70,30 +70,6 @@
         :is-shouted="post.shoutedByCurrentUser"
         :post-id="post.id"
       />
-      <!-- Categories -->
-      <ds-icon
-        v-for="category in post.categories"
-        :key="category.id"
-        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
-        :name="category.icon"
-        size="large"
-      />&nbsp;
-      <ds-space margin-bottom="small" />
-      <!-- Tags -->
-      <template v-if="post.tags && post.tags.length">
-        <ds-space margin="xx-small" />
-        <div class="tags">
-          <ds-icon name="tags" />
-          <ds-tag
-            v-for="tag in post.tags"
-            :key="tag.id"
-          >
-            <ds-icon name="tag" />
-            {{ tag.name }}
-          </ds-tag>
-        </div>
-      </template>
-      <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
         <hc-comment-list :post="post" />

From eda58c25e3f0c839f71611f4688b4274769171ec Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 18 May 2019 12:33:41 +0200
Subject: [PATCH 2/3] ribbon tests, ribbon positions, fixed ssr stuff, fied
 missing language things

---
 webapp/components/PostCard/index.vue   | 78 ++++++++++----------------
 webapp/components/Ribbon/index.spec.js | 37 ++++++++++++
 webapp/components/Ribbon/index.vue     |  8 ++-
 webapp/locales/de.json                 |  8 +++
 4 files changed, 80 insertions(+), 51 deletions(-)
 create mode 100644 webapp/components/Ribbon/index.spec.js

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index aeb761fe1..6347af45b 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,39 +1,26 @@
 <template>
-  <ds-card
-    :image="post.image"
-    :class="{'post-card': true, 'disabled-content': post.disabled}"
-  >
+  <ds-card :image="post.image" :class="{'post-card': true, 'disabled-content': post.disabled}">
     <!-- Post Link Target -->
     <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="small" />
+    >{{ post.title }}</nuxt-link>
+    <ds-space margin-bottom="small"/>
     <!-- Username, Image & Date of Post -->
-    <hc-user
-      :user="post.author"
-      :trunc="35"
-      :date-time="post.createdAt"
-    />
-    <hc-ribbon :text="$t('post.name')" />
-    <ds-space margin-bottom="small" />
+    <div>
+      <no-ssr>
+        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt"/>
+      </no-ssr>
+      <hc-ribbon :text="$t('post.name')"/>
+    </div>
+    <ds-space margin-bottom="small"/>
     <!-- Post Title -->
-    <ds-heading
-      tag="h3"
-      no-margin
-    >
-      {{ post.title }}
-    </ds-heading>
-    <ds-space margin-bottom="small" />
+    <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
+    <ds-space margin-bottom="small"/>
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
-    <div
-      class="hc-editor-content"
-      v-html="excerpt"
-    />
+    <div class="hc-editor-content" v-html="excerpt"/>
     <!-- eslint-enable vue/no-v-html -->
     <!-- Footer o the Post -->
     <template slot="footer">
@@ -46,27 +33,23 @@
           :icon="category.icon"
         />
       </div>
-      <div style="display: inline-block; float: right">
-        <!-- Shouts Count -->
-        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-          <ds-icon name="bullhorn" />
-          <small>{{ post.shoutedCount }}</small>
-        </span>
-        &nbsp;
-        <!-- Comments Count -->
-        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-          <ds-icon name="comments" />
-          <small>{{ post.commentsCount }}</small>
-        </span>
-        <!-- Menu -->
-        <no-ssr>
-          <content-menu
-            resource-type="contribution"
-            :resource="post"
-            :is-owner="isAuthor"
-          />
-        </no-ssr>
-      </div>
+      <no-ssr>
+        <div style="display: inline-block; float: right">
+          <!-- Shouts Count -->
+          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+            <ds-icon name="bullhorn"/>
+            <small>{{ post.shoutedCount }}</small>
+          </span>
+          &nbsp;
+          <!-- Comments Count -->
+          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+            <ds-icon name="comments"/>
+            <small>{{ post.commentsCount }}</small>
+          </span>
+          <!-- Menu -->
+          <content-menu resource-type="contribution" :resource="post" :is-owner="isAuthor"/>
+        </div>
+      </no-ssr>
     </template>
   </ds-card>
 </template>
@@ -98,7 +81,6 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
-      console.log(this.post)
       return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
diff --git a/webapp/components/Ribbon/index.spec.js b/webapp/components/Ribbon/index.spec.js
new file mode 100644
index 000000000..8c6507e88
--- /dev/null
+++ b/webapp/components/Ribbon/index.spec.js
@@ -0,0 +1,37 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Ribbon from './index'
+
+const localVue = createLocalVue()
+
+describe('Ribbon', () => {
+  let text
+
+  let Wrapper = () => {
+    return shallowMount(Ribbon, {
+      localVue,
+      propsData: {
+        text
+      }
+    })
+  }
+
+  describe('given String for Text', () => {
+    beforeEach(() => {
+      text = 'Peter Pan'
+    })
+
+    it('shows Text', () => {
+      expect(Wrapper().text()).toContain('Peter Pan')
+    })
+  })
+
+  describe('given no String for Text', () => {
+    beforeEach(() => {
+      text = undefined
+    })
+
+    it('shows empty Text', () => {
+      expect(Wrapper().text()).toContain('')
+    })
+  })
+})
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
index 37fa86cd5..783bf974f 100644
--- a/webapp/components/Ribbon/index.vue
+++ b/webapp/components/Ribbon/index.vue
@@ -19,14 +19,16 @@ export default {
 <style scoped lang="scss">
 .ribbon {
   $card-shadow: 0px 12px 26px -4px rgba(0, 0, 0, 0.1);
-  position: absolute;
+  //position: absolute;
+  position: relative;
+  right: -31px;
+  top: -31px;
+
   font-size: 0.9em;
   font-weight: bold;
   padding: 6px 6px;
   color: #fff;
   background-color: $background-color-secondary-active;
-  right: -8px;
-  //top: -5px;
   float: right;
   border-radius: 2px 0 0 2px;
   box-shadow: $card-shadow;
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 96f87cd9d..e45bd9cba 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -135,6 +135,14 @@
     "takeAction": {
       "name": "Aktiv werden"
     },
+    "delete": {
+      "submit": "Löschen",
+      "cancel": "Abbrechen",
+      "success": "Beitrag erfolgreich gelöscht",
+      "title": "Beitrag löschen",
+      "type": "Beitrag",
+      "message": "Möchtest Du wirklich den Beitrag \"<b>{name}</b>\" löschen?"
+    },
     "comment": {
       "submit": "Kommentiere",
       "submitted": "Kommentar Gesendet"

From a7fb3f00953291e11fbbe63cb3e98bcbfdffc087 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Sat, 18 May 2019 12:36:51 +0200
Subject: [PATCH 3/3] linting

---
 webapp/components/PostCard/index.vue | 45 ++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 6347af45b..cde334bfd 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,26 +1,43 @@
 <template>
-  <ds-card :image="post.image" :class="{'post-card': true, 'disabled-content': post.disabled}">
+  <ds-card
+    :image="post.image"
+    :class="{'post-card': true, 'disabled-content': post.disabled}"
+  >
     <!-- Post Link Target -->
     <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="small"/>
+    >
+      {{ post.title }}
+    </nuxt-link>
+    <ds-space margin-bottom="small" />
     <!-- Username, Image & Date of Post -->
     <div>
       <no-ssr>
-        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt"/>
+        <hc-user
+          :user="post.author"
+          :trunc="35"
+          :date-time="post.createdAt"
+        />
       </no-ssr>
-      <hc-ribbon :text="$t('post.name')"/>
+      <hc-ribbon :text="$t('post.name')" />
     </div>
-    <ds-space margin-bottom="small"/>
+    <ds-space margin-bottom="small" />
     <!-- Post Title -->
-    <ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
-    <ds-space margin-bottom="small"/>
+    <ds-heading
+      tag="h3"
+      no-margin
+    >
+      {{ post.title }}
+    </ds-heading>
+    <ds-space margin-bottom="small" />
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
-    <div class="hc-editor-content" v-html="excerpt"/>
+    <div
+      class="hc-editor-content"
+      v-html="excerpt"
+    />
     <!-- eslint-enable vue/no-v-html -->
     <!-- Footer o the Post -->
     <template slot="footer">
@@ -37,17 +54,21 @@
         <div style="display: inline-block; float: right">
           <!-- Shouts Count -->
           <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-            <ds-icon name="bullhorn"/>
+            <ds-icon name="bullhorn" />
             <small>{{ post.shoutedCount }}</small>
           </span>
           &nbsp;
           <!-- Comments Count -->
           <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-            <ds-icon name="comments"/>
+            <ds-icon name="comments" />
             <small>{{ post.commentsCount }}</small>
           </span>
           <!-- Menu -->
-          <content-menu resource-type="contribution" :resource="post" :is-owner="isAuthor"/>
+          <content-menu
+            resource-type="contribution"
+            :resource="post"
+            :is-owner="isAuthor"
+          />
         </div>
       </no-ssr>
     </template>