feature: sticky legend group header (#1909)

* Sticky header * slidefix * Update group.js
origo-map · Dec 4, 2023 · 5f37c34 · 5f37c34
1 parent 39a43aa
commit 5f37c34
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/scss/ui/_slidenav.scss b/scss/ui/_slidenav.scss
@@ -2,15 +2,13 @@
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
-  overflow: hidden;
   position: relative;
   transition: height 0.3s;
 
   >.main {
     box-sizing: border-box;
     display: inline-block;
     left: 0;
-    overflow: hidden;
     position: relative;
     top: 0;
     transition: all 0.3s;
@@ -35,9 +33,11 @@
     width: 100%;
     will-change: transform;
     z-index: 1000;
+    height: unset;
 
     &.absolute {
       position: absolute;
+      height: 0;
     }
   }
 
@@ -70,5 +70,7 @@
       opacity: 1;
       transform: none;
     }
+
+    overflow: hidden
   }  
 }
diff --git a/scss/ui/helpers/_helpers.scss b/scss/ui/helpers/_helpers.scss
@@ -64,6 +64,10 @@
   overflow-y: auto;
 }
 
+.overflow-unset {
+  overflow: unset;
+}
+
 // position
 .absolute {
   position: absolute;

diff --git a/src/controls/legend/group.js b/src/controls/legend/group.js
@@ -128,10 +128,10 @@ const Group = function Group(viewer, options = {}) {
 
   const GroupHeader = function GroupHeader() {
     const headerComponent = CollapseHeader({
-      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small item wrap',
+      cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small sticky bg-white z-index-low item wrap',
+      style: `top: 0;${moreInfoButton ? 'padding-right: 0.275rem' : ''}`,
       icon,
-      title,
-      style: `${moreInfoButton ? 'padding-right: 0.275rem' : ''}`
+      title
     });
     if (moreInfoButton) {
       headerComponent.on('render', function hcRender() {

diff --git a/src/ui/slidenav.js b/src/ui/slidenav.js
@@ -132,7 +132,7 @@ export default function Slidenav(options = {}) {
     getState,
     onInit() {
       mainContainer = Element({
-        cls: 'main'
+        cls: 'main overflow-unset'
       });
       backButton = Button({
         cls: 'icon-small padding-small',