Align client panel desktop spacing and bump Harbor versions
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
export const HARBOR_VERSIONS = Object.freeze({
|
export const HARBOR_VERSIONS = Object.freeze({
|
||||||
macClient: '0.7.17',
|
macClient: '0.7.18',
|
||||||
gatewayClient: '0.7.17',
|
gatewayClient: '0.7.18',
|
||||||
gatewayBackend: '0.7.1',
|
gatewayBackend: '0.7.1',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1681,7 +1681,7 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.client-panel.has-subscription .client-form {
|
.client-panel.has-subscription .client-form {
|
||||||
height: min(640px, calc(100vh - 120px));
|
height: var(--client-work-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.client-power-section p {
|
.client-power-section p {
|
||||||
@@ -2076,8 +2076,21 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 921px) {
|
@media (min-width: 921px) {
|
||||||
|
.client-panel.has-subscription {
|
||||||
|
--client-work-height: min(640px, calc(100vh - 120px));
|
||||||
|
--client-power-top: calc((var(--client-work-height) - 96px) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-panel.has-subscription .client-power-section {
|
||||||
|
align-self: center;
|
||||||
|
align-content: start;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: var(--client-work-height);
|
||||||
|
padding-top: var(--client-power-top);
|
||||||
|
}
|
||||||
|
|
||||||
.client-panel.has-subscription .client-form-content {
|
.client-panel.has-subscription .client-form-content {
|
||||||
padding-top: 36px;
|
padding-top: var(--client-power-top);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -21,9 +21,11 @@ test('desktop layout keeps the power control on a symmetric center axis', () =>
|
|||||||
assert.match(form, /grid-column:\s*3/);
|
assert.match(form, /grid-column:\s*3/);
|
||||||
assert.match(form, /position:\s*static/);
|
assert.match(form, /position:\s*static/);
|
||||||
assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/);
|
assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/);
|
||||||
assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*min\(640px, calc\(100vh - 120px\)\)/);
|
assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*var\(--client-work-height\)/);
|
||||||
assert.match(rule('.client-form-content'), /align-content:\s*start/);
|
assert.match(rule('.client-form-content'), /align-content:\s*start/);
|
||||||
assert.match(styles, /@media \(min-width: 921px\)[\s\S]*\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*36px/);
|
assert.match(styles, /--client-power-top:\s*calc\(\(var\(--client-work-height\) - 96px\) \/ 2\)/);
|
||||||
|
assert.match(styles, /\.client-panel\.has-subscription \.client-power-section \{[\s\S]*height:\s*var\(--client-work-height\);[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
||||||
|
assert.match(styles, /\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('tablet and mobile regions use normal flow with viewport-safe widths', () => {
|
test('tablet and mobile regions use normal flow with viewport-safe widths', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user