Merge pull request #47 from uclouvain/feature/ON-9023

Feature/on 9023

frontend/NotificationViewer.vue

@@ -27,6 +27,8 @@
   <a
       class="dropdown-toggle nav-link"
       data-toggle="dropdown"
+      data-bs-toggle="dropdown"
+      data-bs-auto-close="outside"
       role="button"
       aria-haspopup="true"
       aria-expanded="false"
@@ -40,7 +42,7 @@
       <span class="fas fa-bell" />
     </div>
   </a>
-  <ul class="dropdown-menu notification-dropdown">
+  <ul class="dropdown-menu notification-dropdown dropdown-menu-end">
     <li
         v-if="loading"
         class="progress"
@@ -53,7 +55,7 @@
           aria-valuemax="100"
           style="width: 100%"
       >
-        <span class="sr-only">
+        <span class="sr-only visually-hidden-focusable">
           {{ $t('notification_viewer.loading') }}
         </span>
       </div>
@@ -87,7 +89,7 @@
       </li>
       <li
           role="separator"
-          class="divider"
+          class="divider dropdown-divider"
       />
       <NotificationEntry
           v-for="notification in notifications"

frontend/components/NotificationEntry.vue

@@ -30,6 +30,7 @@
         :checked="isSent"
         type="radio"
         data-toggle="tooltip"
+        data-bs-toggle="tooltip"
         :data-original-title="isSent ? $t('notification.mark_as_read') : $t('notification.mark_as_unread')"
         @click.prevent="$emit('toggle', uuid)"
     >

osis_notification/templatetags/osis_notification.py

@@ -37,7 +37,7 @@ def notification_viewer(**kwargs):
     for name, value in kwargs.items():
         attrs['data-' + "-".join(name.lower().split("_"))] = escapejs(value)
     return mark_safe(
-        '<li id="notification-viewer" class="dropdown" {}></li>'.format(
+        '<li id="notification-viewer" class="dropdown nav-item" {}></li>'.format(
             " ".join('{}="{}"'.format(k, v) for k, v in attrs.items()),
         )
     )