[incubator-baremaps-site] branch main updated: Improve map inspect popup (#36)

[leonardcs]

This is an automated email from the ASF dual-hosted git repository.

leonardcs pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git


The following commit(s) were added to refs/heads/main by this push:
     new 31413b4  Improve map inspect popup (#36)
31413b4 is described below

commit 31413b4a8ef650d859592d35245651190261b6eb
Author: Leonard <73912641+leonardc...@users.noreply.github.com>
AuthorDate: Mon Jul 10 10:08:24 2023 +0200

    Improve map inspect popup (#36)
---
 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;
+}