Merge pull request #6116 from Ocelot-Social-Community/6016-feature-refactor-notification-page

feat(webapp): refactor notification page

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', () => {

webapp/components/NotificationsTable/NotificationsTable.vue

@@ -1,62 +1,108 @@
 <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="field in fields" :key="field.label" class="ds-table-head-col">
+            {{ field.label }}
+          </ds-grid-item>
+        </ds-grid>
+      </ds-grid-item>
+      <ds-grid-item
+        v-for="notification in notifications"
+        :key="notification.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="notification.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="notification.from.author"
+                          :date-time="notification.from.createdAt"
+                          :class="{ 'notification-status': notification.read }"
+                        />
+                      </client-only>
+                    </ds-space>
+                    <ds-text :class="{ 'notification-status': notification.read, reason: true }">
+                      {{ $t(`notifications.reason.${notification.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': notification.read }"
+                    :to="{
+                      name: 'post-id-slug',
+                      params: params(notification.from),
+                      hash: hashParam(notification.from),
+                    }"
+                    @click.native="markNotificationAsRead(notification.from.id)"
+                  >
+                    <b>
+                      {{ notification.from.title || notification.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': notification.read }">
+                    {{ notification.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 +152,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>