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

Refine client panel layout and bump Harbor versions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 13s
Details
Build and Deploy Gateway / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-12 13:01:45 +03:00
parent 2d1d89911e
commit 2a71466670
4 changed files with 154 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/web/styles.css
View File

@@ -1630,14 +1630,20 @@ p {
.client-panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 280px) minmax(0, 1fr);
place-items: center;
width: 100%;
min-height: 520px;
padding: 24px 0;
}
.client-panel.is-setup {
grid-template-columns: minmax(0, 1fr);
}
.client-panel.is-setup .client-form {
left: 50%;
transform: translateX(-50%);
grid-column: 1;
justify-self: center;
}
.client-power-section p {
@@ -1647,6 +1653,7 @@ p {
.client-power-section {
position: relative;
grid-column: 2;
display: grid;
justify-items: center;
gap: 18px;
@@ -1922,7 +1929,7 @@ p {
}
.client-duration-toggle {
width: 290px;
width: min(290px, 100%);
min-height: 24px;
display: grid;
place-items: center;
@@ -1999,14 +2006,20 @@ p {
}
.client-form {
position: absolute;
left: calc(50% + 130px);
position: static;
grid-column: 3;
align-self: center;
justify-self: start;
min-width: 0;
width: min(360px, calc(50% - 154px));
width: min(360px, 100%);
max-height: min(640px, calc(100vh - 120px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(125, 249, 255, 0.34) transparent;
display: grid;
gap: 36px;
transform: translateX(0);
transition: left 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1), width 850ms cubic-bezier(0.16, 1, 0.3, 1), opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1);
transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-form-content {
@@ -2926,6 +2939,52 @@ p {
}
}
@media (max-width: 920px) {
.client-mode .app-main {
place-items: start center;
}
.client-shell {
width: 100%;
}
.client-panel,
.client-panel.is-setup {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
min-height: 0;
padding: 110px 6px 72px;
}
.client-power-section,
.client-form,
.client-panel.is-setup .client-form {
grid-column: 1;
justify-self: center;
width: min(100%, 380px);
}
.client-form {
max-height: none;
overflow-y: visible;
overscroll-behavior: auto;
}
.harbor-brand,
.client-shell.is-first-run .harbor-brand {
position: absolute;
top: 28px;
transform: translateX(-50%) scale(1.55);
}
.client-inline-error.is-connection,
.client-inline-error.is-subscription {
position: static;
width: min(100%, 360px);
transform: none;
}
}
@media (max-width: 560px) {
.client-local-rule {
grid-template-columns: 24px 104px minmax(0, 1fr) 28px;
@@ -2955,7 +3014,7 @@ p {
grid-template-columns: 1fr;
gap: 26px;
min-height: 0;
padding: 20px 6px;
padding: 96px 6px 72px;
}
.client-power-section {
@@ -2972,7 +3031,7 @@ p {
}
.harbor-brand {
transform: translate(-50%, calc(-50% - 28vh)) scale(2.15);
transform: translateX(-50%) scale(1.35);
}
.client-instructions-toggle {