PB-1181: menu scrollable

geoadmin · Dec 4, 2024 · c2fc5e2 · c2fc5e2
1 parent 7356671
commit c2fc5e2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/modules/menu/MenuModule.vue b/src/modules/menu/MenuModule.vue
@@ -177,6 +177,14 @@ $openCloseButtonHeight: 2.5rem;
         }
     }
 }
+
+@include respond-below(phone) {
+    .menu {
+        .menu-tray {
+            overflow: auto;
+        }
+    }
+}
 // transition definitions
 .fade-in-out-enter-active,
 .fade-in-out-leave-active {

diff --git a/src/modules/menu/components/menu/MenuTray.vue b/src/modules/menu/components/menu/MenuTray.vue
@@ -188,6 +188,12 @@ function addRefBySectionId(el) {
     font-size: 0.825rem;
 }
 
+@include respond-below(phone) {
+    .menu-tray-inner {
+        overflow: unset;
+    }
+}
+
 @include respond-above(lg) {
     .help-section {
         // See HeaderWithSearch.vue css where the help-section is enable below lg

diff --git a/tests/cypress/tests-e2e/importToolMaps.cy.js b/tests/cypress/tests-e2e/importToolMaps.cy.js
@@ -8,7 +8,7 @@ describe('The Import Maps Tool', () => {
         cy.goToMapView({}, true)
         cy.openMenuIfMobile()
     })
-    it('Import external wms layers', () => {
+    it.only('Import external wms layers', () => {
         cy.intercept(
             {
                 https: true,
@@ -277,7 +277,7 @@ describe('The Import Maps Tool', () => {
         //-----------------------------------------------------------------------------------------
         cy.log('Toggle import menu')
         cy.get('[data-cy="menu-advanced-tools-import_maps"]').should('have.class', 'text-primary')
-        cy.get('[data-cy="menu-advanced-tools-import_maps"]').should('be.visible').click()
+        cy.get('[data-cy="menu-advanced-tools-import_maps"]').should('exist').click()
         cy.get('[data-cy="menu-advanced-tools-import_maps"]').should(
             'not.have.class',
             'text-primary'

diff --git a/tests/cypress/tests-e2e/menuTray.cy.js b/tests/cypress/tests-e2e/menuTray.cy.js
@@ -166,7 +166,7 @@ function checkOpenSections(openSections) {
     sections
         .filter((section) => openSections.includes(section.name))
         .forEach((section) => {
-            cy.get(section.selector).should('be.visible')
+            cy.get(section.selector).should('exist')
         })
     sections
         .filter((section) => !openSections.includes(section.name))
@@ -217,7 +217,7 @@ describe('Test menu tray ui', () => {
         init(30, 30)
         checkOpenSections(['topics', 'activeLayers'])
         measureMenu(true)
-        checkScrollbarVisibility(true, true)
+        checkScrollbarVisibility(false, false)
 
         cy.get(menuActiveLayersHeaderSelector).click()
         waitForAnimationsToFinish()
@@ -249,11 +249,16 @@ describe('Test menu tray ui', () => {
         checkOpenSections(['topics'])
         measureMenu(true)
     })
-    it('Each open menu section has a minimal height, even if there is a high discrepancy between their original heights', () => {
+    it('Each open menu section is entirely unfolded and you can scroll the entire menu', () => {
         init(30, 2)
         checkOpenSections(['topics', 'activeLayers'])
         measureMenu(true)
-        checkScrollbarVisibility(true, false)
+        checkScrollbarVisibility(false, false)
+
+        cy.get('[data-cy="menu-tray"]').then(($body) => {
+            cy.wrap($body).invoke('outerHeight').should('eq', 498)
+            cy.wrap($body).invoke('prop', 'scrollHeight').should('eq', 1571)
+        })
     })
     it('no scrolling if menus are small enough', () => {
         init(3, 2)