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 01/10] 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 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 02/10] 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 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 03/10] 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 04/10] 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 05/10] 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 06/10] 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 07/10] 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 08/10] 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 09/10] 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 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 10/10] 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>