commit: 3a62ad3c4c6939d03ba3d941d4e6a24e816a2787
parent: 1057227be38fc6af0e7f128f30ff2b991a60c34f
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Tue, 7 Mar 2017 11:27:46 -0500
Merge branch 'feature/more-visible-notifications' into 'develop'
Notifications inside a red circle and the red line more visible
See merge request !46
Diffstat:
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -13,6 +13,19 @@
}
}
+ .unseen-count {
+ display: inline-block;
+ background-color: rgba(255, 16, 8, 0.8);
+ text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
+ min-width: 1.3em;
+ border-radius: 1.3em;
+ margin: 0 0.2em 0 -0.4em;
+ color: white;
+ font-size: 0.9em;
+ text-align: center;
+ line-height: 1.3em;
+ }
+
.notification {
// Will have to use pixels here to ensure consistent distance with
// pad alone and pad + border, browsers bad at rounding this with em,
@@ -64,7 +77,7 @@
}
.unseen {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
+ border-left: 4px solid rgba(255, 16, 8, 0.75);
padding-left: 6px;
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -2,7 +2,8 @@
<div class="notifications">
<div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">
- Notifications ({{unseenCount}})
+ <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+ Notifications
<button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button>
</div>
<div class="panel-body">