Improve styling of the inspector panel (#28)

Co-authored-by: Charles Mcgrady <rgb@gmail.com>
OvertureMaps · May 18, 2024 · acd9e45 · acd9e45
1 parent 19869ad
commit acd9e45
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 27 deletions.
diff --git a/site/src/InspectorPanel.css b/site/src/InspectorPanel.css
@@ -1,21 +1,54 @@
 .inspector-panel {
-    position: fixed;
-    z-index: 10;
-    top: 10;
-    left: 0;
-    max-width: 320px;
-    background-color: rgba(0,0,0,0.4);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-    padding: 12px 24px;
-    margin: 4px;
-    font-size: 13px;
-    line-height: 2;
-    outline: none;
-    border: 3px;
-    border-radius:15px;
-    border-color: rgba(15,15,15,0.8);
+  position: fixed;
+  z-index: 10;
+  top: 10;
+  left: 0;
+  max-width: 320px;
+  background-color: rgba(255, 255, 255, 0.95);
+  color: black;
+  box-shadow: 0 2px 4px white;
+  padding: 10px;
+  margin: 4px;
+  font-size: 13px;
+  line-height: 2;
+  outline: none;
+  border: 3px;
+  border-radius: 10px;
+  border-color: rgba(15, 15, 15, 0.8);
+
+  h3,
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  table td {
+    padding-right: 0.5em;
+    vertical-align: top;
+    border-left: 0;
+    border-right: 0;
+    word-break: break-all;
+  }
+  table td:first-child {
+    text-align: left;
+    width: 30%;
+  }
+  table td:first-child {
+    word-break: normal;
+  }
+  table td:last-child {
+    width: 70%;
+  }
+  table tr:not(:last-child) td {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  table {
+    border-spacing: 0;
   }
+}
 
-  .theme-light .inspector-panel {
-  background-color: rgba(255,255,255,0.6D);
-  }
+.theme-dark .inspector-panel {
+  background-color: rgba(0, 0, 0, 0.75);
+  box-shadow: 0 2px 4px black;
+  color: white;
+}
diff --git a/site/src/InspectorPanel.jsx b/site/src/InspectorPanel.jsx
@@ -9,13 +9,18 @@ function InspectorPanel({entity}) {
   return (
     <div className="inspector-panel">
       <h3>Inspector Panel</h3>
-      {Object.keys(entity)
-        .filter((key) => !key.startsWith('@'))
-        .map((key) => (
-          <div key={key}>
-            <strong>{key}:</strong> {entity[key].toString()}
-          </div>
-        ))}
+      <table>
+        {Object.keys(entity)
+          .filter((key) => !key.startsWith("@"))
+          .map((key) => (
+            <tr key={key}>
+              <td>
+                <strong>{key}</strong>
+              </td>
+              <td>{entity[key].toString()}</td>
+            </tr>
+          ))}
+      </table>
       <p>
          <a href="https://docs.overturemaps.org/schema/">Overture Schema Reference</a>
       </p>

diff --git a/site/src/Map.jsx b/site/src/Map.jsx
@@ -80,9 +80,10 @@ export default function Map({mode}) {
   const onClick = useCallback(event => {
     const feature = event.features && event.features[0];
 
-
     if (feature) {
       setMapEntity(event.features[0].properties);
+    } else {
+      setMapEntity({});
     }
   }, []);
 
@@ -118,7 +119,7 @@ export default function Map({mode}) {
           <NavigationControl position='top-right'></NavigationControl>
           <GeolocateControl />
         </MapLibreMap>
-        <InspectorPanel entity={mapEntity}/>
+        {Object.keys(mapEntity).length > 0 && <InspectorPanel entity={mapEntity} />}
       </div>
     </>
   );