From d83a42451318cdc1fe85c58dfea0d6b21fa56b77 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 28 Oct 2019 17:29:01 +0100
Subject: [PATCH] Add styling

- to link in NotificationMenu
- make table more mobile responsive
- remove unneccessary props

Co-authored-by: Alina Beck <alina.beck@mail.com>
---
 webapp/components/AvatarMenu/AvatarMenu.vue   |  5 ++--
 .../NotificationMenu/NotificationMenu.vue     | 28 ++++++++++---------
 webapp/layouts/default.vue                    |  2 +-
 webapp/pages/notifications/index.vue          |  2 +-
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 96d26f210..18865f457 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <dropdown class="avatar-menu" offset="8">
+  <dropdown class="avatar-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <a
         class="avatar-menu-trigger"
@@ -58,7 +58,6 @@ export default {
   },
   props: {
     placement: { type: String, default: 'top-end' },
-    user: { type: Object, default: null },
   },
   computed: {
     ...mapGetters({
@@ -73,7 +72,7 @@ export default {
       let routes = [
         {
           name: this.$t('profile.name'),
-          path: `/profile/${this.user.slug}`,
+          path: `/profile/${this.user.id}/${this.user.slug}`,
           icon: 'user',
         },
         {
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 0386094f6..550887f08 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -2,21 +2,21 @@
   <ds-button v-if="!notificationsCount" class="notifications-menu" disabled icon="bell">
     {{ unreadNotificationsCount }}
   </ds-button>
-  <dropdown v-else class="notifications-menu" :placement="placement">
+  <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
         {{ unreadNotificationsCount }}
       </ds-button>
     </template>
     <template slot="popover">
-      <ds-space centered>
-        <ds-button primary fullwidth :path="{ name: 'notifications' }">
-          {{ $t('notifications.pageLink') }}
-        </ds-button>
-      </ds-space>
       <div class="notifications-menu-popover">
         <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
+      <div class="notifications-link-container">
+        <nuxt-link :to="{ name: 'notifications' }">
+          {{ $t('notifications.pageLink') }}
+        </nuxt-link>
+      </div>
     </template>
   </dropdown>
 </template>
@@ -121,14 +121,16 @@ export default {
 
 .notifications-menu-popover {
   max-width: 500px;
+  margin-bottom: $size-height-base;
 }
-.link-bg {
-  position: sticky;
-  width: 100%;
-  background-color: $background-color-primary-active;
+.notifications-link-container {
+  background-color: $background-color-softer-active;
   text-align: center;
-}
-.notifications-link {
-  color: $text-color-softer;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $size-height-base;
+  padding: $space-x-small;
 }
 </style>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 091bfb7c8..7a95ada76 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -71,7 +71,7 @@
                     <notification-menu placement="top" />
                   </client-only>
                   <client-only>
-                    <avatar-menu placement="top" :user="user" />
+                    <avatar-menu placement="top" />
                   </client-only>
                 </template>
               </div>
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index 2ff6fe2d5..95d30df1a 100644
--- a/webapp/pages/notifications/index.vue
+++ b/webapp/pages/notifications/index.vue
@@ -135,7 +135,7 @@ export default {
         },
         user: {
           label: this.$t('notifications.user'),
-          width: '350px',
+          width: '33.333%',
         },
         post: this.$t('notifications.post'),
         content: this.$t('notifications.content'),