ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fiddle with height of notification icon

This commit is contained in:
Daniel Egger 2023-05-17 11:53:14 +02:00
parent 3acae49217
commit 4d4b6c5405
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/header/MainNavigationBar.vue
View File

@ -136,16 +136,18 @@ onMounted(() => {
<div class="flex items-stretch justify-start space-x-8"> <div class="flex items-stretch justify-start space-x-8">
<!-- Notification Bell & Menu --> <!-- Notification Bell & Menu -->
<div v-if="userStore.loggedIn" class="nav-item"> <div v-if="userStore.loggedIn" class="nav-item leading-none">
<NotificationPopover> <NotificationPopover>
<template #toggleButtonContent> <template #toggleButtonContent>
<div class="flex"> <div class="relative h-8 w-8">
<it-icon-notification class="h-6 w-6" /> <div>
<div <it-icon-notification class="h-8 w-8" />
v-if="notificationsStore.hasUnread" <div
aria-label="unread notifications" v-if="notificationsStore.hasUnread"
class="mt-1 h-1.5 w-1.5 rounded-full bg-sky-500" aria-label="unread notifications"
/> class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
/>
</div>
</div> </div>
</template> </template>
<template #popoverContent> <template #popoverContent>
@ -156,7 +158,7 @@ onMounted(() => {
<div <div
v-if="selectedCourseSessionTitle" v-if="selectedCourseSessionTitle"
class="hidden items-center lg:inline-flex" class="nav-item hidden items-center lg:inline-flex"
> >
<div class=""> <div class="">
{{ selectedCourseSessionTitle }} {{ selectedCourseSessionTitle }}

2
client/src/components/notifications/NotificationPopover.vue
View File

@ -10,7 +10,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
<PopoverPanel> <PopoverPanel>
<div <div
class="absolute right-0 mt-2 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-2" class="absolute right-0 z-10 mt-2 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-2"
> >
<!-- To close the popover withing your content, use the 'PopoverButton' <!-- To close the popover withing your content, use the 'PopoverButton'
https://headlessui.com/vue/popover#closing-popovers-manually https://headlessui.com/vue/popover#closing-popovers-manually