data
1c3f88e6e5
- Kategorie-Baum mit Farben, Auf-/Zuklappen und Inline-Bearbeitung - AJAX-Handler für Produkt- und Kategorieaktionen (Best EK, Status-Toggle) - Admin: Ref-Schema und Standard-Aufklapp-Einstellung - CSS/JS erweitert für Baumansicht und modale Dialoge - bin/ zu .gitignore hinzugefügt Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
562 lines
10 KiB
CSS
Executable file
562 lines
10 KiB
CSS
Executable file
/* Produktverwaltung - Kategorie-Baumansicht */
|
|
|
|
/* === Toolbar === */
|
|
.pv-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
background: var(--colorbacktitle1, #f0f0f0);
|
|
border: 1px solid var(--colorborder, #ddd);
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pv-toolbar .pv-search {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
.pv-toolbar .pv-search input {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--colorborder, #ccc);
|
|
border-radius: 3px;
|
|
min-width: 200px;
|
|
}
|
|
.pv-toolbar .pv-export-buttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* === Ref-Schema Info === */
|
|
.pv-ref-schema {
|
|
background: #e8f4fd;
|
|
border: 1px solid #b8daff;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.pv-ref-schema .pv-schema-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
color: #004085;
|
|
}
|
|
.pv-ref-schema .pv-schema-header .fas {
|
|
transition: transform 0.2s;
|
|
}
|
|
.pv-ref-schema.collapsed .pv-schema-header .fa-chevron-down {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.pv-ref-schema .pv-schema-body {
|
|
margin-top: 8px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid #b8daff;
|
|
}
|
|
.pv-ref-schema.collapsed .pv-schema-body {
|
|
display: none;
|
|
}
|
|
.pv-ref-schema code {
|
|
background: #fff;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* === Baumstruktur === */
|
|
.pv-tree {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.pv-tree ul {
|
|
list-style: none;
|
|
padding-left: 20px;
|
|
margin: 0;
|
|
border-left: 2px solid #dde3ea;
|
|
}
|
|
/* Abstand zwischen Geschwister-Kategorien auf Ebene 1 (Root) */
|
|
.pv-tree > li + li {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #dde3ea;
|
|
}
|
|
/* Abstand zwischen Geschwister-Kategorien auf tieferen Ebenen */
|
|
.pv-tree ul > li + li {
|
|
margin-top: 4px;
|
|
}
|
|
.pv-tree li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.pv-category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 8px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
user-select: none;
|
|
font-weight: 600;
|
|
font-size: 0.95em;
|
|
}
|
|
/* Ebene 1: größer */
|
|
.pv-tree > li > .pv-category-header {
|
|
font-size: 1.05em;
|
|
padding: 6px 10px;
|
|
background: var(--colorbacktitle1, #f0f4f8);
|
|
border: 1px solid var(--colorborder, #dde3ea);
|
|
}
|
|
/* Ebene 2 */
|
|
.pv-tree > li > .pv-category-children > ul > li > .pv-category-header {
|
|
font-size: 0.95em;
|
|
padding-left: 6px;
|
|
border-left: 3px solid #b0bec5;
|
|
}
|
|
/* Ebene 3+ */
|
|
.pv-tree > li > .pv-category-children > ul > li .pv-category-children ul .pv-category-header {
|
|
font-size: 0.9em;
|
|
color: #555;
|
|
}
|
|
.pv-category-header:hover {
|
|
background: var(--colorbacklinepairhover, #f5f5f5);
|
|
}
|
|
.pv-category-header .pv-toggle {
|
|
display: inline-flex;
|
|
width: 16px;
|
|
justify-content: center;
|
|
color: #666;
|
|
transition: transform 0.15s;
|
|
}
|
|
.pv-category-header .pv-toggle.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.pv-category-header .pv-cat-label {
|
|
flex: 1;
|
|
}
|
|
.pv-category-header .pv-cat-color {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
}
|
|
.pv-category-header .pv-cat-count {
|
|
color: #888;
|
|
font-weight: normal;
|
|
font-size: 0.85em;
|
|
}
|
|
.pv-category-header .pv-cat-actions {
|
|
display: none;
|
|
margin-left: 8px;
|
|
}
|
|
.pv-category-header:hover .pv-cat-actions {
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
}
|
|
.pv-cat-actions button {
|
|
padding: 1px 4px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.pv-cat-actions button:hover {
|
|
opacity: 1;
|
|
}
|
|
.pv-category-children {
|
|
padding: 2px 0 4px 0;
|
|
}
|
|
.pv-category-children.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* === Produkttabelle === */
|
|
.pv-products {
|
|
margin: 2px 0 6px 22px;
|
|
border-collapse: collapse;
|
|
width: calc(100% - 22px);
|
|
font-size: 0.9em;
|
|
table-layout: fixed;
|
|
}
|
|
.pv-products th,
|
|
.pv-products td {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.pv-products th {
|
|
background: var(--colorbacktitle1, #f8f8f8);
|
|
padding: 4px 8px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 0.85em;
|
|
color: #555;
|
|
border-bottom: 2px solid var(--colorborder, #ddd);
|
|
}
|
|
.pv-products td {
|
|
padding: 3px 8px;
|
|
border-bottom: 1px solid var(--colorborder, #eee);
|
|
vertical-align: middle;
|
|
}
|
|
.pv-products tr:hover td {
|
|
background: var(--colorbacklinepairhover, #f9f9f9);
|
|
}
|
|
.pv-products .pv-col-status {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
.pv-products .pv-col-status .fas {
|
|
font-size: 0.75em;
|
|
margin: 0 1px;
|
|
}
|
|
.pv-status-on {
|
|
color: #27ae60;
|
|
}
|
|
.pv-status-off {
|
|
color: #ccc;
|
|
}
|
|
.pv-products .pv-col-ref {
|
|
width: 200px;
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
}
|
|
.pv-products .pv-col-label {
|
|
/* nimmt den restlichen Platz */
|
|
}
|
|
.pv-products .pv-col-desc {
|
|
width: 180px;
|
|
font-size: 0.85em;
|
|
color: #666;
|
|
}
|
|
.pv-products .pv-col-price {
|
|
width: 110px;
|
|
text-align: right;
|
|
}
|
|
.pv-products .pv-col-margin {
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
.pv-supplier-tag {
|
|
display: inline-block;
|
|
font-size: 0.7em;
|
|
color: #fff;
|
|
background: #6c757d;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
font-family: sans-serif;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
line-height: 1.4;
|
|
margin-left: 3px;
|
|
}
|
|
.pv-calc-margin {
|
|
font-weight: 600;
|
|
}
|
|
.pv-margin-ok {
|
|
color: #27ae60;
|
|
}
|
|
.pv-margin-warn {
|
|
color: #e74c3c;
|
|
}
|
|
.pv-margin-extreme {
|
|
color: #e74c3c;
|
|
font-weight: 700;
|
|
}
|
|
.pv-margin-extreme .fas {
|
|
font-size: 0.8em;
|
|
margin-right: 2px;
|
|
}
|
|
.pv-products .pv-col-actions {
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
.pv-products .pv-col-actions a,
|
|
.pv-products .pv-col-actions button {
|
|
padding: 2px 4px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.pv-products .pv-col-actions a:hover,
|
|
.pv-products .pv-col-actions button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* === Inline Editing === */
|
|
.pv-editable {
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
.pv-editable:hover {
|
|
border-color: var(--colorborder, #ccc);
|
|
background: #fff;
|
|
}
|
|
.pv-edit-input {
|
|
width: 100%;
|
|
padding: 2px 4px;
|
|
border: 2px solid #4a90d9;
|
|
border-radius: 2px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.pv-col-ref .pv-edit-input {
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
.pv-saving {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* === Ohne Kategorie Sektion === */
|
|
.pv-no-category {
|
|
margin-top: 15px;
|
|
border: 2px solid #f0ad4e;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.pv-no-category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: #fcf8e3;
|
|
border-bottom: 1px solid #f0ad4e;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: #8a6d3b;
|
|
}
|
|
.pv-no-category-header:hover {
|
|
background: #faf2cc;
|
|
}
|
|
.pv-no-category-body {
|
|
padding: 0;
|
|
}
|
|
.pv-no-category-body.collapsed {
|
|
display: none;
|
|
}
|
|
.pv-no-category .pv-products {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* === Archiv Sektion === */
|
|
.pv-archive {
|
|
margin-top: 15px;
|
|
border: 2px solid #bdc3c7;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
opacity: 0.7;
|
|
}
|
|
.pv-archive:hover {
|
|
opacity: 1;
|
|
}
|
|
.pv-archive-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: #ecf0f1;
|
|
border-bottom: 1px solid #bdc3c7;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: #7f8c8d;
|
|
}
|
|
.pv-archive-header:hover {
|
|
background: #dfe6e9;
|
|
}
|
|
.pv-archive-body {
|
|
padding: 0;
|
|
}
|
|
.pv-archive-body.collapsed {
|
|
display: none;
|
|
}
|
|
.pv-archive .pv-products {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* === Kategorie-Zuweisungs-Dialog === */
|
|
.pv-dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.4);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.pv-dialog {
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
min-width: 350px;
|
|
max-width: 500px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
|
}
|
|
.pv-dialog h3 {
|
|
margin: 0 0 15px 0;
|
|
font-size: 1.1em;
|
|
}
|
|
.pv-dialog select {
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.pv-dialog .pv-dialog-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* === Produkt-Bearbeitungs-Dialog === */
|
|
.pv-edit-dialog {
|
|
min-width: 450px;
|
|
max-width: 550px;
|
|
}
|
|
.pv-edit-dialog h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #333;
|
|
}
|
|
.pv-edit-form {
|
|
margin-bottom: 18px;
|
|
}
|
|
.pv-form-row {
|
|
margin-bottom: 12px;
|
|
}
|
|
.pv-form-row label {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 0.85em;
|
|
color: #555;
|
|
margin-bottom: 3px;
|
|
}
|
|
.pv-form-row input {
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--colorborder, #ccc);
|
|
border-radius: 3px;
|
|
font-size: 0.95em;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.pv-form-row input:focus {
|
|
border-color: #4a90d9;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.15);
|
|
}
|
|
.pv-form-row-half {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.pv-form-row-half > div {
|
|
flex: 1;
|
|
}
|
|
.pv-price-input {
|
|
text-align: right;
|
|
font-family: monospace;
|
|
}
|
|
.pv-dialog-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.pv-dialog-spacer {
|
|
flex: 1;
|
|
}
|
|
.pv-btn-card {
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
}
|
|
.pv-btn-card:hover {
|
|
opacity: 1;
|
|
}
|
|
.pv-btn-save:disabled {
|
|
opacity: 0.6;
|
|
cursor: wait;
|
|
}
|
|
|
|
/* === Farb-Swatches === */
|
|
.pv-color-swatches {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
max-width: 200px;
|
|
}
|
|
.pv-color-swatch {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: transform 0.1s, border-color 0.1s;
|
|
}
|
|
.pv-color-swatch:hover {
|
|
transform: scale(1.15);
|
|
border-color: #333;
|
|
}
|
|
.pv-color-swatch.selected {
|
|
border-color: #333;
|
|
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
|
|
}
|
|
|
|
/* === Toast / Benachrichtigung === */
|
|
.pv-toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
z-index: 10001;
|
|
animation: pv-fadeIn 0.3s ease;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
}
|
|
.pv-toast.success {
|
|
background: #27ae60;
|
|
}
|
|
.pv-toast.error {
|
|
background: #e74c3c;
|
|
}
|
|
@keyframes pv-fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* === Responsive === */
|
|
@media (max-width: 768px) {
|
|
.pv-toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.pv-toolbar .pv-search {
|
|
margin-left: 0;
|
|
}
|
|
.pv-products .pv-col-price,
|
|
.pv-products .pv-col-margin {
|
|
display: none;
|
|
}
|
|
}
|