dashboard: legend doesn't interfere with graphHEADmaster

1 files changed, 13 insertions, 3 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 9b23d46..25837c8 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -172,7 +172,16 @@
   /* After the sliders, as tall; the kinds and the sliders greyed while the dots are off. */
   .legend button.toggle { float: none; margin-left: 0; line-height: 1em; }
   .legend.off .message, .legend.off .slider { opacity: .45; }
-  #legends { flex: none; }
+  /* The map and, over its top, the legend: shown or hidden, it takes no room from the
+     map, which stays as it is. What is under it shows through; its contents are on an
+     underlay of their own shape (as the map's labels), and only its controls take the
+     pointer: the map under the rest is dragged as anywhere else. */
+  .map-area { position: relative; flex: 1; min-height: 0; display: flex; }
+  #legends { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
+  #legends .legend > * { filter: drop-shadow(2px 0 0 var(--panel))
+    drop-shadow(-2px 0 0 var(--panel)) drop-shadow(0 2px 0 var(--panel))
+    drop-shadow(0 -2px 0 var(--panel)); }
+  #legends button, #legends input, #legends label { pointer-events: auto; }
   /* Hides the legend, and shows it again. */
   button.toggle { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
     float: right; margin-left: 6px; padding: 0 6px; color: var(--muted); background: none;
@@ -244,6 +253,7 @@
     <h2>Swarm <button id="legend-toggle" class="toggle">hide legend</button>
       <button id="rtt-toggle" class="toggle">layout: static</button>
       <button id="links-toggle" class="toggle">links: live</button></h2>
+    <div class="map-area">
     <div id="legends">
       <div class="legend">
         <span class="node self">this node</span>
@@ -263,6 +273,7 @@
       </div>
     </div>
     <svg id="graph"><g id="view"><g id="flows" pointer-events="none"></g><g id="flashes" pointer-events="none"></g></g></svg>
+    </div>
   </section>
   <section id="peers-box">
     <h2>Peers</h2>
@@ -1490,7 +1501,7 @@ function release() {
 }
 document.addEventListener("selectionchange", release);
 
-// The legend, hidden and shown again; the map takes the room.
+// The legend, hidden and shown again, over the map: the map stays as it is.
 const legendToggle = document.getElementById("legend-toggle");
 function showLegend(shown) {
   const legends = document.getElementById("legends");
@@ -1499,7 +1510,6 @@ function showLegend(shown) {
 }
 legendToggle.addEventListener("click", () => {
   showLegend(document.getElementById("legends").hidden);
-  if (state) renderGraph();
 });
 // Hidden as on the page it was opened from (`handOver`).
 if (handOver && handOver.legend === false) showLegend(false);