This is an automated email from the ASF dual-hosted git repository. leonardcs pushed a commit to branch feature/inspect-popup in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
commit 6c8b9bdde0debf7453cfb1645a7ec74845179459 Author: Leonard <[email protected]> AuthorDate: Mon Jul 10 09:57:30 2023 +0200 Fix word wrapping and overflow --- src/components/map/index.tsx | 3 ++- .../dist/maplibre-gl-inspect/maplibre-gl-inspect.css | 11 +++++++++-- src/pages/_app.mdx | 1 + src/styles/globals.css | 12 ++++++++++++ 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx index 3b9ca55..9cbe890 100644 --- a/src/components/map/index.tsx +++ b/src/components/map/index.tsx @@ -44,7 +44,8 @@ export const getDefaultControls = (): maplibregl.IControl[] => [ showInspectMapPopupOnHover: false, popup: new maplibregl.Popup({ closeButton: true, - closeOnClick: true + closeOnClick: true, + maxWidth: 'none' }) }), // Add the tile boundaries control to the map. diff --git a/src/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect.css b/src/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect.css index 6730686..a87ed99 100644 --- a/src/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect.css +++ b/src/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect.css @@ -3,7 +3,13 @@ display: table; } +.maplibregl-inspect_feature { + padding: 0 0.75rem; +} + .maplibregl-inspect_feature:not(:last-child) { + padding-bottom: 0.25rem; + margin-bottom: 0.25rem; border-bottom: 1px solid #ccc; } @@ -22,12 +28,13 @@ .maplibregl-inspect_property-value { display: table-cell; - + max-width: 200px; + word-break: break-all; } .maplibregl-inspect_property-name { display: table-cell; - padding-right: 10px; + padding-right: 15px; } .maplibregl-ctrl-inspect { diff --git a/src/pages/_app.mdx b/src/pages/_app.mdx index f2d7a40..7dd5bdc 100644 --- a/src/pages/_app.mdx +++ b/src/pages/_app.mdx @@ -1,6 +1,7 @@ import 'maplibre-gl/dist/maplibre-gl.css'; import '@/lib/maplibre/dist/maplibre-gl-inspect/maplibre-gl-inspect.css'; import '@/lib/maplibre/dist/maplibre-gl-tile-boundaries/maplibre-gl-tile-boundaries.css'; +import '@/styles/globals.css'; import '@fortawesome/fontawesome-svg-core/styles.css'; diff --git a/src/styles/globals.css b/src/styles/globals.css new file mode 100644 index 0000000..3df019b --- /dev/null +++ b/src/styles/globals.css @@ -0,0 +1,12 @@ +.maplibregl-popup .maplibregl-popup-content { + max-height: 50vh; + overflow-y: scroll; + pointer-events: all; + border-radius: 0.5rem; + padding: 0.75rem 0; +} + +.maplibregl-popup .maplibregl-popup-close-button { + top: 10px; + right: 15px; +}
