ribbon tests, ribbon positions, fixed ssr stuff, fied missing language things

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() {

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('')
+    })
+  })
+})

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;

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"