GovOPlaN/govoplan-core
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Add shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:55 +02:00
parent dd7ad4d9c7
commit 6814a41ae4
22 changed files with 574 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/styles/components.css
+2 -25
View File
@@ -1050,24 +1050,10 @@
height: 17px;
}
.admin-form-grid {
display: grid;
gap: 14px;
}
.admin-form-grid > .wide {
grid-column: 1 / -1;
}
.admin-form-grid.two-columns,
.admin-assignment-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-form-grid.three-columns {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admin-assignment-grid {
display: grid;
gap: 18px;
@@ -1111,15 +1097,13 @@
}
@media (max-width: 900px) {
.admin-form-grid.two-columns,
.admin-form-grid.three-columns,
.admin-assignment-grid,
.admin-permission-groups {
grid-template-columns: 1fr;
}
}
.guided-config-dialog.admin-dialog-wide {
.guided-config-dialog {
width: min(1120px, calc(100vw - 40px));
height: min(760px, calc(100vh - 40px));
}
@@ -1195,7 +1179,7 @@
min-width: 0;
}
.adaptive-config-dialog.admin-dialog-wide {
.adaptive-config-dialog {
width: min(1040px, calc(100vw - 40px));
}
@@ -3401,9 +3385,6 @@
font-size: 14px;
letter-spacing: .01em;
}
.form-grid.compact.mail-server-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mail-server-form-grid {
align-items: start;
}
@@ -3464,7 +3445,6 @@
}
@media (max-width: 720px) {
.credential-panel-grid { grid-template-columns: 1fr; }
.form-grid.compact.mail-server-form-grid { grid-template-columns: 1fr; }
.mail-server-section-heading.split { align-items: flex-start; flex-direction: column; }
.mail-server-segmented-control { width: 100%; }
}
@@ -3562,9 +3542,6 @@
.compact-detail-list {
gap: 8px;
}
.settings-dashboard-grid {
align-items: start;
}
.settings-list {
display: grid;
gap: 12px;
webui/src/styles/dialogs.css
+39 -21
View File
@@ -86,6 +86,15 @@
box-shadow: var(--shadow-strong);
}
.dialog-panel-size-small { width: min(460px, calc(100vw - 40px)); }
.dialog-panel-size-default { width: min(560px, calc(100vw - 40px)); }
.dialog-panel-size-large { width: min(680px, calc(100vw - 40px)); }
.dialog-panel-size-wide { width: min(1040px, calc(100vw - 40px)); }
.dialog-panel-size-full { width: min(1440px, calc(100vw - 40px)); height: min(920px, calc(100vh - 40px)); }
.dialog-panel-administration > .dialog-header,
.dialog-panel-administration > .dialog-footer { background: var(--panel); }
.dialog-panel-administration > .dialog-footer { box-shadow: var(--shadow-footer); }
.dialog-header {
flex: 0 0 auto;
min-height: 58px;
@@ -135,10 +144,17 @@
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 20px;
color: var(--text);
}
.dialog-body-padding-none { padding: 0; }
.dialog-body-padding-compact { padding: 12px; }
.dialog-body-padding-default { padding: 20px; }
.dialog-description { margin-bottom: 16px; color: var(--muted); line-height: 1.5; }
.dialog-description > :first-child { margin-top: 0; }
.dialog-description > :last-child { margin-bottom: 0; }
.dialog-notices { display: grid; gap: 10px; margin-bottom: 16px; }
.dialog-footer {
flex: 0 0 auto;
display: flex;
@@ -149,6 +165,18 @@
background: var(--panel);
}
.dialog-actions { width: 100%; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.dialog-actions-start { justify-content: flex-start; }
.dialog-actions-between { justify-content: space-between; }
.dialog-actions-end { justify-content: flex-end; }
.dialog-form-layout { min-width: 0; display: grid; }
.dialog-form-spacing-compact { gap: 10px; }
.dialog-form-spacing-default { gap: 16px; }
.dialog-form-spacing-loose { gap: 24px; }
.dialog-section-layout { min-width: 0; display: grid; gap: 12px; }
.dialog-section-separated { padding-top: 16px; border-top: var(--border-line); }
.dialog-section-inset { padding: 14px; border: var(--border-line); border-radius: var(--radius); background: var(--panel-soft); }
.confirm-dialog {
width: min(460px, calc(100vw - 40px));
}
@@ -164,24 +192,14 @@
line-height: 1.5;
}
.admin-dialog {
width: min(680px, calc(100vw - 40px));
}
.admin-dialog-wide {
width: min(1040px, calc(100vw - 40px));
}
.admin-dialog > .dialog-header {
padding: 16px 18px;
border-bottom: var(--border-line);
background: var(--panel);
}
.admin-dialog > .dialog-footer {
flex: 0 0 auto;
padding: 12px 18px;
border-top: var(--border-line);
background: var(--panel);
box-shadow: var(--shadow-footer);
@media (max-width: 600px) {
.dialog-backdrop { padding: 10px; }
.dialog-panel-size-small,
.dialog-panel-size-default,
.dialog-panel-size-large,
.dialog-panel-size-wide,
.dialog-panel-size-full { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
.dialog-header { padding-inline: 14px; }
.dialog-body-padding-default { padding: 16px 14px; }
.dialog-footer { padding-inline: 14px; }
}
webui/src/styles/forms.css
+42 -11
View File
@@ -1,10 +1,29 @@
.form-grid { display: grid; gap: 18px; }
.form-grid.compact,
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid > .wide { grid-column: 1 / -1; }
.responsive-form-grid { align-items: start; }
.content-grid-layout { min-width: 0; display: grid; }
.content-grid-columns-1 { grid-template-columns: minmax(0, 1fr); }
.content-grid-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-grid-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-grid-gap-compact { gap: 10px; }
.content-grid-gap-small { gap: 14px; }
.content-grid-gap-default { gap: 18px; }
.content-grid-gap-loose { gap: 26px; }
.content-grid-align-start { align-items: start; }
.content-grid-align-stretch { align-items: stretch; }
.content-grid-item { min-width: 0; }
.content-grid-item-two { grid-column: span 2; }
.content-grid-item-full { grid-column: 1 / -1; }
.form-grid-layout > .wide { grid-column: 1 / -1; }
.form-section-layout { min-width: 0; display: grid; gap: 14px; }
.form-section-separated { padding-top: 18px; border-top: var(--border-line); }
.form-section-panel { padding: 18px; border: var(--border-line); border-radius: var(--radius); background: var(--panel); }
.form-section-header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.form-section-heading-copy { min-width: 0; display: grid; gap: 5px; }
.form-section-heading-copy h3 { margin: 0; color: var(--text-strong); font-size: 1rem; }
.form-section-description { color: var(--muted); line-height: 1.45; }
.form-section-description > :first-child { margin-top: 0; }
.form-section-description > :last-child { margin-bottom: 0; }
.form-section-actions { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.form-section-content { min-width: 0; display: grid; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-label { font-weight: 700; font-size: 13px; color: var(--text-label); }
.form-help { font-size: 12px; color: var(--muted); }
@@ -25,13 +44,25 @@ input[type="radio"]:focus-visible {
textarea { resize: vertical; }
@media (max-width: 1100px) {
.form-grid.compact.responsive-form-grid { grid-template-columns: 1fr; }
.content-grid-collapse-wide { grid-template-columns: minmax(0, 1fr); }
.content-grid-collapse-wide > .content-grid-item-two { grid-column: auto; }
}
@media (max-width: 980px) {
.form-grid.two,
.form-grid.three,
.form-grid.four { grid-template-columns: 1fr; }
.content-grid-collapse-standard { grid-template-columns: minmax(0, 1fr); }
.content-grid-collapse-standard > .content-grid-item-two { grid-column: auto; }
}
@media (max-width: 900px) {
.content-grid-collapse-workspace { grid-template-columns: minmax(0, 1fr); }
.content-grid-collapse-workspace > .content-grid-item-two { grid-column: auto; }
}
@media (max-width: 700px) {
.content-grid-collapse-narrow { grid-template-columns: minmax(0, 1fr); }
.content-grid-collapse-narrow > .content-grid-item-two { grid-column: auto; }
.form-section-header { flex-direction: column; }
.form-section-actions { width: 100%; }
}
.form-field:has(input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly]) .form-label { color: var(--control-disabled-label); }
input:disabled:not([type="checkbox"]):not([type="radio"]),
webui/src/styles/layout.css
+17 -2
View File
@@ -80,6 +80,16 @@
.crumb { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb-actions { margin-left: auto; display: flex; gap: 10px; }
.ghost-button { border: 0; background: transparent; color: var(--muted); font-weight: 700; }
.action-toolbar { min-width: 0; display: flex; align-items: center; gap: 10px; }
.action-toolbar-density-compact { gap: 7px; }
.action-toolbar-surface-subtle { padding: 10px 12px; border: var(--border-line); border-radius: var(--radius); background: var(--panel-soft); }
.action-toolbar-wrap-always { flex-wrap: wrap; }
.action-toolbar-wrap-never { flex-wrap: nowrap; overflow-x: auto; }
.action-toolbar-group { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.action-toolbar-group-center { justify-content: center; }
.action-toolbar-group-end { justify-content: flex-end; margin-inline-start: auto; }
.action-toolbar-group-grow { flex: 1 1 auto; }
.action-toolbar-spacer { flex: 1 1 auto; min-width: 8px; }
.app-content { min-height: 0; overflow: hidden; }
.workspace { height: 100%; min-height: 0; display: grid; grid-template-columns: 198px minmax(0, 1fr); }
.workspace-layout-primary,
@@ -214,7 +224,6 @@
.metric-label { color: var(--muted); font-size: 12px; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }
.metric-value { margin-top: 7px; font-size: 30px; color: var(--text-strong); font-weight: 700; }
.metric-detail { margin-top: 4px; color: var(--muted); font-size: 13px; }
.dashboard-grid, .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.wizard-page { min-height: calc(100vh - 112px); display: grid; place-items: start center; padding: 42px; }
.wizard-card { width: min(980px, 100%); background: var(--panel); border: var(--border-line); box-shadow: var(--shadow); border-radius: var(--radius); display: grid; grid-template-columns: 290px 1fr; overflow: hidden; }
.wizard-body { background: var(--panel-soft); padding: 28px; min-height: 620px; }
@@ -271,10 +280,16 @@
.workspace-layout-split { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 34%) minmax(0, 1fr); }
.section-sidebar { display: none; }
.wizard-card { grid-template-columns: 1fr; }
.metric-grid, .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
.metric-grid { grid-template-columns: 1fr; }
.concurrency-conflict-values { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.action-toolbar-wrap-responsive { align-items: stretch; flex-wrap: wrap; }
.action-toolbar-wrap-responsive > .action-toolbar-group { flex: 1 1 100%; }
.action-toolbar-wrap-responsive > .action-toolbar-group-end { margin-inline-start: 0; justify-content: flex-start; }
}
/* Layout additions: login and help dropdown */
.tenant-selector.disabled { opacity: .86; cursor: default; }