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

Move controls into responsive sidebar drawer

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 13:59:12 +02:00
parent 639d9bec75
commit 1963773299
8 changed files with 113 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tailwind.css
+20 -7
View File
@@ -41,8 +41,16 @@
}
@layer components {
.catalog-screen { @apply grid min-h-screen grid-cols-[172px_292px_minmax(720px,1fr)] bg-catalog-surface; }
.control-panel { @apply flex min-h-screen flex-col gap-1.5 overflow-y-auto bg-slate-900 p-1.5 text-[11px] text-slate-200; }
.catalog-screen { @apply relative grid min-h-screen grid-cols-[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-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-close-button, .sidebar-open-button { @apply inline-flex h-7 w-7 items-center justify-center rounded border border-slate-700 bg-slate-800 text-slate-200 shadow-sm transition hover:border-slate-500 hover:bg-slate-700; }
.sidebar-close-button .sidebar-icon, .sidebar-open-button .sidebar-icon { @apply h-4 w-4; }
.sidebar-open-button { @apply fixed left-2 top-2 z-30; }
.sidebar-overlay { @apply fixed inset-0 z-30 bg-slate-950/50; }
.sidebar-overlay[hidden] { display: none; }
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
.sidebar-section { @apply border-t border-slate-700 pt-1; }
.drawer-trigger { @apply flex min-h-8 w-full items-center gap-2 rounded border border-slate-700 bg-slate-800 px-2 text-left text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
.drawer-trigger .drawer-chevron { @apply ml-auto text-sm text-slate-400; }
@@ -88,7 +96,7 @@
.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-muted { @apply bg-slate-200 text-slate-600; }
.product-panel { @apply bg-slate-300 pt-[22px]; }
.product-panel { @apply min-w-0 bg-slate-300 pt-[22px]; }
.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 { @apply bg-slate-200 text-slate-800; }
@@ -147,14 +155,19 @@
.picture-candidate img { @apply h-16 w-[72px] object-contain; }
.picture-candidate span { @apply min-w-0 truncate; }
@media (max-width: 980px) {
.catalog-screen { @apply block; }
.control-panel { @apply min-h-0 grid grid-cols-2; }
.control-panel > * { @apply min-w-0; }
.sidebar-footer { @apply col-span-2; }
.catalog-screen { @apply block pl-0; }
.sidebar-drawer { @apply w-[min(18rem,calc(100vw-1rem))] min-h-0; }
.sidebar-drawer:not([aria-hidden="true"]) { @apply max-h-screen; }
.sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
.sidebar-open-button { @apply left-2 top-2; }
.product-panel { @apply pt-0; }
.table-wrap { @apply max-h-[70vh]; }
}
@media (min-width: 981px) {
.sidebar-overlay { display: none; }
}
html.dark body { @apply bg-slate-950 text-slate-100; }
html.dark .control-panel { @apply bg-slate-950; }
html.dark .product-panel { @apply bg-slate-800; }