diff --git a/src/mapml.css b/src/mapml.css index c6721291b..e13ffb344 100644 --- a/src/mapml.css +++ b/src/mapml.css @@ -442,10 +442,8 @@ summary { padding: 0 4px 0 4px; border: none; text-align: center; - width: 18px; - height: 14px; font: 16px/14px Tahoma, Verdana, sans-serif; - color: #c3c3c3; + color: inherit; text-decoration: none; font-weight: bold; background: transparent; @@ -454,7 +452,6 @@ summary { .mapml-focus-buttons { white-space: nowrap; - display: inline; } .mapml-feature-count { @@ -464,6 +461,54 @@ summary { padding: 2px; } +.mapml-focus-buttons a, +.leaflet-container a.leaflet-popup-close-button { + width: 44px; + height: 44px; + min-width: 44px; + min-height: 44px; + line-height: 44px; +} +.leaflet-popup-content { + margin: 0; + min-width: min-content; +} +.mapml-popup-content { + padding-top: 44px; +} +.mapml-focus-buttons { + display: block; + text-align: center; +} +.mapml-focus-buttons a { + display: inline-block; + padding: 0; +} +.leaflet-container a.leaflet-popup-close-button { + padding: 0; + font-size: 20px; +} +.leaflet-popup-content .mapml-feature-count { + margin: 0; + padding: 0 5px; + line-height: 44px; +} +.mapml-popup-content hr:last-of-type { + margin-bottom: 0; + border-bottom: 0; + border-top: 1px solid #e3e3e3; +} +.mapml-popup-content :first-child { + margin-top: 0; + padding-top: 0; +} +.mapml-popup-content > :not(.mapml-focus-buttons) { + padding: 0 1rem; +} +.leaflet-popup-tip-container { + margin-top: -1px; +} + .mapml-outline { outline-style: auto; outline-offset: -1px; diff --git a/src/mapml/layers/MapLayer.js b/src/mapml/layers/MapLayer.js index 5d610c52a..2cd89a976 100644 --- a/src/mapml/layers/MapLayer.js +++ b/src/mapml/layers/MapLayer.js @@ -98,7 +98,7 @@ export var MapMLLayer = L.Layer.extend({ var c = document.createElement('div'); c.classList.add("mapml-popup-content"); c.insertAdjacentHTML('afterbegin', properties.innerHTML); - geometry.bindPopup(c, {autoClose: false, minWidth: 108}); + geometry.bindPopup(c, {autoClose: false, minWidth: 165}); } } }); @@ -129,7 +129,7 @@ export var MapMLLayer = L.Layer.extend({ var c = document.createElement('div'); c.classList.add("mapml-popup-content"); c.insertAdjacentHTML('afterbegin', properties.innerHTML); - geometry.bindPopup(c, {autoClose: false, minWidth: 108}); + geometry.bindPopup(c, {autoClose: false, minWidth: 165}); } } }).addTo(map); @@ -1182,6 +1182,7 @@ export var MapMLLayer = L.Layer.extend({ let popup = e.popup, map = e.target, layer, group, content = popup._container.getElementsByClassName("mapml-popup-content")[0]; + popup._container.setAttribute("role", "dialog"); content.setAttribute("tabindex", "-1"); popup._count = 0; // used for feature pagination @@ -1192,12 +1193,12 @@ export var MapMLLayer = L.Layer.extend({ layer = popup._source._templatedLayer; } - if(popup._container.querySelector('div[class="mapml-focus-buttons"]')){ - L.DomUtil.remove(popup._container.querySelector('div[class="mapml-focus-buttons"]')); + if(popup._container.querySelector('nav[class="mapml-focus-buttons"]')){ + L.DomUtil.remove(popup._container.querySelector('nav[class="mapml-focus-buttons"]')); L.DomUtil.remove(popup._container.querySelector('hr')); } //add when popopen event happens instead - let div = L.DomUtil.create("div", "mapml-focus-buttons"); + let div = L.DomUtil.create("nav", "mapml-focus-buttons"); // creates |< button, focuses map let mapFocusButton = L.DomUtil.create('a',"mapml-popup-button", div); @@ -1251,7 +1252,6 @@ export var MapMLLayer = L.Layer.extend({ }, popup); let divider = L.DomUtil.create("hr"); - divider.style.borderTop = "1px solid #bbb"; popup._navigationBar = div; popup._content.appendChild(divider); diff --git a/test/e2e/layers/queryLink.test.js b/test/e2e/layers/queryLink.test.js index 7a8e1d9bc..4a13126ea 100644 --- a/test/e2e/layers/queryLink.test.js +++ b/test/e2e/layers/queryLink.test.js @@ -93,7 +93,7 @@ jest.setTimeout(50000); }); test("[" + browserType + "]" + " Next feature added + popup content updated ", async () => { - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(4)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d") @@ -108,7 +108,7 @@ jest.setTimeout(50000); }); test("[" + browserType + "]" + " Previous feature added + popup content updated ", async () => { - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(2)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(2)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d") @@ -124,7 +124,7 @@ jest.setTimeout(50000); test("[" + browserType + "]" + " PCRS feature added + popup content updated ", async () => { for (let i = 0; i < 2; i++) - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(4)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d") @@ -139,7 +139,7 @@ jest.setTimeout(50000); }); test("[" + browserType + "]" + " TCRS feature added + popup content updated ", async () => { - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(4)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d") @@ -154,7 +154,7 @@ jest.setTimeout(50000); }); test("[" + browserType + "]" + " Tilematrix feature added + popup content updated ", async () => { - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(4)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d") @@ -168,7 +168,7 @@ jest.setTimeout(50000); expect(popup).toEqual("TILEMATRIX Test"); }); test("[" + browserType + "]" + " Synthesized point, valid location ", async () => { - await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > div > a:nth-child(4)"); + await page.click("div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-popup-pane > div > div.leaflet-popup-content-wrapper > div > div > nav > a:nth-child(4)"); const feature = await page.$eval( "div > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-overlay-pane > div:nth-child(1) > div:nth-child(5) > svg > g > g > path", (tile) => tile.getAttribute("d")