summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/NotificationsAlerts.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-23 20:39:01 +0100
committerJannik Schönartz2019-02-23 20:39:01 +0100
commit4694c2fcf5ec5eb5dad7984043ee014a698b47d7 (patch)
tree83cf8b7f4bc0f7ae1832f914c75b86a7d7b3bf99 /webapp/src/components/NotificationsAlerts.vue
parent[webapp/groups] forgot to remove debug stuff (diff)
downloadbas-4694c2fcf5ec5eb5dad7984043ee014a698b47d7.tar.gz
bas-4694c2fcf5ec5eb5dad7984043ee014a698b47d7.tar.xz
bas-4694c2fcf5ec5eb5dad7984043ee014a698b47d7.zip
[webapp/alerts] Fix position to be attached to the topbar & fix overflow
Diffstat (limited to 'webapp/src/components/NotificationsAlerts.vue')
-rw-r--r--webapp/src/components/NotificationsAlerts.vue10
1 files changed, 8 insertions, 2 deletions
diff --git a/webapp/src/components/NotificationsAlerts.vue b/webapp/src/components/NotificationsAlerts.vue
index c16ad58..8e5bea6 100644
--- a/webapp/src/components/NotificationsAlerts.vue
+++ b/webapp/src/components/NotificationsAlerts.vue
@@ -17,7 +17,7 @@
<template>
<div>
- <v-menu v-model="menu" offset-y left :close-on-content-click="false" :nudge-bottom="10" content-class="notifications">
+ <v-menu v-model="menu" offset-y left :close-on-content-click="false" :nudge-bottom="10" content-class="notifications" attach="attachToElement">
<v-btn icon slot="activator">
<v-badge :value="!menu && newAlertCount" color="red darken-3" bottom>
<span slot="badge">{{newAlertCount}}</span>
@@ -42,6 +42,7 @@
:type="a.type"
:color="a.color"
:icon="a.icon"
+ class="alert"
>
<div class="flex-between-center">
<div>{{ a.text }}</div>
@@ -62,6 +63,7 @@ import { mapState, mapMutations } from 'vuex'
export default {
name: 'NotificationsAlerts',
+ props: ['attachToElement'],
data () {
return {
menu: false
@@ -128,13 +130,13 @@ export default {
.notifications {
right: 12px;
max-width: 100%;
+ left: 12px !important;
}
}
@media (min-width: 961px) {
.notifications {
width: 600px;
-
}
}
@@ -144,4 +146,8 @@ export default {
align-items: center;
}
+.alert {
+ width: fit-content;
+}
+
</style>