Invario/Inventarsystem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Refactor bulk delete drawer for improved layout and accessibility

Browse Source
This commit is contained in:
AIIrondev
2026-04-10 23:20:20 +02:00
parent ef605e080b
commit daccf3334b
1 changed files with 42 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main_admin.html
+42 -41
View File
@@ -27,7 +27,6 @@
}
.bulk-delete-inline-wrap {
position: relative;
display: inline-flex;
}
@@ -51,26 +50,26 @@
}
.bulk-delete-drawer {
position: absolute;
right: 0;
top: calc(100% + 10px);
transform: translateY(-8px);
width: min(360px, calc(100vw - 34px));
z-index: 35;
display: none;
width: 100%;
max-width: 980px;
margin: 0 auto 18px;
border: 1px solid #dbe3ee;
background: #ffffff;
border-radius: 14px;
border-radius: 10px;
padding: 14px;
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.15);
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.bulk-delete-drawer.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 14px;
}
.bulk-delete-content {
flex: 1 1 380px;
}
.bulk-delete-drawer strong {
@@ -93,9 +92,11 @@
.bulk-delete-actions {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
margin-top: 4px;
align-items: center;
flex: 0 1 auto;
}
.bulk-delete-actions button {
@@ -106,7 +107,7 @@
background: #f8fafc;
color: #1e293b;
font-weight: 600;
text-align: left;
text-align: center;
}
.bulk-delete-actions button:hover {
@@ -388,9 +389,16 @@
}
@media (max-width: 768px) {
.bulk-delete-drawer {
right: -8px;
width: min(340px, calc(100vw - 24px));
.bulk-delete-drawer.open {
flex-direction: column;
}
.bulk-delete-actions {
width: 100%;
}
.bulk-delete-actions button {
width: 100%;
}
}
@@ -2250,20 +2258,22 @@ document.addEventListener('DOMContentLoaded', ()=>{
<button type="button" id="bulk-delete-drawer-toggle" class="view-toggle-btn bulk-delete-drawer-toggle" aria-expanded="false" title="Massenlöschung" onclick="toggleBulkDeleteDrawer()">
<span class="drawer-icon">⚙</span>
</button>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
<div class="bulk-delete-actions">
<button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
<button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
<button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
</div>
</div>
</div>
</div>
</h1>
<div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
<div class="bulk-delete-content">
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
</div>
<div class="bulk-delete-actions">
<button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
<button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
<button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
</div>
</div>
<div class="filter-container">
<div class="filter-group">
<div class="filter-header">
@@ -3002,6 +3012,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
if (toggle) {
toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span>' : '<span class="drawer-icon">⚙</span>';
toggle.title = bulkDeleteDrawerOpen ? 'Massenlöschung schließen' : 'Massenlöschung öffnen';
}
}
@@ -3071,16 +3082,6 @@ document.addEventListener('DOMContentLoaded', ()=>{
}
});
document.addEventListener('click', function(event) {
if (!bulkDeleteDrawerOpen) {
return;
}
const wrapper = document.querySelector('.bulk-delete-inline-wrap');
if (wrapper && !wrapper.contains(event.target)) {
setBulkDeleteDrawer(false);
}
});
function deleteSelectedItems() {
const selectedIds = [...bulkDeleteSelection];
if (selectedIds.length === 0) {