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

Clarify multi-column workspace layout

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 14:05:56 +02:00
parent 1963773299
commit 67c0a37e2a
3 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+2 -2
View File
@@ -86,11 +86,11 @@
</div> </div>
</aside> </aside>
<section class="product-panel"> <section class="product-panel secondary-panel" aria-label="Product details">
<div class="field-grid" id="fieldGrid"></div> <div class="field-grid" id="fieldGrid"></div>
</section> </section>
<section class="data-panel"> <section class="data-panel main-workspace" aria-label="Catalog workspace">
<div class="table-wrap"> <div class="table-wrap">
<table class="variant-table"> <table class="variant-table">
<thead> <thead>
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+5 -4
View File
@@ -41,7 +41,7 @@
} }
@layer components { @layer components {
.catalog-screen { @apply relative grid min-h-screen grid-cols-[292px_minmax(0,1fr)] bg-catalog-surface pl-72; } .catalog-screen { @apply relative grid min-h-screen grid-cols-[minmax(240px,292px)_minmax(0,1fr)] bg-catalog-surface pl-72; }
.sidebar-drawer { @apply fixed inset-y-0 left-0 z-40 flex w-72 min-h-screen flex-col gap-1.5 overflow-y-auto bg-slate-900 p-1.5 text-[11px] text-slate-200 shadow-xl transition-transform duration-200 ease-out; } .sidebar-drawer { @apply fixed inset-y-0 left-0 z-40 flex w-72 min-h-screen flex-col gap-1.5 overflow-y-auto bg-slate-900 p-1.5 text-[11px] text-slate-200 shadow-xl transition-transform duration-200 ease-out; }
.sidebar-drawer-header { @apply flex items-center justify-between border-b border-slate-700 pb-1; } .sidebar-drawer-header { @apply flex items-center justify-between border-b border-slate-700 pb-1; }
.sidebar-drawer-title { @apply px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400; } .sidebar-drawer-title { @apply px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400; }
@@ -96,12 +96,13 @@
.mapping-source-status.is-ok { @apply bg-emerald-100 text-emerald-700; } .mapping-source-status.is-ok { @apply bg-emerald-100 text-emerald-700; }
.mapping-source-status.is-bad { @apply bg-red-100 text-red-700; } .mapping-source-status.is-bad { @apply bg-red-100 text-red-700; }
.mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; } .mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; }
.product-panel { @apply min-w-0 bg-slate-300 pt-[22px]; } .secondary-panel { @apply min-w-0 border-r border-slate-400 bg-slate-300 pt-[22px]; }
.field-grid { @apply grid grid-cols-[132px_minmax(0,168px)] content-start; } .field-grid { @apply grid grid-cols-[132px_minmax(0,168px)] content-start; }
.field-label, .field-value { @apply min-h-[22px] border-b border-slate-300 px-1 py-0.5 text-[11px] leading-tight; } .field-label, .field-value { @apply min-h-[22px] border-b border-slate-300 px-1 py-0.5 text-[11px] leading-tight; }
.field-label { @apply bg-slate-200 text-slate-800; } .field-label { @apply bg-slate-200 text-slate-800; }
.field-value { @apply bg-teal-50 text-right text-slate-900; } .field-value { @apply bg-teal-50 text-right text-slate-900; }
.field-value[data-field="manufacturer_name"] { @apply font-medium; } .field-value[data-field="manufacturer_name"] { @apply font-medium; }
.main-workspace { @apply min-w-0 overflow-hidden bg-catalog-surface; }
.data-panel { @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; } .table-wrap { @apply h-full overflow-auto; }
.variant-table { @apply w-full border-collapse text-[11px]; } .variant-table { @apply w-full border-collapse text-[11px]; }
@@ -160,7 +161,7 @@
.sidebar-drawer:not([aria-hidden="true"]) { @apply max-h-screen; } .sidebar-drawer:not([aria-hidden="true"]) { @apply max-h-screen; }
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; } .sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
.sidebar-open-button { @apply left-2 top-2; } .sidebar-open-button { @apply left-2 top-2; }
.product-panel { @apply pt-0; } .secondary-panel { @apply border-r-0 pt-0; }
.table-wrap { @apply max-h-[70vh]; } .table-wrap { @apply max-h-[70vh]; }
} }
@@ -170,7 +171,7 @@
html.dark body { @apply bg-slate-950 text-slate-100; } html.dark body { @apply bg-slate-950 text-slate-100; }
html.dark .control-panel { @apply bg-slate-950; } html.dark .control-panel { @apply bg-slate-950; }
html.dark .product-panel { @apply bg-slate-800; } html.dark .secondary-panel { @apply border-slate-700 bg-slate-800; }
html.dark .data-panel { @apply bg-slate-950; } 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-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 .field-value { @apply border-slate-700 bg-slate-900 text-slate-100; }