error display

3 files changed, 26 insertions, 1 deletions

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 55a9b0ab..b24250b0 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -14,6 +14,9 @@ const Notifications = {
     notifications () {
       return this.$store.state.statuses.notifications.data
     },
+    error () {
+      return this.$store.state.statuses.notifications.error
+    },
     unseenNotifications () {
       return filter(this.notifications, ({seen}) => !seen)
     },
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5881fbaa..5b09685b 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,6 +4,10 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
+  .title {
+    display: inline-block;
+  }
+
   .panel {
     background: $fallback--bg;
     background: var(--bg, $fallback--bg)
@@ -22,6 +26,8 @@
     background: var(--btn, $fallback--btn);
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
+    display: flex;
+    align-items: baseline;
     .read-button {
       position: absolute;
       right: 0.7em;
@@ -44,6 +50,19 @@
     line-height: 1.3em;
   }
 
+  .loadmore-error {
+    position: absolute;
+    right: 0.6em;
+    font-size: 14px;
+    min-width: 6em;
+    font-family: sans-serif;
+    text-align: center;
+    padding: 0 0.25em 0 0.25em;
+    margin: 0;
+    color: $fallback--fg;
+    color: var(--fg, $fallback--fg);
+  }
+
   .unseen {
     box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
     padding-left: 0;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 859730ed..a0b0e5f5 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -3,7 +3,10 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
-        {{$t('notifications.notifications')}}
+        <div class="title"> {{$t('notifications.notifications')}}</div>
+        <div @click.prevent class="loadmore-error alert error" v-if="error">
+          {{$t('timeline.error_fetching')}}
+        </div>
         <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">