From 42a370ffc86c60316deb225fb1d91f9cf3ee7a35 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 27 Feb 2023 10:42:20 +0100
Subject: [PATCH 01/16] set showDonations flag to false as default to avoid
 blinking

---
 webapp/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index d5f1ac3d0..0468dc3a7 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -149,7 +149,7 @@ export default {
       hideByScroll: false,
       revScrollpos: 0,
       showFilter: false,
-      showDonations: true,
+      showDonations: false,
       goal: 15000,
       progress: 7000,
       posts: [],

From 131b2156d0629f47bf6e7ddae813ff0a7df49f97 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Fri, 10 Mar 2023 21:16:22 +0100
Subject: [PATCH 02/16] refactored notification page for mobility

---
 .../NotificationsTable/NotificationsTable.vue | 171 +++++++++++++-----
 1 file changed, 125 insertions(+), 46 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 07db4f9a2..f1c56a01f 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -1,62 +1,106 @@
 <template>
-  <ds-table v-if="notifications && notifications.length" :data="notifications" :fields="fields">
-    <template #icon="scope">
-      <base-icon
-        v-if="scope.row.from.post"
-        name="comment"
-        v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
-      />
-      <base-icon
-        v-else
-        name="bookmark"
-        v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
-      />
-    </template>
-    <template #user="scope">
-      <ds-space margin-bottom="base">
-        <client-only>
-          <user-teaser
-            :user="scope.row.from.author"
-            :date-time="scope.row.from.createdAt"
-            :class="{ 'notification-status': scope.row.read }"
-          />
-        </client-only>
-      </ds-space>
-      <ds-text :class="{ 'notification-status': scope.row.read, reason: true }">
-        {{ $t(`notifications.reason.${scope.row.reason}`) }}
-      </ds-text>
-    </template>
-    <template #post="scope">
-      <nuxt-link
-        class="notification-mention-post"
-        :class="{ 'notification-status': scope.row.read }"
-        :to="{
-          name: 'post-id-slug',
-          params: params(scope.row.from),
-          hash: hashParam(scope.row.from),
-        }"
-        @click.native="markNotificationAsRead(scope.row.from.id)"
+  <div class="notification-grid" v-if="notifications && notifications.length">
+    <ds-grid>
+      <ds-grid-item v-if="!isMobile" column-span="fullWidth">
+        <ds-grid class="header-grid">
+          <ds-grid-item v-for="f in fields" :key="f.label" class="ds-table-head-col">
+            {{ f.label }}
+          </ds-grid-item>
+        </ds-grid>
+      </ds-grid-item>
+      <ds-grid-item
+        v-for="n in notifications"
+        :key="n.id"
+        column-span="fullWidth"
+        class="notification-grid-row"
       >
-        <b>{{ scope.row.from.title || scope.row.from.post.title | truncate(50) }}</b>
-      </nuxt-link>
-    </template>
-    <template #content="scope">
-      <b :class="{ 'notification-status': scope.row.read }">
-        {{ scope.row.from.contentExcerpt | removeHtml }}
-      </b>
-    </template>
-  </ds-table>
+        <ds-grid>
+          <ds-grid-item>
+            <ds-flex class="user-section">
+              <ds-flex-item :width="{ base: '20%' }">
+                <div>
+                  <base-card :wide-content="true">
+                    <base-icon
+                      v-if="n.from.post"
+                      name="comment"
+                      v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
+                    />
+                    <base-icon
+                      v-else
+                      name="bookmark"
+                      v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
+                    />
+                  </base-card>
+                </div>
+              </ds-flex-item>
+              <ds-flex-item>
+                <div>
+                  <base-card :wide-content="true">
+                    <ds-space margin-bottom="base">
+                      <client-only>
+                        <user-teaser
+                          :user="n.from.author"
+                          :date-time="n.from.createdAt"
+                          :class="{ 'notification-status': n.read }"
+                        />
+                      </client-only>
+                    </ds-space>
+                    <ds-text :class="{ 'notification-status': n.read, reason: true }">
+                      {{ $t(`notifications.reason.${n.reason}`) }}
+                    </ds-text>
+                  </base-card>
+                </div>
+              </ds-flex-item>
+            </ds-flex>
+          </ds-grid-item>
+          <ds-grid-item>
+            <ds-flex class="content-section" :direction="{ base: 'column', xs: 'row' }">
+              <ds-flex-item>
+                <base-card :wide-content="true">
+                  <nuxt-link
+                    class="notification-mention-post"
+                    :class="{ 'notification-status': n.read }"
+                    :to="{
+                      name: 'post-id-slug',
+                      params: params(n.from),
+                      hash: hashParam(n.from),
+                    }"
+                    @click.native="markNotificationAsRead(n.from.id)"
+                  >
+                    <b>{{ n.from.title || n.from.post.title | truncate(50) }}</b>
+                  </nuxt-link>
+                </base-card>
+              </ds-flex-item>
+              <ds-flex-item>
+                <base-card :wide-content="true">
+                  <b :class="{ 'notification-status': n.read }">
+                    {{ n.from.contentExcerpt | removeHtml }}
+                  </b>
+                </base-card>
+              </ds-flex-item>
+            </ds-flex>
+          </ds-grid-item>
+        </ds-grid>
+      </ds-grid-item>
+    </ds-grid>
+  </div>
   <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
 </template>
 <script>
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcEmpty from '~/components/Empty/Empty'
+import BaseCard from '../_new/generic/BaseCard/BaseCard.vue'
+import mobile from '~/mixins/mobile'
+
+const maxMobileWidth = 768 // at this point the table breaks down
 
 export default {
   components: {
     UserTeaser,
     HcEmpty,
+    BaseCard,
   },
+  mixins: [mobile(maxMobileWidth)],
   props: {
     notifications: { type: Array, default: () => [] },
   },
@@ -106,4 +150,39 @@ export default {
 .notification-status {
   opacity: $opacity-soft;
 }
+/* fix to override flex-wrap style of ds flex component */
+.notification-grid .content-section {
+  flex-wrap: nowrap;
+}
+.notification-grid .ds-grid.header-grid {
+  grid-template-columns: 1fr 4fr 3fr 3fr !important;
+}
+.notification-grid-row {
+  border-top: 1px dotted #e5e3e8;
+}
+.notification-grid .base-card {
+  border-radius: 0;
+  box-shadow: none;
+  padding: 16px 4px;
+}
+/* dirty fix to override broken styleguide inline-styles */
+.notification-grid .ds-grid {
+  grid-template-columns: 5fr 6fr !important;
+  grid-auto-rows: auto !important;
+  grid-template-rows: 1fr;
+  gap: 0px !important;
+}
+@media screen and (max-width: 768px) {
+  .notification-grid .ds-grid {
+    grid-template-columns: 1fr !important;
+  }
+  .notification-grid .content-section {
+    border-top: 1px dotted #e5e3e8;
+  }
+  .notification-grid-row {
+    box-shadow: 0px 12px 26px -4px rgb(0 0 0 / 10%);
+    margin-top: 5px;
+    border-top: none;
+  }
+}
 </style>

From f91fd8924e00cfd6cae0832552a0360f2f128166 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 13 Mar 2023 10:09:02 +0100
Subject: [PATCH 03/16] updated unit test for showDonation flag in index page

---
 webapp/pages/index.spec.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/pages/index.spec.js b/webapp/pages/index.spec.js
index 43400986c..58cb74382 100644
--- a/webapp/pages/index.spec.js
+++ b/webapp/pages/index.spec.js
@@ -131,15 +131,15 @@ describe('PostIndex', () => {
     })
 
     describe('donation-info', () => {
-      it('shows donation-info on default', () => {
+      it('hides donation-info on default', () => {
         wrapper = Wrapper()
-        expect(wrapper.find('.top-info-bar').exists()).toBe(true)
+        expect(wrapper.find('.top-info-bar').exists()).toBe(false)
       })
 
-      it('hides donation-info if not "showDonations"', async () => {
+      it('shows donation-info if "showDonations"', async () => {
         wrapper = Wrapper()
-        await wrapper.setData({ showDonations: false })
-        expect(wrapper.find('.top-info-bar').exists()).toBe(false)
+        await wrapper.setData({ showDonations: true })
+        expect(wrapper.find('.top-info-bar').exists()).toBe(true)
       })
     })
   })

From 8007eb76834fd523d814f53a8f1721dbe4106431 Mon Sep 17 00:00:00 2001
From: Markus <markus@infinity.labs.ooo>
Date: Mon, 13 Mar 2023 10:40:41 +0100
Subject: [PATCH 04/16] updated notificationstable component test

---
 .../NotificationsTable/NotificationsTable.spec.js         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.spec.js b/webapp/components/NotificationsTable/NotificationsTable.spec.js
index e48610034..0d3560787 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.spec.js
+++ b/webapp/components/NotificationsTable/NotificationsTable.spec.js
@@ -59,8 +59,8 @@ describe('NotificationsTable.vue', () => {
         wrapper = Wrapper()
       })
 
-      it('renders a table', () => {
-        expect(wrapper.find('.ds-table').exists()).toBe(true)
+      it('renders a grid table', () => {
+        expect(wrapper.find('.notification-grid').exists()).toBe(true)
       })
 
       describe('renders 4 columns', () => {
@@ -84,7 +84,7 @@ describe('NotificationsTable.vue', () => {
       describe('Post', () => {
         let firstRowNotification
         beforeEach(() => {
-          firstRowNotification = wrapper.findAll('tbody tr').at(0)
+          firstRowNotification = wrapper.findAll('.notification-grid-row').at(0)
         })
 
         it('renders the author', () => {
@@ -117,7 +117,7 @@ describe('NotificationsTable.vue', () => {
       describe('Comment', () => {
         let secondRowNotification
         beforeEach(() => {
-          secondRowNotification = wrapper.findAll('tbody tr').at(1)
+          secondRowNotification = wrapper.findAll('.notification-grid-row').at(1)
         })
 
         it('renders the author', () => {

From 43a96826e449f68f75c212a4a30e672ce11f3601 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 15:27:46 +0100
Subject: [PATCH 05/16] feat(webapp): change order of groups to new first

---
 backend/src/schema/resolvers/groups.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index 4a13dcc88..2f0d03969 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -15,7 +15,7 @@ export default {
   Query: {
     Group: async (_object, params, context, _resolveInfo) => {
       const { isMember, id, slug, first, offset } = params
-      let pagination = ''
+      let pagination = '', orderBy = 'ORDER BY group.createdAt DESC'
       if (first !== undefined && offset !== undefined) pagination = `SKIP ${offset} LIMIT ${first}`
       const matchParams = { id, slug }
       removeUndefinedNullValuesFromObject(matchParams)
@@ -29,6 +29,7 @@ export default {
             WITH group, membership
             WHERE (group.groupType IN ['public', 'closed']) OR (group.groupType = 'hidden' AND membership.role IN ['usual', 'admin', 'owner'])
             RETURN group {.*, myRole: membership.role}
+            ${orderBy}
             ${pagination}
           `
         } else {
@@ -39,6 +40,7 @@ export default {
               WITH group
               WHERE group.groupType IN ['public', 'closed']
               RETURN group {.*, myRole: NULL}
+              ${orderBy}
               ${pagination}
             `
           } else {
@@ -48,6 +50,7 @@ export default {
               WITH group, membership
               WHERE (group.groupType IN ['public', 'closed']) OR (group.groupType = 'hidden' AND membership.role IN ['usual', 'admin', 'owner'])
               RETURN group {.*, myRole: membership.role}
+              ${orderBy}
               ${pagination}
             `
           }

From 0f64235bfb822aebfa6aa15447787b2c4f1aef44 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Mon, 13 Mar 2023 16:17:47 +0100
Subject: [PATCH 06/16] linting fixes

---
 backend/src/schema/resolvers/groups.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/groups.js b/backend/src/schema/resolvers/groups.js
index 2f0d03969..5ec1700b9 100644
--- a/backend/src/schema/resolvers/groups.js
+++ b/backend/src/schema/resolvers/groups.js
@@ -15,7 +15,8 @@ export default {
   Query: {
     Group: async (_object, params, context, _resolveInfo) => {
       const { isMember, id, slug, first, offset } = params
-      let pagination = '', orderBy = 'ORDER BY group.createdAt DESC'
+      let pagination = ''
+      const orderBy = 'ORDER BY group.createdAt DESC'
       if (first !== undefined && offset !== undefined) pagination = `SKIP ${offset} LIMIT ${first}`
       const matchParams = { id, slug }
       removeUndefinedNullValuesFromObject(matchParams)

From 5d54c1af1f18ed2f0411833e556ea7acb3bce8a0 Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:54:37 +0100
Subject: [PATCH 07/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index f1c56a01f..e95000b19 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -3,8 +3,8 @@
     <ds-grid>
       <ds-grid-item v-if="!isMobile" column-span="fullWidth">
         <ds-grid class="header-grid">
-          <ds-grid-item v-for="f in fields" :key="f.label" class="ds-table-head-col">
-            {{ f.label }}
+          <ds-grid-item v-for="field in fields" :key="field.label" class="ds-table-head-col">
+            {{ field.label }}
           </ds-grid-item>
         </ds-grid>
       </ds-grid-item>

From 6727a61329399a83dc3918906b103da1b39368d7 Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:55:31 +0100
Subject: [PATCH 08/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index e95000b19..34f696c9c 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -73,8 +73,8 @@
               </ds-flex-item>
               <ds-flex-item>
                 <base-card :wide-content="true">
-                  <b :class="{ 'notification-status': n.read }">
-                    {{ n.from.contentExcerpt | removeHtml }}
+                  <b :class="{ 'notification-status': notification.read }">
+                    {{ notification.from.contentExcerpt | removeHtml }}
                   </b>
                 </base-card>
               </ds-flex-item>

From d4149e964da70ac83ee7914bfaecf12e09bd97ad Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:55:43 +0100
Subject: [PATCH 09/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 34f696c9c..9cd1d81bd 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -9,8 +9,8 @@
         </ds-grid>
       </ds-grid-item>
       <ds-grid-item
-        v-for="n in notifications"
-        :key="n.id"
+        v-for="notification in notifications"
+        :key="notification.id"
         column-span="fullWidth"
         class="notification-grid-row"
       >

From e1a18527cfb593a3d827b3ec30b1011bed371406 Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:56:02 +0100
Subject: [PATCH 10/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 .../NotificationsTable/NotificationsTable.vue          | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 9cd1d81bd..124f81084 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -59,15 +59,15 @@
                 <base-card :wide-content="true">
                   <nuxt-link
                     class="notification-mention-post"
-                    :class="{ 'notification-status': n.read }"
+                    :class="{ 'notification-status': notification.read }"
                     :to="{
                       name: 'post-id-slug',
-                      params: params(n.from),
-                      hash: hashParam(n.from),
+                      params: params(notification.from),
+                      hash: hashParam(notification.from),
                     }"
-                    @click.native="markNotificationAsRead(n.from.id)"
+                    @click.native="markNotificationAsRead(notification.from.id)"
                   >
-                    <b>{{ n.from.title || n.from.post.title | truncate(50) }}</b>
+                    <b>{{ notification.from.title || notification.from.post.title | truncate(50) }}</b>
                   </nuxt-link>
                 </base-card>
               </ds-flex-item>

From 736bc2719aa4e76d336600351eb32f4c06ce39f0 Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:56:17 +0100
Subject: [PATCH 11/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 124f81084..a2cf7f1e3 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -45,8 +45,8 @@
                         />
                       </client-only>
                     </ds-space>
-                    <ds-text :class="{ 'notification-status': n.read, reason: true }">
-                      {{ $t(`notifications.reason.${n.reason}`) }}
+                    <ds-text :class="{ 'notification-status': notification.read, reason: true }">
+                      {{ $t(`notifications.reason.${notification.reason}`) }}
                     </ds-text>
                   </base-card>
                 </div>

From 12861834fb1a04ba8f90a416a37cc4fcae69d33a Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:56:25 +0100
Subject: [PATCH 12/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index a2cf7f1e3..e86daea68 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -21,7 +21,7 @@
                 <div>
                   <base-card :wide-content="true">
                     <base-icon
-                      v-if="n.from.post"
+                      v-if="notification.from.post"
                       name="comment"
                       v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
                     />

From f42eeb0104ee76f2b72bd4aecd9dc36da296df17 Mon Sep 17 00:00:00 2001
From: Markus <57147781+maeckes-infinitylabs@users.noreply.github.com>
Date: Mon, 13 Mar 2023 16:56:37 +0100
Subject: [PATCH 13/16] Update
 webapp/components/NotificationsTable/NotificationsTable.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 webapp/components/NotificationsTable/NotificationsTable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index e86daea68..19063391b 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -39,9 +39,9 @@
                     <ds-space margin-bottom="base">
                       <client-only>
                         <user-teaser
-                          :user="n.from.author"
-                          :date-time="n.from.createdAt"
-                          :class="{ 'notification-status': n.read }"
+                          :user="notification.from.author"
+                          :date-time="notification.from.createdAt"
+                          :class="{ 'notification-status': notification.read }"
                         />
                       </client-only>
                     </ds-space>

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 14/16] 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 15/16] 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 {

From 3f4f65121a50c867c6cdccb348b8474e60afa63a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 14 Mar 2023 14:25:15 +0100
Subject: [PATCH 16/16] Fix linting

---
 webapp/components/NotificationsTable/NotificationsTable.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/components/NotificationsTable/NotificationsTable.vue b/webapp/components/NotificationsTable/NotificationsTable.vue
index 19063391b..7065b2624 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@@ -67,7 +67,9 @@
                     }"
                     @click.native="markNotificationAsRead(notification.from.id)"
                   >
-                    <b>{{ notification.from.title || notification.from.post.title | truncate(50) }}</b>
+                    <b>
+                      {{ notification.from.title || notification.from.post.title | truncate(50) }}
+                    </b>
                   </nuxt-link>
                 </base-card>
               </ds-flex-item>