Move CSV import to inline dialog on list page

This commit is contained in:
Pontoporeia
2026-04-08 15:12:36 +02:00
parent 603af07b68
commit 4199b206db
5 changed files with 424 additions and 393 deletions

View File

@@ -38,7 +38,8 @@
margin-inline: auto;
}
.admin-body main > h1 {
.admin-body main > h1,
.admin-list-header > h1 {
font-size: var(--step-2);
font-weight: 600;
letter-spacing: 0.08em;
@@ -306,22 +307,22 @@
.admin-stats {
display: flex;
gap: var(--space-s);
margin-bottom: var(--space-l);
flex-wrap: wrap;
margin: 0;
}
.admin-stat {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 4px;
padding: var(--space-s) var(--space-m);
min-width: 140px;
padding: var(--space-2xs) var(--space-s);
min-width: 0;
display: flex;
flex-direction: column;
}
.admin-stat__number {
font-size: var(--step-3);
font-size: var(--step-1);
font-weight: 700;
color: var(--accent-primary);
line-height: 1;
@@ -330,7 +331,7 @@
}
.admin-stat__label {
font-size: var(--step--1);
font-size: var(--step--2);
color: var(--text-secondary);
margin-top: var(--space-3xs);
order: 2;
@@ -905,6 +906,123 @@
margin-top: var(--space-2xs);
}
/* ── List page header (title + stats row, then button) ──────────────────── */
.admin-list-header {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-s);
margin-bottom: var(--space-l);
}
.admin-list-header__top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-m);
flex-wrap: wrap;
width: 100%;
}
.admin-list-header h1 {
margin: 0;
}
/* ── Dialog ───────────────────────────────────────────────────────────── */
.admin-dialog {
border: 1px solid var(--border-primary);
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-primary);
padding: 0;
max-width: 680px;
width: 100%;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.admin-dialog::backdrop {
background: rgba(0,0,0,0.45);
}
.admin-dialog__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-m) var(--space-l);
border-bottom: 1px solid var(--border-primary);
}
.admin-dialog__header h2 {
font-size: var(--step-0);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0;
color: var(--text-secondary);
}
.admin-dialog__close {
background: none;
border: none;
cursor: pointer;
font-size: var(--step-0);
color: var(--text-tertiary);
padding: var(--space-3xs);
line-height: 1;
border-radius: 3px;
transition: color 0.15s;
}
.admin-dialog__close:hover {
color: var(--text-primary);
}
.admin-dialog .admin-form,
.admin-dialog .admin-import-results,
.admin-dialog [role="alert"],
.admin-dialog [role="status"],
.admin-dialog__alert {
margin: 0;
padding: var(--space-m) var(--space-l);
}
.admin-dialog .admin-form {
padding-top: var(--space-m);
padding-bottom: 0;
}
.admin-dialog .admin-form-footer {
display: flex;
gap: var(--space-xs);
padding-bottom: var(--space-m);
}
/* ── Import results log ─────────────────────────────────────────────── */
.admin-import-log {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3xs);
max-height: 260px;
overflow-y: auto;
font-size: var(--step--2);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
border: 1px solid var(--border-primary);
border-radius: 3px;
padding: var(--space-xs);
background: var(--bg-secondary);
}
.admin-import-log__item::before {
margin-right: var(--space-3xs);
}
.admin-import-log__item--ok::before { content: '✓'; color: var(--accent-green); }
.admin-import-log__item--skip::before { content: '⚠'; color: var(--warning); }
.admin-import-log__item--error::before { content: '✗'; color: var(--error); }
/* ── Settings page sections ─────────────────────────────────────────────── */
.admin-settings-section {
border: 1px solid var(--border-primary);