Update z-index of the sticky panel under the header (#1079)

oncokb · Jan 26, 2024 · e3691d9 · e3691d9
1 parent 2446b47
commit e3691d9
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 14 deletions.
diff --git a/screenshot-test/__baseline_snapshots__/About Page without Login-snap.png b/screenshot-test/__baseline_snapshots__/About Page without Login-snap.png
diff --git a/...ine_snapshots__/Alteration Page with Cancer Type - With login - Mobile-snap.png b/...ine_snapshots__/Alteration Page with Cancer Type - With login - Mobile-snap.png
diff --git a/..._snapshots__/Alteration Page with Cancer Type - Without login - Mobile-snap.png b/..._snapshots__/Alteration Page with Cancer Type - Without login - Mobile-snap.png
diff --git a/screenshot-test/__baseline_snapshots__/Team Page without Login-snap.png b/screenshot-test/__baseline_snapshots__/Team Page without Login-snap.png
diff --git a/src/main/webapp/app/layout.scss b/src/main/webapp/app/layout.scss
@@ -1,4 +1,13 @@
-@mixin sticky-footer($footer-height) {
+$view-wrapper-default-p-y: 2rem !default;
+
+@mixin sticky-panel-under-header($header-height) {
+  .sticky-panel-relevant-to-header {
+    top: $header-height + 3;
+    z-index: $zindex-sticky - 10;
+  }
+}
+
+@mixin sticky-footer($view-wrapper-default-p-y, $footer-height) {
   .view-wrapper {
     margin: 0 auto (-$footer-height);
     padding: $view-wrapper-default-p-y 0
@@ -29,7 +38,9 @@
 
 @include media-breakpoint-up(xs) {
   $footer-height: 22rem;
-  @include sticky-footer($footer-height);
+  $header-height: 4.5rem;
+  @include sticky-footer(1rem, $footer-height);
+  @include sticky-panel-under-header($header-height);
   .navbar-brand {
     margin-right: 1rem;
     margin-bottom: 0.3rem;
@@ -56,22 +67,16 @@
     padding-left: 1rem;
     padding-right: 1rem;
   }
-  .sticky-panel-relevant-to-header {
-    top: 0;
-  }
 }
 
 @include media-breakpoint-up(sm) {
   $footer-height: 17rem;
-  .sticky-panel-relevant-to-header {
-    top: 106px;
-  }
-  @include sticky-footer($footer-height);
+  @include sticky-footer($view-wrapper-default-p-y, $footer-height);
 }
 
 @include media-breakpoint-up(lg) {
   $footer-height: 12rem;
-  @include sticky-footer($footer-height);
+  @include sticky-footer($view-wrapper-default-p-y, $footer-height);
   .navbar {
     // add padding to align with nav item border bottom
     padding-top: $navbar-padding-top;
@@ -89,6 +94,11 @@
   }
 }
 
+@include media-breakpoint-up(md) {
+  $header-height: 4.5rem;
+  @include sticky-panel-under-header($header-height);
+}
+
 @include media-breakpoint-up(xl) {
   .navbar-nav > .nav-item {
     line-height: 2.5rem;

diff --git a/src/main/webapp/app/pages/aboutGroup/AboutPageNavTab.tsx b/src/main/webapp/app/pages/aboutGroup/AboutPageNavTab.tsx
@@ -87,7 +87,8 @@ export class AboutPageNavTab extends React.Component<AboutPageNavTabProps> {
                 className={classnames(
                   'flex-column',
                   'sticky-top',
-                  'sticky-panel-relevant-to-header'
+                  'sticky-panel-relevant-to-header',
+                  'mb-3'
                 )}
               >
                 <Nav.Item>

diff --git a/src/main/webapp/app/pages/newsPage/NewsPageNavTab.tsx b/src/main/webapp/app/pages/newsPage/NewsPageNavTab.tsx
@@ -126,7 +126,8 @@ export class NewsPageNavTab extends React.Component<NewsPageNavTabProps> {
                 className={classnames(
                   'flex-column',
                   'sticky-top',
-                  'sticky-panel-relevant-to-header'
+                  'sticky-panel-relevant-to-header',
+                  'mb-3'
                 )}
               >
                 <Nav.Item>

diff --git a/src/main/webapp/app/variables.scss b/src/main/webapp/app/variables.scss
@@ -39,6 +39,4 @@ $container-max-widths: (
   xl: 1500px,
 ) !default;
 
-$view-wrapper-default-p-y: 2rem;
-
 $bigger-default-font-size: 1.2rem;