fix: notification tray height issues (#479)

* fix: notification tray height issues * refactor: fixed review issues of height --------- Co-authored-by: SundasNoreen <sundas.noreen@arbisoft.com>
edx · Oct 10, 2023 · 17eee9d · 17eee9d
1 parent 77e2b7d
commit 17eee9d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {
-  useCallback, useEffect, useRef, useState, useMemo,
+  useCallback, useEffect, useRef, useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -24,6 +24,7 @@ const Notifications = () => {
   const popoverRef = useRef(null);
   const buttonRef = useRef(null);
   const [enableNotificationTray, setEnableNotificationTray] = useState(false);
+  const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const notificationCounts = useSelector(selectNotificationTabsCount);
   const isOnMediumScreen = useIsOnMediumScreen();
   const isOnLargeScreen = useIsOnLargeScreen();
@@ -41,10 +42,16 @@ const Notifications = () => {
   }, []);
 
   useEffect(() => {
+    const handleScroll = () => {
+      setIsHeaderVisible(window.scrollY < 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
     document.addEventListener('mousedown', handleClickOutsideNotificationTray);
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
+      window.removeEventListener('scroll', handleScroll);
       dispatch(resetNotificationState());
     };
   }, []);
@@ -188,28 +195,6 @@ const Notifications = () => {
     };
   }, []);
 
-  const viewPortHeight = document.body.clientHeight;
-  const headerHeight = document.getElementsByClassName('learning-header-container');
-  const footer = document.getElementsByClassName('footer');
-
-  const notificationBarHeight = useMemo(() => {
-    if (headerHeight.length > 0) {
-      const availableViewportHeight = viewPortHeight - headerHeight[0].clientHeight;
-
-      if (footer.length > 0) {
-        const footerRect = footer[0].getBoundingClientRect();
-        const visibleFooterHeight = Math.min(footerRect.bottom, window.innerHeight) - Math.max(footerRect.top, 0);
-        const footerHeight = footer[0].clientHeight;
-
-        const adjustedBarHeight = availableViewportHeight - footerHeight + Math.min(visibleFooterHeight, 0);
-
-        return adjustedBarHeight;
-      }
-      return availableViewportHeight;
-    }
-    return 0;
-  }, [viewPortHeight, headerHeight, footer]);
-
   const enableFeedback = useCallback(() => {
     window.usabilla_live('click');
   }, []);
@@ -225,12 +210,13 @@ const Notifications = () => {
         overlay={(
           <Popover
             id="notificationTray"
-            style={{ height: `${notificationBarHeight}px` }}
+            style={{ height: isHeaderVisible ? '91vh' : '100vh' }}
             data-testid="notification-tray"
             className={classNames('overflow-auto rounded-0 border-0 position-fixed', {
               'w-100': !isOnMediumScreen && !isOnLargeScreen,
               'medium-screen': isOnMediumScreen,
               'large-screen': isOnLargeScreen,
+              'popover-margin-top': !isHeaderVisible,
             })}
           >
             <div ref={popoverRef}>

diff --git a/src/index.scss b/src/index.scss
@@ -263,6 +263,8 @@ $white: #fff;
 .popover {
   filter: none;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+  margin-left: 5px !important;
+  margin-top: 7px !important;
 
   .popover-header{
     top: 0px;
@@ -337,3 +339,8 @@ $white: #fff;
     top: 50% !important;
   }
 }
+
+
+.popover-margin-top {
+  margin-top: -68px !important;
+}