dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine device traffic chart layout and styling
Build and Deploy Gateway / build-and-push (push) Successful in 14s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-07 22:36:35 +03:00
parent ca0322f93a
commit 41b6613837
3 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/versions.js
+2 -2
View File
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({ export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.17.10', macClient: '0.17.12',
gatewayClient: '0.18.10', gatewayClient: '0.18.12',
gatewayBackend: '0.18.1', gatewayBackend: '0.18.1',
}); });
src/web/styles.css
+9 -14
View File
@@ -1270,6 +1270,10 @@ p {
width: 112px; width: 112px;
display: grid; display: grid;
gap: 2px; gap: 2px;
border-radius: 4px;
background: color-mix(in oklch, var(--client-bg) 84%, transparent);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
visibility: hidden; visibility: hidden;
pointer-events: none; pointer-events: none;
transition: visibility 0s 420ms; transition: visibility 0s 420ms;
@@ -1373,20 +1377,19 @@ p {
} }
.client-device-traffic-chart { .client-device-traffic-chart {
grid-column: 2 / 4; grid-column: 1 / 4;
grid-row: 2; grid-row: 2;
height: var(--client-device-chart-height); height: var(--client-device-chart-height);
position: relative; position: relative;
z-index: 4; z-index: 4;
display: grid; display: grid;
grid-template-columns: 0 minmax(0, 1fr); grid-template-columns: 34px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) 14px; grid-template-rows: minmax(0, 1fr) 14px;
column-gap: 8px;
overflow: visible; overflow: visible;
} }
.client-device.is-pinned .client-device-traffic-chart { .client-device.is-pinned .client-device-traffic-chart {
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 5px;
transform-origin: bottom center; transform-origin: bottom center;
animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both; animation: client-device-chart-expand 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
} }
@@ -1421,7 +1424,7 @@ p {
} }
.client-device-traffic-plot { .client-device-traffic-plot {
grid-column: 1 / -1; grid-column: 2;
grid-row: 1; grid-row: 1;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
@@ -1430,10 +1433,6 @@ p {
cursor: crosshair; cursor: crosshair;
} }
.client-device.is-pinned .client-device-traffic-plot {
grid-column: 2;
}
.client-device-traffic-plot svg { .client-device-traffic-plot svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -1496,7 +1495,7 @@ p {
} }
.client-device-traffic-time { .client-device-traffic-time {
grid-column: 1 / -1; grid-column: 2;
grid-row: 2; grid-row: 2;
z-index: 2; z-index: 2;
display: flex; display: flex;
@@ -1506,10 +1505,6 @@ p {
line-height: 10px; line-height: 10px;
} }
.client-device.is-pinned .client-device-traffic-time {
grid-column: 2;
}
.client-device-traffic-point-tooltip { .client-device-traffic-point-tooltip {
position: fixed; position: fixed;
z-index: 1002; z-index: 1002;
test/web/device-inventory-contract.test.js
+5 -3
View File
@@ -111,9 +111,11 @@ test('Gateway device inventory uses the existing accessible responsive drawer',
assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/); assert.match(styles, /\.client-device-main \{[\s\S]*display: flex;[\s\S]*align-items: center/);
assert.match(styles, /\.client-device-traffic-total,[\s\S]*\.client-device-traffic-breakdown > span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/); assert.match(styles, /\.client-device-traffic-total,[\s\S]*\.client-device-traffic-breakdown > span \{[\s\S]*grid-template-columns: 46px minmax\(0, 1fr\)/);
assert.match(styles, /\.client-device-traffic-breakdown > span \{[\s\S]*translateY\(-12px\)[\s\S]*\.client-device-traffic:hover \.client-device-traffic-breakdown > span,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/); assert.match(styles, /\.client-device-traffic-breakdown > span \{[\s\S]*translateY\(-12px\)[\s\S]*\.client-device-traffic:hover \.client-device-traffic-breakdown > span,[\s\S]*opacity: 1[\s\S]*translateY\(0\)/);
assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*background:|\.client-device-traffic-breakdown \{[^}]*box-shadow:/); assert.match(styles, /\.client-device-traffic-breakdown \{[^}]*background: color-mix\(in oklch, var\(--client-bg\) 84%, transparent\);[^}]*backdrop-filter: blur\(8px\)/);
assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 2 \/ 4;[\s\S]*grid-row: 2/); assert.doesNotMatch(styles, /\.client-device-traffic-breakdown \{[^}]*box-shadow:/);
assert.match(styles, /\.client-device\.is-pinned \.client-device-traffic-chart \{[\s\S]*grid-template-columns: 52px minmax\(0, 1fr\)/); assert.match(styles, /\.client-device-traffic-chart \{[\s\S]*grid-column: 1 \/ 4;[\s\S]*grid-template-columns: 34px minmax\(0, 1fr\);[\s\S]*column-gap: 8px/);
assert.match(styles, /\.client-device-traffic-plot \{[\s\S]*grid-column: 2;/);
assert.match(styles, /\.client-device-traffic-time \{[\s\S]*grid-column: 2;/);
assert.match(styles, /\.client-device-traffic-grid line \{[\s\S]*vector-effect: non-scaling-stroke/); assert.match(styles, /\.client-device-traffic-grid line \{[\s\S]*vector-effect: non-scaling-stroke/);
assert.match(styles, /\.client-device-traffic-lines polyline,[\s\S]*stroke-width: 1\.8/); assert.match(styles, /\.client-device-traffic-lines polyline,[\s\S]*stroke-width: 1\.8/);
assert.match(styles, /\.client-device-traffic-axis > \.is-max \{[\s\S]*top: var\(--traffic-chart-top\)/); assert.match(styles, /\.client-device-traffic-axis > \.is-max \{[\s\S]*top: var\(--traffic-chart-top\)/);