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 @@