rajch_ales/product-import-ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace variant table with responsive grid

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 14:39:46 +02:00
parent f0bd62d93e
commit 902f1927a2
5 changed files with 86 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tailwind.css
+26 -12
View File
@@ -105,14 +105,17 @@
.main-workspace { @apply min-w-0 overflow-hidden bg-catalog-surface; }
.data-panel { @apply min-w-0 overflow-hidden bg-catalog-surface; }
.table-wrap { @apply h-full overflow-auto; }
.variant-table { @apply w-full border-collapse text-[11px]; }
.variant-table th, .variant-table td { @apply h-[22px] whitespace-nowrap border-b border-r border-slate-300 px-1 py-0.5 text-center; }
.variant-table th { @apply sticky top-0 z-10 bg-slate-200 font-medium text-slate-800; }
.variant-table td { @apply bg-slate-50 text-slate-800; }
.variant-table tr:nth-child(even) td { @apply bg-slate-100; }
.variant-table tr:hover td { @apply bg-slate-200; }
.empty-row { @apply py-4 text-slate-500; }
.variant-table .problem-ean { @apply bg-red-600 font-semibold text-white; }
.variant-grid { @apply min-w-0 text-[11px]; min-width: var(--variant-min-width, 820px); }
.variant-header, .variant-row { @apply grid; grid-template-columns: var(--variant-columns); }
.variant-header { @apply sticky top-0 z-10; }
.variant-header-cell { @apply h-[22px] whitespace-nowrap border-b border-r border-slate-300 bg-slate-200 px-1 py-0.5 font-medium text-slate-800; }
.variant-row { @apply min-h-[22px] border-b border-slate-300; }
.variant-row:nth-child(even) { @apply bg-slate-100; }
.variant-row:hover { @apply bg-slate-200; }
.variant-cell { @apply min-w-0 whitespace-nowrap border-r border-slate-300 px-1 py-0.5 text-center text-slate-800; }
.variant-cell[data-label=""] { @apply p-0; }
.empty-row { @apply py-4 text-center text-slate-500; }
.variant-cell.problem-ean { @apply bg-red-600 font-semibold text-white; }
.modal-backdrop { @apply fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4; }
.modal-backdrop[hidden] { display: none; }
.suggested-dialog, .source-dialog, .settings-dialog { @apply max-h-[90vh] w-full overflow-hidden rounded-lg border border-slate-300 bg-slate-50 shadow-2xl; }
@@ -165,6 +168,16 @@
.secondary-panel { @apply order-1; }
.main-workspace { @apply order-2; }
.table-wrap { @apply max-h-[70vh]; }
.variant-grid { @apply min-w-0; }
.variant-header { @apply hidden; }
.variant-row { @apply grid grid-cols-2 gap-x-2 border-b border-slate-300 p-2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-cell { @apply flex min-h-7 items-center justify-between gap-2 border-b border-slate-200 px-1 py-1 text-right; white-space: normal; }
.variant-cell::before { content: attr(data-label); @apply shrink-0 text-left text-[10px] font-medium text-slate-500; }
.variant-cell[data-label=""]::before { content: none; }
.variant-cell[data-label=""] { @apply col-span-2; }
.variant-message-row { @apply block; }
html.dark .variant-row { @apply border-slate-700; }
html.dark .variant-cell { @apply border-slate-700; }
}
@media (min-width: 981px) {
@@ -177,10 +190,11 @@
html.dark .data-panel { @apply bg-slate-950; }
html.dark .field-label { @apply border-slate-700 bg-slate-800 text-slate-200; }
html.dark .field-value { @apply border-slate-700 bg-slate-900 text-slate-100; }
html.dark .variant-table th { @apply border-slate-700 bg-slate-800 text-slate-100; }
html.dark .variant-table td { @apply border-slate-700 bg-slate-900 text-slate-200; }
html.dark .variant-table tr:nth-child(even) td { @apply bg-slate-800; }
html.dark .variant-table tr:hover td { @apply bg-slate-700; }
html.dark .variant-header-cell { @apply border-slate-700 bg-slate-800 text-slate-100; }
html.dark .variant-row { @apply border-slate-700; }
html.dark .variant-row:nth-child(even) { @apply bg-slate-800; }
html.dark .variant-row:hover { @apply bg-slate-700; }
html.dark .variant-cell { @apply border-slate-700 text-slate-200; }
html.dark .arrow-button,
html.dark .action-button,
html.dark .input-like { @apply border-slate-600 bg-slate-800 text-slate-100; }