Refactor bulk delete drawer for improved UI and functionality

Web/templates/main_admin.html

@@ -26,49 +26,92 @@
         font-weight: 600;
     }
 
-    .bulk-delete-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        justify-content: space-between;
-        align-items: center;
-        border: 1px solid #f2c4c4;
-        background: #fff8f8;
-        border-radius: 8px;
-        padding: 12px 14px;
-        margin: 0 0 18px;
+    .bulk-delete-inline-wrap {
+        position: relative;
+        display: inline-flex;
     }
 
-    .bulk-delete-toolbar strong {
+    .bulk-delete-drawer-toggle {
+        position: static;
+        transform: none;
+        z-index: 2;
+    }
+
+    .bulk-delete-drawer-toggle .drawer-icon {
+        display: inline-block;
+        margin-right: 4px;
+    }
+
+    .bulk-delete-drawer-toggle:hover {
+        box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
+    }
+
+    .bulk-delete-drawer-toggle:active {
+        transform: scale(0.98);
+    }
+
+    .bulk-delete-drawer {
+        position: absolute;
+        right: 0;
+        top: calc(100% + 10px);
+        transform: translateY(-8px);
+        width: min(360px, calc(100vw - 34px));
+        z-index: 35;
+        border: 1px solid #dbe3ee;
+        background: #ffffff;
+        border-radius: 14px;
+        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;
+    }
+
+    .bulk-delete-drawer.open {
+        transform: translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .bulk-delete-drawer strong {
         display: block;
         margin-bottom: 2px;
     }
 
     .bulk-delete-summary {
-        color: #7a4a4a;
+        color: #334155;
         font-size: 0.92rem;
         margin-top: 4px;
     }
 
-    .bulk-delete-toolbar small {
-        color: #7a4a4a;
+    .bulk-delete-drawer small {
+        color: #64748b;
         display: block;
         margin-top: 2px;
+        line-height: 1.35;
     }
 
     .bulk-delete-actions {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
         gap: 8px;
+        margin-top: 12px;
     }
 
     .bulk-delete-actions button {
-        border: 1px solid #cfd8dc;
-        border-radius: 6px;
-        padding: 8px 12px;
+        border: 1px solid #dbe3ee;
+        border-radius: 8px;
+        padding: 9px 12px;
         cursor: pointer;
-        background: #fff;
+        background: #f8fafc;
+        color: #1e293b;
         font-weight: 600;
+        text-align: left;
+    }
+
+    .bulk-delete-actions button:hover {
+        background: #eef4ff;
+        border-color: #bfdbfe;
     }
 
     .bulk-delete-actions .danger {
@@ -77,6 +120,11 @@
         border-color: #c82333;
     }
 
+    .bulk-delete-actions .danger:hover {
+        background: #c82333;
+        border-color: #b21f2d;
+    }
+
     /* Filter styles */
     .filter-container {
         display: flex;
@@ -327,7 +375,7 @@
         align-items: center;
         gap: 6px;
         font-size: 0.9rem;
-        color: #6b1f1f;
+        color: #475569;
         cursor: pointer;
         user-select: none;
     }
@@ -339,6 +387,13 @@
         cursor: pointer;
     }
 
+    @media (max-width: 768px) {
+        .bulk-delete-drawer {
+            right: -8px;
+            width: min(340px, calc(100vw - 24px));
+        }
+    }
+
     .item-card .item-image {
         width: 100%;
         height: auto;
@@ -2191,21 +2246,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
                 <button id="toggle-favorites-view" class="view-toggle-btn" title="Nur Merkliste anzeigen">
                     <span id="favorites-view-icon">🔖</span>
                 </button>
+                <div class="bulk-delete-inline-wrap">
+                    <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 class="bulk-delete-toolbar">
-            <div>
-                <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">
@@ -2587,6 +2645,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
     let currentUsername = '';
     let allItems = []; // Cache for all items
     let bulkDeleteSelection = new Set();
+    let bulkDeleteDrawerOpen = false;
     const studentCardsModuleEnabled = {{ 'true' if student_cards_module_enabled else 'false' }};
     const studentDefaultBorrowDays = {{ student_default_borrow_days|default(14) }};
     const studentMaxBorrowDays = {{ student_max_borrow_days|default(365) }};
@@ -2932,6 +2991,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
         }
     }
 
+    function setBulkDeleteDrawer(open) {
+        bulkDeleteDrawerOpen = Boolean(open);
+        const drawer = document.getElementById('bulk-delete-drawer');
+        const toggle = document.getElementById('bulk-delete-drawer-toggle');
+        if (drawer) {
+            drawer.classList.toggle('open', bulkDeleteDrawerOpen);
+            drawer.setAttribute('aria-hidden', bulkDeleteDrawerOpen ? 'false' : 'true');
+        }
+        if (toggle) {
+            toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
+            toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span>' : '<span class="drawer-icon">⚙</span>';
+        }
+    }
+
+    function toggleBulkDeleteDrawer() {
+        setBulkDeleteDrawer(!bulkDeleteDrawerOpen);
+    }
+
     function setBulkDeleteSelection(itemId, checked) {
         const normalizedId = String(itemId || '').trim();
         if (!normalizedId) {
@@ -2988,6 +3065,22 @@ document.addEventListener('DOMContentLoaded', ()=>{
         updateBulkDeleteSummary();
     }
 
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape' && bulkDeleteDrawerOpen) {
+            setBulkDeleteDrawer(false);
+        }
+    });
+
+    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) {