From a5d6bd037bf1b00cf172f8763f3057ead22efba9 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 13 Mar 2023 20:52:13 +0100
Subject: [PATCH 1/2] set ribbons position as divider between user teaser and
 hero image on post teaser component

---
 webapp/components/PostTeaser/PostTeaser.vue | 40 ++++++++++++++++-----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 73b721202..f43fb2040 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -15,7 +15,16 @@
         <img :src="post.image | proxyApiUrl" class="image" />
       </template>
       <client-only>
-        <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
+        <div class="post-user-row">
+          <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
+          <hc-ribbon
+            :class="[
+              (isPinned) ? '--pinned' : '',
+              (post.image) ? 'post-ribbon-w-img' : 'post-ribbon'              
+             ]"
+            :text="isPinned ? $t('post.pinned') : $t('post.name')"
+          />
+        </div>
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <!-- TODO: replace editor content with tiptap render view -->
@@ -73,10 +82,6 @@
         </client-only>
       </footer>
     </base-card>
-    <hc-ribbon
-      :class="{ '--pinned': isPinned }"
-      :text="isPinned ? $t('post.pinned') : $t('post.name')"
-    />
   </nuxt-link>
 </template>
 
@@ -192,19 +197,38 @@ export default {
   display: block;
   height: 100%;
   color: $text-color-base;
+}
 
-  > .ribbon {
+.post-user-row{
+  position: relative;
+
+  > .post-ribbon-w-img {
     position: absolute;
-    top: 50%;
-    right: -7px;
+    // 14px (~height of ribbon element) + 24px(=margin of hero image)
+    top: -38px;
+    // 7px+24px(=padding of parent)
+    right: -31px;
+  }
+  > .post-ribbon {
+    position: absolute;
+    // 14px (~height of ribbon element) + 24px(=margin of hero image)
+    top: -24px;
+    // 7px(=offset)+24px(=margin of parent)
+    right: -31px;
   }
 }
 
 .post-teaser > .base-card {
   display: flex;
   flex-direction: column;
+  overflow: visible;
   height: 100%;
 
+  > .hero-image{
+     border-top-left-radius: 5px;
+     border-top-right-radius: 5px;
+  }
+
   &.--blur-image > .hero-image > .image {
     filter: blur($blur-radius);
   }

From 47d7ed3cadc63f36c6c16d116f9903e17fd190af Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Tue, 14 Mar 2023 12:03:36 +0100
Subject: [PATCH 2/2] added linting for postteaser

---
 webapp/components/PostTeaser/PostTeaser.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index f43fb2040..33825fc9b 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -18,10 +18,7 @@
         <div class="post-user-row">
           <user-teaser :user="post.author" :group="post.group" :date-time="post.createdAt" />
           <hc-ribbon
-            :class="[
-              (isPinned) ? '--pinned' : '',
-              (post.image) ? 'post-ribbon-w-img' : 'post-ribbon'              
-             ]"
+            :class="[isPinned ? '--pinned' : '', post.image ? 'post-ribbon-w-img' : 'post-ribbon']"
             :text="isPinned ? $t('post.pinned') : $t('post.name')"
           />
         </div>
@@ -199,7 +196,7 @@ export default {
   color: $text-color-base;
 }
 
-.post-user-row{
+.post-user-row {
   position: relative;
 
   > .post-ribbon-w-img {
@@ -224,9 +221,9 @@ export default {
   overflow: visible;
   height: 100%;
 
-  > .hero-image{
-     border-top-left-radius: 5px;
-     border-top-right-radius: 5px;
+  > .hero-image {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
   }
 
   &.--blur-image > .hero-image > .image {