From fe945f51a5063b4f2a946b50fb51e87c4e55260c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Mon, 9 Nov 2026 12:28:08 +0100 Subject: [PATCH] 0.36.9 --- langs/en_US.json | 3 +- langs/pl_pl.json | 3 +- src/admin/web/app/dashboard-inline-layout.js | 2 +- src/admin/web/css/30-overview.css | 171 ++++++++++++++++++- 4 files changed, 174 insertions(+), 5 deletions(-) diff --git a/langs/en_US.json b/langs/en_US.json index 4f3abf9..fe85cb3 100644 --- a/langs/en_US.json +++ b/langs/en_US.json @@ -3071,9 +3071,10 @@ "overviewLayoutNarrow": "Decrease card width", "overviewLayoutWiden": "Increase card width", "overviewLayoutHeight": "Height in rows", + "overviewLayoutHeightShort": "H", "overviewLayoutLower": "Lower", "overviewLayoutTaller": "Taller", - "overviewLayoutHeightAuto": "Automatic height: fits the content (A). Use + to make the card taller.", + "overviewLayoutHeightAuto": "Automatic height: fits the content (shown dimmed). Use + to make the card taller.", "overviewLayoutHeightFixed": "Fixed height in rows. Lower it to the content height to return to automatic sizing.", "overviewLayoutWidth": "Card width in 12-column grid", "dashboardPresetsConflict": "Preset already exists or was removed. Refresh and try again.", diff --git a/langs/pl_pl.json b/langs/pl_pl.json index cb96dd3..9cfd97c 100644 --- a/langs/pl_pl.json +++ b/langs/pl_pl.json @@ -3071,9 +3071,10 @@ "overviewLayoutNarrow": "Zmniejsz szerokość karty", "overviewLayoutWiden": "Zwiększ szerokość karty", "overviewLayoutHeight": "Wysokość w wierszach", + "overviewLayoutHeightShort": "Wys.", "overviewLayoutLower": "Niższy", "overviewLayoutTaller": "Wyższy", - "overviewLayoutHeightAuto": "Wysokość automatyczna: dopasowana do treści (A). Użyj +, aby powiększyć blok.", + "overviewLayoutHeightAuto": "Wysokość automatyczna: dopasowana do treści (wartość przygaszona). Użyj +, aby powiększyć blok.", "overviewLayoutHeightFixed": "Stała wysokość w wierszach. Zmniejsz do wysokości treści, aby wrócić do trybu automatycznego.", "overviewLayoutWidth": "Szerokość karty w siatce 12 kolumn", "dashboardPresetsConflict": "Preset już istnieje lub został usunięty. Odśwież listę i spróbuj ponownie.", diff --git a/src/admin/web/app/dashboard-inline-layout.js b/src/admin/web/app/dashboard-inline-layout.js index b1b7c11..aa74a8b 100644 --- a/src/admin/web/app/dashboard-inline-layout.js +++ b/src/admin/web/app/dashboard-inline-layout.js @@ -79,7 +79,7 @@ window.rustProxyInlineLayout = (() => { const explicit = draft.heights?.[node.dataset.dashboardWidget] !== undefined; const heightValue = node.querySelector(".overview-inline-height-value"); if (heightValue) { - heightValue.textContent = `↕${rows.span}`; + heightValue.textContent = `${t("overviewLayoutHeightShort")} ${rows.span}`; heightValue.classList.toggle("is-auto", !explicit); heightValue.title = explicit ? t("overviewLayoutHeightFixed") : t("overviewLayoutHeightAuto"); } diff --git a/src/admin/web/css/30-overview.css b/src/admin/web/css/30-overview.css index d52214a..34645e5 100644 --- a/src/admin/web/css/30-overview.css +++ b/src/admin/web/css/30-overview.css @@ -649,6 +649,127 @@ html[data-dashboard-density=ultra] #panel-overview .stat-cache-outcomes .cache-m white-space: nowrap; } +/* Sparkline tiles with a one-line detail (e.g. Backend retry attempts: recent rate, + successful retries): the detail sits on the right opposite the value, like a series + legend, and the chart spans the full width underneath. */ +#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend)) { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + grid-template-rows: auto auto 1fr; + column-gap: 10px; + align-content: start; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>span:first-child { + grid-column: 1 / -1; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>strong { + grid-column: 1; + grid-row: 2; + align-self: center; + min-width: 0; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>small { + grid-column: 2; + grid-row: 2; + align-self: center; + max-width: 16em; + margin: 0; + line-height: 1.25; + text-align: right; + overflow-wrap: anywhere; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>:is(svg:not(.ui-icon), .rp-chart-axis-host) { + grid-column: 1 / -1; + grid-row: 3; + align-self: end; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>:is(svg:not(.ui-icon), .rp-chart-axis-host) { + align-self: stretch; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>svg:not(.ui-icon) { + height: auto; + min-height: 26px; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>.rp-chart-axis-host { + display: flex; + flex-direction: column; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>small:not([hidden], .stat-chart-legend, .backend-health-origins)):not(:has(>.stat-chart-legend))>.rp-chart-axis-host>svg:not(.ui-icon) { + flex: 1 0 auto; + height: auto; + min-height: 26px; +} + +/* Sparkline tiles with a series legend (HTTP / WebSocket protocol mix, backend + traffic): the legend sits on the right, opposite the main value, one series per + line, and the chart spans the full width below. */ +#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend) { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + grid-template-rows: auto auto 1fr; + column-gap: 10px; + align-content: start; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>span:first-child { + grid-column: 1 / -1; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>strong { + grid-column: 1; + grid-row: 2; + align-self: center; + min-width: 0; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>.stat-chart-legend { + grid-column: 2; + grid-row: 2; + flex-direction: column; + flex-wrap: nowrap; + align-items: flex-end; + align-self: center; + gap: 1px; + margin: 0; + line-height: 1.25; + white-space: nowrap; +} + +#panel-overview .stats-grid>.stat.stat-chart:has(>.stat-chart-legend)>:is(svg:not(.ui-icon), .rp-chart-axis-host) { + grid-column: 1 / -1; + grid-row: 3; + align-self: end; +} + +/* Row-unit layout: the chart takes the remaining height of a taller tile. */ +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>:is(svg:not(.ui-icon), .rp-chart-axis-host) { + align-self: stretch; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>svg:not(.ui-icon) { + height: auto; + min-height: 26px; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>.rp-chart-axis-host { + display: flex; + flex-direction: column; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:has(>.stat-chart-legend)>.rp-chart-axis-host>svg:not(.ui-icon) { + flex: 1 0 auto; + height: auto; + min-height: 26px; +} + .stat-chart .stat-chart-legend i { width: 8px; height: 8px; @@ -1321,9 +1442,55 @@ html[data-chart-style] :is(#workspace, dialog) svg polyline { font-size: 10px; } -/* Automatic height (fits the content) is shown muted; a fixed height in full colour. */ +/* Height value: readable between its − / + buttons. Automatic height (fits the + content) is slightly dimmed, a fixed height is shown in full colour. */ +#panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-width-value.overview-inline-height-value { + flex: 0 0 auto; + min-width: 34px; + width: auto; + padding: 0 4px; + white-space: nowrap; + color: var(--text); + font-size: 11px; + font-weight: 600; +} + #panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-height-value.is-auto { - color: var(--muted); + font-weight: 400; + opacity: .75; +} + +/* Stat tiles taller than their content (a taller neighbour in the same row): keep + the label on top, centre the value in the free space, keep meters and legends at + the bottom and let sparklines grow, instead of leaving an empty band below. */ +#panel-overview #dashboard-overview-grid.has-row-units>.stat:not([hidden], .stat-donut, .stat-chart) { + grid-template-rows: auto 1fr; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat:not([hidden], .stat-donut, .stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes)>:is(strong, small) { + align-self: center; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat:is(.stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes):not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins))) { + display: flex; + flex-direction: column; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat:is(.stat-meter, .stat-chart, .stat-with-action, .stat-cache-outcomes):not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>:is(strong, .stat-value-row) { + margin-block: auto; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>:is(svg:not(.ui-icon), .rp-chart-axis-host) { + flex: 1 0 auto; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>.rp-chart-axis-host { + display: flex; + flex-direction: column; +} + +#panel-overview #dashboard-overview-grid.has-row-units>.stat.stat-chart:not([hidden]):not(.stat-chart:has(>.stat-chart-legend, >small:not([hidden], .backend-health-origins)))>.rp-chart-axis-host>svg:not(.ui-icon) { + flex: 1 0 auto; } #panel-overview .dashboard-overview-grid.is-unlocked.has-row-units .overview-inline-width + .overview-inline-width {