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

Refresh sidebar layout with Tailwind

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 13:19:40 +02:00
parent a88ca99697
commit 41a562cd6f
3 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+6 -5
View File
@@ -10,10 +10,6 @@
<body> <body>
<main class="catalog-screen"> <main class="catalog-screen">
<aside class="control-panel"> <aside class="control-panel">
<div class="app-status">
<span class="safe-mode" id="databaseStatus">DB read-only</span>
</div>
<div class="record-id" id="recordId">&nbsp;</div> <div class="record-id" id="recordId">&nbsp;</div>
<div class="arrow-row"> <div class="arrow-row">
@@ -21,7 +17,7 @@
<button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button> <button class="arrow-button arrow-button-next" id="nextProductButton" type="button" title="Next product" aria-label="Next product"></button>
</div> </div>
<div class="parser-actions" aria-label="Parser actions"> <div class="sidebar-section parser-actions" aria-label="Parser actions">
<button class="action-button" id="findSourcesButton" type="button">Find sources</button> <button class="action-button" id="findSourcesButton" type="button">Find sources</button>
<button class="action-button" id="getPicturesButton" type="button">Get pictures</button> <button class="action-button" id="getPicturesButton" type="button">Get pictures</button>
<button class="action-button" type="button">Get features</button> <button class="action-button" type="button">Get features</button>
@@ -60,8 +56,13 @@
<button class="action-button primary" type="button">Show menu (20)</button> <button class="action-button primary" type="button">Show menu (20)</button>
<button class="action-button" type="button">Scraper - 03</button> <button class="action-button" type="button">Scraper - 03</button>
<button class="action-button" type="button">BG remover - 04</button> <button class="action-button" type="button">BG remover - 04</button>
<div class="sidebar-footer">
<div class="app-status">
<span class="safe-mode" id="databaseStatus">DB read-only</span>
</div>
<button class="action-button" id="themeToggle" type="button" aria-pressed="false">Dark theme</button> <button class="action-button" id="themeToggle" type="button" aria-pressed="false">Dark theme</button>
<button class="action-button" id="settingsButton" type="button">Settings</button> <button class="action-button" id="settingsButton" type="button">Settings</button>
</div>
</aside> </aside>
<section class="product-panel"> <section class="product-panel">
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+9 -7
View File
@@ -42,25 +42,27 @@
@layer components { @layer components {
.catalog-screen { @apply grid min-h-screen grid-cols-[172px_292px_minmax(720px,1fr)] bg-catalog-surface; } .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-catalog-panel p-1.5 text-[11px]; } .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; }
.app-status { @apply order-[98] mt-auto rounded border border-slate-600 bg-catalog-panel-soft p-1 text-[10px] leading-tight text-slate-100; } .sidebar-section { @apply border-t border-slate-700 pt-1; }
.sidebar-footer { @apply mt-auto grid gap-1 border-t border-slate-700 pt-2; }
.app-status { @apply rounded border border-slate-700 bg-slate-950 p-1 text-[10px] leading-tight text-slate-100; }
.safe-mode, #modePill { @apply inline-block rounded bg-slate-100 px-1 py-0.5 text-[10px] font-semibold text-slate-800; } .safe-mode, #modePill { @apply inline-block rounded bg-slate-100 px-1 py-0.5 text-[10px] font-semibold text-slate-800; }
#databaseStatus.database-error { @apply bg-red-100 text-red-700; } #databaseStatus.database-error { @apply bg-red-100 text-red-700; }
.record-id { @apply flex h-10 items-center justify-center rounded border border-lime-700 bg-catalog-accent text-[26px] font-bold leading-none text-catalog-accent-text; } .record-id { @apply flex h-10 items-center justify-center rounded border border-lime-700 bg-catalog-accent text-[26px] font-bold leading-none text-catalog-accent-text; }
.arrow-row { @apply grid grid-cols-2 gap-1; } .arrow-row { @apply grid grid-cols-2 gap-1; }
.arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-300 bg-slate-50 text-center text-slate-900 shadow-sm transition; } .arrow-button, .action-button, .input-like { @apply w-full rounded border border-slate-700 bg-slate-800 text-center text-slate-200 shadow-sm transition; }
.arrow-button, .action-button { @apply min-h-7 px-1 text-[11px]; } .arrow-button, .action-button { @apply min-h-7 px-1 text-[11px]; }
.arrow-button { @apply relative text-transparent; } .arrow-button { @apply relative text-transparent; }
.arrow-button::before { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xl leading-none text-slate-900; content: ""; } .arrow-button::before { @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xl leading-none text-slate-100; content: ""; }
.arrow-button-prev::before { content: "‹"; } .arrow-button-prev::before { content: "‹"; }
.arrow-button-next::before { content: "›"; } .arrow-button-next::before { content: "›"; }
.parser-actions { @apply grid gap-1; } .parser-actions { @apply grid gap-1; }
.parser-actions .action-button { @apply min-h-7; } .parser-actions .action-button { @apply min-h-7; }
.action-button.primary { @apply min-h-8 font-semibold; } .action-button.primary { @apply min-h-8 font-semibold; }
.arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-white; } .arrow-button:hover:not(:disabled), .action-button:hover:not(:disabled) { @apply border-slate-500 bg-slate-700 text-white; }
.arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; } .arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
.input-like { @apply h-7 px-1 text-[11px]; } .input-like { @apply h-7 px-1 text-[11px]; }
#scanInput { @apply bg-slate-200 placeholder:text-slate-500; } #scanInput { @apply bg-slate-700 placeholder:text-slate-400; }
.input-like:focus { @apply border-catalog-focus outline-none ring-2 ring-catalog-focus/25; } .input-like:focus { @apply border-catalog-focus outline-none ring-2 ring-catalog-focus/25; }
.picture-slot { @apply aspect-square w-full overflow-hidden rounded border border-dashed border-slate-500 bg-catalog-panel-soft p-1 text-center text-[11px] text-slate-200; } .picture-slot { @apply aspect-square w-full overflow-hidden rounded border border-dashed border-slate-500 bg-catalog-panel-soft p-1 text-center text-[11px] text-slate-200; }
.picture-slot img { @apply h-full w-full object-contain; } .picture-slot img { @apply h-full w-full object-contain; }
@@ -142,7 +144,7 @@
.catalog-screen { @apply block; } .catalog-screen { @apply block; }
.control-panel { @apply min-h-0 grid grid-cols-2; } .control-panel { @apply min-h-0 grid grid-cols-2; }
.control-panel > * { @apply min-w-0; } .control-panel > * { @apply min-w-0; }
.app-status, #settingsButton { @apply col-span-2; } .sidebar-footer { @apply col-span-2; }
.product-panel { @apply pt-0; } .product-panel { @apply pt-0; }
.table-wrap { @apply max-h-[70vh]; } .table-wrap { @apply max-h-[70vh]; }
} }