dashboard: collapsed room is shared

1 files changed, 38 insertions, 11 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 3c24a2a..08436d0 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -48,8 +48,12 @@
     grid-template-areas: "map peers" "map figures" "map document" "map console"; }
   @media (max-width: 900px) {
     body { height: auto; }
-    main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 70vh auto 70vh 70vh 40vh;
-      grid-template-areas: "map" "peers" "figures" "document" "console"; }
+    /* Stacked: each box as tall as set here, a collapsed one as its title. */
+    main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
+      grid-auto-rows: auto; grid-template-areas: "map" "peers" "figures" "document" "console"; }
+    #map, #figures-box, #document-box { height: 70vh; }
+    #console-box { height: 40vh; }
+    main > section.collapsed { height: auto; }
   }
   section { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
     padding: 12px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
@@ -67,7 +71,12 @@
   /* The right column dragged off to the side: the map takes the width. */
   @media (min-width: 901px) {
     main.right-hidden > section:not(#map) { display: none; }
+    /* The right column all collapsed: its titles at the top, a hint below them. */
+    main.right-shut { grid-template-rows: auto auto auto auto minmax(0, 1fr);
+      grid-template-areas: "map peers" "map figures" "map document" "map console" "map hint"; }
+    main.right-shut #column-hint { display: block; }
   }
+  #column-hint { grid-area: hint; display: none; font-size: 12px; }
   section h2 .what .id { color: var(--muted); font-weight: normal; word-break: break-all; }
   /* The space between boxes, where they are resized. */
   main.resize-columns, main.resize-columns * { cursor: col-resize; }
@@ -209,6 +218,8 @@
     <h2>Document</h2>
     <div class="scroll"><div id="document" class="tree"></div></div>
   </section>
+  <div id="column-hint" class="note">Drag the space left of these boxes to the right to
+    hide the column.</div>
   <section id="console-box">
     <h2>Console</h2>
     <div class="scroll" id="console-scroll"><div id="console" class="console"></div></div>
@@ -1791,10 +1802,18 @@ try { sizes = { ...sizes, ...JSON.parse(localStorage.getItem("continuum-sizes")
 catch (_) {}
 function applySizes() {
   const style = main.style;
+  const shut = id => document.getElementById(id).classList.contains("collapsed");
+  const right = ["peers-box", "figures-box", "document-box", "console-box"];
   const wasHidden = main.classList.contains("right-hidden");
   main.classList.toggle("right-hidden", sizes.columns === 1);
-  if (sizes.columns === null) style.removeProperty("--columns");
-  else if (sizes.columns === 1) style.setProperty("--columns", "minmax(0, 1fr) 0");
+  main.classList.toggle("right-shut", sizes.columns !== 1 && right.every(shut));
+  // What's collapsed gives its room to what isn't: the map collapsed, the right column
+  // takes the width but the map's title. The right column all collapsed keeps its
+  // width, resized as ever (dragged to the side, it goes).
+  const mapShut = shut("map"), rightShut = right.every(shut);
+  if (sizes.columns === 1) style.setProperty("--columns", "minmax(0, 1fr) 0");
+  else if (mapShut && !rightShut) style.setProperty("--columns", "max-content minmax(0, 1fr)");
+  else if (sizes.columns === null) style.removeProperty("--columns");
   else style.setProperty("--columns", "minmax(0, " + sizes.columns + "fr) minmax(0, " +
     (1 - sizes.columns) + "fr)");
   // Back: what waited is drawn.
@@ -1802,16 +1821,24 @@ function applySizes() {
     if (!hidden(document.getElementById("console-box"))) showConsole();
     release();
   }
-  // A collapsed box's row as tall as its title.
-  const shut = id => document.getElementById(id).classList.contains("collapsed");
+  // A collapsed box's row as tall as its title; the open ones share the rest, as they
+  // did, and the peers take it all when they're the only one open. Their fractions
+  // add up to 1: fewer would leave room unused (CSS grid gives fractions adding up to
+  // less than 1 only that part of the room).
   const split = sizes.split === null ? .5 : sizes.split;
   const consoleShare = sizes.console === null ? .2 : sizes.console;
   const rest = 1 - consoleShare;
-  const share = (id, fr) => shut(id) ? "auto" : "minmax(0, " + fr + "fr)";
-  style.setProperty("--rows", (sizes.peers === null || shut("peers-box") ? "auto"
-    : sizes.peers + "px") + " " + share("figures-box", split * rest) + " " +
-    share("document-box", (1 - split) * rest) + " " + share("console-box", consoleShare));
-  main.classList.toggle("peers-sized", sizes.peers !== null);
+  const fractions = { "figures-box": split * rest, "document-box": (1 - split) * rest,
+    "console-box": consoleShare };
+  const openShare = Object.keys(fractions).filter(id => !shut(id))
+    .reduce((sum, id) => sum + fractions[id], 0);
+  const share = id => shut(id) ? "auto" : "minmax(0, " + fractions[id] / openShare + "fr)";
+  const peersOnly = !shut("peers-box") && right.slice(1).every(shut);
+  const peers = shut("peers-box") ? "auto" : peersOnly ? "minmax(0, 1fr)"
+    : sizes.peers === null ? "auto" : sizes.peers + "px";
+  style.setProperty("--rows", peers + " " + share("figures-box") + " " +
+    share("document-box") + " " + share("console-box"));
+  main.classList.toggle("peers-sized", sizes.peers !== null || peersOnly);
   try { localStorage.setItem("continuum-sizes", JSON.stringify(sizes)); } catch (_) {}
 }
 const box = id => document.getElementById(id).getBoundingClientRect();