feat: add batched recipe import queue
This commit is contained in:
+14
-3
@@ -135,11 +135,22 @@ img { display: block; max-width: 100%; }
|
||||
|
||||
.import-panel { display: grid; grid-template-columns: minmax(180px, 0.7fr) 2fr; gap: 30px 54px; align-items: center; }
|
||||
.import-panel h2, .preview-panel h2, .library h2 { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; }
|
||||
.import-form { display: flex; gap: 10px; padding: 8px; border-radius: 999px; background: var(--white); }
|
||||
.import-form input { flex: 1; min-width: 0; padding: 10px 18px; border: 0; outline: 0; color: var(--ink); background: transparent; }
|
||||
.import-form { display: flex; gap: 10px; align-items: flex-end; padding: 8px; border-radius: 18px; background: var(--white); }
|
||||
.import-form textarea { flex: 1; min-width: 0; min-height: 112px; padding: 12px 14px; resize: vertical; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; line-height: 1.5; }
|
||||
.status { grid-column: 2; padding: 12px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); }
|
||||
.status.success { color: #d8efc9; }
|
||||
.status.error { color: #ffd0c4; }
|
||||
.import-queue { grid-column: 2; padding: 18px; border-radius: 18px; color: var(--ink); background: var(--white); }
|
||||
.import-queue-heading, .import-queue-heading > div, .import-job { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
.import-queue-heading h3 { margin: 0; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
|
||||
.import-job-list { display: grid; gap: 8px; margin-top: 14px; }
|
||||
.import-job { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
|
||||
.import-job-body { display: grid; min-width: 0; gap: 4px; }
|
||||
.import-job-body a { overflow: hidden; color: var(--ink); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.import-job-body small { color: #9a3c2c; }
|
||||
.import-job-status { width: fit-content; padding: 3px 7px; border-radius: 999px; color: var(--green); background: rgba(63, 91, 69, 0.1); font-size: 0.68rem; font-weight: 700; }
|
||||
.import-job-processing .import-job-status { color: #9b4a21; background: rgba(216, 115, 55, 0.13); }
|
||||
.import-job-failed .import-job-status { color: #9a3c2c; background: rgba(154, 60, 44, 0.12); }
|
||||
|
||||
.preview-panel { margin-top: 28px; color: var(--ink); background: var(--white); border: 1px solid var(--line); }
|
||||
.section-heading, .editor-section-heading, .editor-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
|
||||
@@ -282,7 +293,7 @@ img { display: block; max-width: 100%; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.import-panel, .preview-layout, .detail-hero, .detail-columns { grid-template-columns: 1fr; }
|
||||
.status { grid-column: 1; }
|
||||
.status, .import-queue { grid-column: 1; }
|
||||
.recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.detail-intro { min-height: 380px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user