fix: harden real backend admin workflows and ui
This commit is contained in:
hectorzhao
+217
-39
@@ -378,7 +378,8 @@ h3 {
|
||||
|
||||
.app-shell--collapsed .brand-copy,
|
||||
.app-shell--collapsed .side-nav-section p,
|
||||
.app-shell--collapsed .side-nav-group-toggle,
|
||||
.app-shell--collapsed .side-nav-group-label,
|
||||
.app-shell--collapsed .side-nav-group-chevron,
|
||||
.app-shell--collapsed .side-nav a span,
|
||||
.app-shell--collapsed .sidebar-footer {
|
||||
display: none;
|
||||
@@ -399,16 +400,47 @@ h3 {
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav {
|
||||
gap: var(--space-2);
|
||||
margin-right: 0;
|
||||
overflow-y: auto;
|
||||
padding-right: 0;
|
||||
scrollbar-width: none;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav-section {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav-group-toggle {
|
||||
border-radius: var(--radius-md);
|
||||
display: inline-flex;
|
||||
height: 38px;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
min-height: 38px;
|
||||
padding: 0;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav-list {
|
||||
gap: 6px;
|
||||
justify-items: center;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav-section:has(.side-nav-group-toggle) .side-nav-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.app-shell--collapsed .side-nav a {
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
@@ -457,39 +489,6 @@ h3 {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.topbar-search {
|
||||
align-items: center;
|
||||
background: var(--color-surface-muted);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text-subtle);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
height: var(--control-height-md);
|
||||
padding: 0 var(--space-3);
|
||||
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
width: min(380px, 38vw);
|
||||
}
|
||||
|
||||
.topbar-search:focus-within {
|
||||
background: var(--color-surface);
|
||||
border-color: var(--color-selected);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.topbar-search input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
outline: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar-search input::placeholder {
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
@@ -747,6 +746,85 @@ h3 {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.ui-table-wrap {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui-table {
|
||||
border-collapse: collapse;
|
||||
min-width: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-table th,
|
||||
.ui-table td {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-modal {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
inset: 0;
|
||||
justify-items: center;
|
||||
padding: var(--space-6);
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ui-modal__mask {
|
||||
background: rgba(15, 23, 42, 0.48);
|
||||
border: 0;
|
||||
cursor: default;
|
||||
inset: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ui-modal__panel {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 24px 70px rgba(18, 18, 26, 0.18);
|
||||
display: grid;
|
||||
max-height: calc(100vh - 48px);
|
||||
max-width: min(920px, calc(100vw - 48px));
|
||||
min-width: min(520px, calc(100vw - 48px));
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: min(640px, calc(100vw - 48px));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ui-modal__panel--xl {
|
||||
max-width: min(980px, calc(100vw - 48px));
|
||||
width: min(860px, calc(100vw - 48px));
|
||||
}
|
||||
|
||||
.ui-modal__header,
|
||||
.ui-modal__footer {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
}
|
||||
|
||||
.ui-modal__title {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ui-modal__body {
|
||||
max-height: calc(100vh - 220px);
|
||||
overflow: auto;
|
||||
padding: 0 var(--space-6) var(--space-6);
|
||||
}
|
||||
|
||||
.ui-modal__footer {
|
||||
border-top: 1px solid var(--color-border);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.page-actions,
|
||||
.table-actions {
|
||||
align-items: center;
|
||||
@@ -754,6 +832,35 @@ h3 {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.table-mono-id,
|
||||
.table-strong-text,
|
||||
.table-long-text {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-mono-id {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-strong-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-long-text {
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.table-long-text--sms-template {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
@@ -4704,7 +4811,8 @@ h3 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.enterprise-upload-panel button {
|
||||
.enterprise-upload-panel button,
|
||||
.enterprise-upload-button {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
@@ -4714,6 +4822,7 @@ h3 {
|
||||
gap: var(--space-2);
|
||||
height: 142px;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.enterprise-upload-panel p {
|
||||
@@ -5160,6 +5269,79 @@ h3 {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.app-create-modal {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.app-create-modal__hint {
|
||||
background: var(--color-selected-soft);
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.app-create-modal__hint strong {
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.app-create-modal__hint span {
|
||||
color: var(--color-text-muted);
|
||||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.admin-app-route-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-app-route-card {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.admin-app-route-card.is-selected {
|
||||
background: var(--color-selected-soft);
|
||||
border-color: #bfdbfe;
|
||||
}
|
||||
|
||||
.admin-app-route-card header {
|
||||
align-items: flex-start;
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.admin-app-route-card header > span:first-child {
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.admin-app-route-card header strong,
|
||||
.admin-app-route-card header small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.admin-app-route-card header small,
|
||||
.admin-app-route-card p {
|
||||
color: var(--color-text-muted);
|
||||
line-height: var(--line-height-base);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-switch {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
@@ -8252,10 +8434,6 @@ h3 {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.topbar-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topbar-left,
|
||||
.topbar-actions {
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user