v0.32.2

src/admin/web/app/overview-masonry.js

@@ -0,0 +1,38 @@
+window.rustProxyMasonry = (() => {
+    const grid = document.getElementById("dashboard-overview-grid");
+    if (!grid) return { refresh() { } };
+    const widgets = () => [...grid.children].filter(node => node.dataset.dashboardWidget);
+    const group = node => node.classList.contains("pool-card") ? 4
+        : node.classList.contains("stat") ? 0
+            : node.classList.contains("overview-wide-chart") ? 2
+                : node.dataset.dashboardWidget?.endsWith("_diagnostics") ? 3 : 1;
+
+    function refresh() {
+        const previous = widgets();
+        const ordered = previous.map((node, index) => ({ node, index }))
+            .sort((a, b) => group(a.node) - group(b.node) || a.index - b.index)
+            .map(item => item.node);
+        if (ordered.some((node, i) => node !== previous[i])) grid.append(...ordered);
+        let lastGroup = -1;
+        for (const node of ordered) {
+            for (const key of ["position", "left", "top", "width", "minHeight", "gridColumnStart",
+                "gridColumnEnd", "gridRowStart", "gridRowEnd", "alignSelf"]) node.style[key] = "";
+            node.classList.remove("overview-row-start");
+            if (node.hidden) continue;
+            const current = group(node);
+            if (current !== lastGroup) node.classList.add("overview-row-start");
+            lastGroup = current;
+        }
+        grid.classList.remove("is-packed");
+        grid.classList.add("is-aligned");
+        grid.style.height = "";
+    }
+    refresh();
+    return {
+        refresh,
+        groupFor(id) {
+            const node = widgets().find(item => item.dataset.dashboardWidget === id);
+            return node ? group(node) : -1;
+        },
+    };
+})();