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

Unify panel control styling

Browse Source
This commit is contained in:
rajch_ales
2026-08-05 16:38:36 +02:00
parent f1c730d007
commit 52f51a4a6a
4 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agent.md
+1
View File
@@ -40,6 +40,7 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
- Multi-column panels must use a shared collapse pattern: collapsing a panel removes its grid track, lets the adjacent workspace expand, preserves an accessible expand/collapse control, and stacks predictably on mobile. - Multi-column panels must use a shared collapse pattern: collapsing a panel removes its grid track, lets the adjacent workspace expand, preserves an accessible expand/collapse control, and stacks predictably on mobile.
- When the left sidebar is closed on desktop, its open control keeps a dedicated narrow rail; it must not be positioned inside the secondary product-details panel. On mobile, the rail collapses and the control may overlay the stacked layout. - When the left sidebar is closed on desktop, its open control keeps a dedicated narrow rail; it must not be positioned inside the secondary product-details panel. On mobile, the rail collapses and the control may overlay the stacked layout.
- Top headers for the sidebar, secondary panel and main workspace must use one shared fixed height so the columns align visually across the application. - Top headers for the sidebar, secondary panel and main workspace must use one shared fixed height so the columns align visually across the application.
- Panel collapse/open controls must use the shared `panel-control-button` style; do not create separate visual variants for `X`, chevrons or future panel toggles.
- Use Playwright to inspect the rendered result after every visual change at desktop and narrow viewport sizes. - Use Playwright to inspect the rendered result after every visual change at desktop and narrow viewport sizes.
## TypeScript workflow ## TypeScript workflow
public/index.html
+2 -2
View File
@@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<main class="catalog-screen"> <main class="catalog-screen">
<button class="sidebar-open-button" id="sidebarOpenButton" type="button" aria-controls="sidebarDrawer" aria-expanded="false" aria-label="Open sidebar" title="Open sidebar"> <button class="sidebar-open-button panel-control-button" id="sidebarOpenButton" type="button" aria-controls="sidebarDrawer" aria-expanded="false" aria-label="Open sidebar" title="Open sidebar">
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg> <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#menu"></use></svg>
</button> </button>
@@ -19,7 +19,7 @@
<aside class="control-panel sidebar-drawer" id="sidebarDrawer" aria-label="Catalog controls"> <aside class="control-panel sidebar-drawer" id="sidebarDrawer" aria-label="Catalog controls">
<div class="sidebar-drawer-header"> <div class="sidebar-drawer-header">
<span class="sidebar-drawer-title">Catalog controls</span> <span class="sidebar-drawer-title">Catalog controls</span>
<button class="sidebar-close-button" id="sidebarCloseButton" type="button" aria-label="Close sidebar" title="Close sidebar"> <button class="sidebar-close-button panel-control-button" id="sidebarCloseButton" type="button" aria-label="Close sidebar" title="Close sidebar">
<svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg> <svg class="sidebar-icon" aria-hidden="true"><use href="/icons.svg#close"></use></svg>
</button> </button>
</div> </div>
public/styles.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/tailwind.css
+4 -1
View File
@@ -50,6 +50,7 @@
.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; }
.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-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-close-button .sidebar-icon, .sidebar-open-button .sidebar-icon { @apply h-4 w-4; }
.panel-control-button { @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-slate-400 bg-white text-sm leading-none text-slate-700 shadow-sm transition hover:border-slate-500 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-catalog-focus/25; }
.sidebar-open-button { @apply fixed left-2 top-2 z-30; } .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 { @apply fixed inset-0 z-30 bg-slate-950/50; }
.sidebar-overlay[hidden] { display: none; } .sidebar-overlay[hidden] { display: none; }
@@ -115,7 +116,7 @@
.mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; } .mapping-source-status.is-muted { @apply bg-slate-200 text-slate-600; }
.secondary-panel { @apply min-w-0 border-r border-slate-400 bg-slate-300; } .secondary-panel { @apply min-w-0 border-r border-slate-400 bg-slate-300; }
.column-header { @apply box-border flex h-7 min-h-7 items-center justify-between gap-1 border-b border-slate-400 px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-600; } .column-header { @apply box-border flex h-7 min-h-7 items-center justify-between gap-1 border-b border-slate-400 px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-600; }
.column-toggle { @apply inline-flex h-5 w-5 items-center justify-center rounded border border-slate-400 bg-white text-sm leading-none text-slate-700 hover:bg-slate-200; } .column-toggle { @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-slate-400 bg-white text-sm leading-none text-slate-700 shadow-sm transition hover:border-slate-500 hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-catalog-focus/25; }
.secondary-panel .field-grid { @apply overflow-hidden; } .secondary-panel .field-grid { @apply overflow-hidden; }
.secondary-collapsed .secondary-panel .column-header { @apply h-full flex-col justify-start py-1; writing-mode: vertical-rl; } .secondary-collapsed .secondary-panel .column-header { @apply h-full flex-col justify-start py-1; writing-mode: vertical-rl; }
.secondary-collapsed .secondary-panel .field-grid { display: none; } .secondary-collapsed .secondary-panel .field-grid { display: none; }
@@ -270,6 +271,8 @@
html.dark .manufacturer-option { @apply text-slate-200 hover:bg-slate-800; } html.dark .manufacturer-option { @apply text-slate-200 hover:bg-slate-800; }
html.dark .manufacturer-option[aria-selected="true"] { @apply bg-slate-700 text-white; } html.dark .manufacturer-option[aria-selected="true"] { @apply bg-slate-700 text-white; }
html.dark .column-header { @apply border-slate-700 text-slate-300; } html.dark .column-header { @apply border-slate-700 text-slate-300; }
html.dark .panel-control-button,
html.dark .column-toggle { @apply border-slate-600 bg-slate-800 text-slate-100 hover:border-slate-400 hover:bg-slate-700; }
html.contrast-dark-high.dark .control-panel { @apply bg-slate-950 text-white; } html.contrast-dark-high.dark .control-panel { @apply bg-slate-950 text-white; }
html.contrast-dark-high.dark .action-button, html.contrast-dark-high.dark .action-button,
html.contrast-dark-high.dark .arrow-button, html.contrast-dark-high.dark .arrow-button,