changes to the mobile design to make it better fr the mobile view

Web/templates/library_table.html

@@ -8,9 +8,9 @@
        1. Modals & Overlays
        ========================================= */
     .modal {
-        display: none; /* Managed by JS (none/flex) */
+        display: none; 
         position: fixed;
-        inset: 0; /* Modern shorthand for top: 0, right: 0, bottom: 0, left: 0 */
+        inset: 0; 
         z-index: 1000;
         background-color: rgba(0, 0, 0, 0.6);
         align-items: center;
@@ -23,7 +23,7 @@
         display: flex;
         flex-direction: column;
         width: 100%;
-        max-width: 900px; /* Consolidated from conflicting 600px/900px rules */
+        max-width: 900px; 
         max-height: 90vh;
         background-color: var(--ui-surface, #fff);
         border-radius: 8px;
@@ -419,31 +419,136 @@
     }
 
     /* =========================================
-       7. Mobile Responsiveness
+       7. Mobile Responsiveness (Updated for Cards)
        ========================================= */
     @media (max-width: 768px) {
         .library-table-container { padding: 10px; }
         .library-search-bar { flex-direction: column; }
         .library-search-input { width: 100%; }
-        .library-items-table { font-size: 0.85em; }
         
+        /* Enlarge touch targets */
+        .library-search-input,
+        .library-scan-controls select,
+        .library-scan-controls input,
+        .library-filter-toggle-btn,
+        .filter-item input,
+        .filter-item select,
+        .button {
+            min-height: 44px;
+        }
+
+        /* Stack Scan & Controls */
+        .library-scan-controls {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 12px;
+        }
+        .library-scan-controls > * {
+            width: 100% !important;
+            margin-left: 0 !important;
+        }
+
+        .filter-row {
+            grid-template-columns: 1fr;
+        }
+        
+        .filter-buttons {
+            flex-direction: column;
+            align-items: stretch;
+        }
+        
+        .filter-buttons .button {
+            width: 100%;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        
+        .filter-buttons > div[style*="flex-grow"] {
+            display: none;
+        }
+
+        /* Convert Table to Cards */
+        .library-items-table,
+        .library-items-table thead,
+        .library-items-table tbody,
         .library-items-table th,
+        .library-items-table td,
+        .library-items-table tr {
+            display: block;
+            width: 100%;
+        }
+
+        .library-items-table thead tr {
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+        }
+
+        .library-items-table tr {
+            margin-bottom: 16px;
+            border: 1px solid var(--ui-border, #ddd);
+            border-radius: 12px;
+            background: #fff;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+            overflow: hidden;
+        }
+
         .library-items-table td {
-            padding: 8px 10px;
+            position: relative;
+            padding: 12px 16px 12px 35% !important; 
+            text-align: right;
+            border-bottom: 1px solid #f4f4f4;
+            font-size: 0.95em;
+            min-height: auto;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        
+        .library-items-table td::before {
+            content: attr(data-label);
+            position: absolute;
+            left: 16px;
+            width: 30%;
+            text-align: left;
+            font-weight: 600;
+            color: #555;
+            white-space: nowrap;
+        }
+
+        /* Styles specific for the Actions cell */
+        .library-items-table td:last-child {
+            border-bottom: none;
+            padding: 16px !important;
+            background: #f8fafc;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            align-items: stretch;
+        }
+        
+        .library-items-table td:last-child::before {
+            display: none;
+        }
+
+        .table-actions {
+            flex-direction: column;
+            width: 100%;
+            gap: 10px;
         }
 
         .table-actions .button {
-            padding: 4px 8px;
+            width: 100%;
-            font-size: 0.75em;
+            margin: 0 !important;
-        }
+            padding: 12px;
-
+            font-size: 1em;
-        .filter-row,
+            justify-content: center;
-        .library-scan-controls {
-            grid-template-columns: 1fr;
         }
 
         .library-scan-reader-wrap { max-width: 100%; }
     }
+    
     .library-scan-reader-wrap {
         display: none;
         margin-top: 15px;
@@ -534,13 +639,12 @@
 
 <div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
     <!-- Header -->
-    <!-- Search and Filter Toggle -->
-    <!-- Customizable Filter Panel -->
     <div class="library-header">
         <h1>📚 Bibliothek</h1>
         <p>Bücher, CDs, DVDs und weitere Medien</p>
     </div>
-    <!-- Student card / quick scan workflow -->
+    
+    <!-- Search and Filter Toggle -->
     <div class="library-search-bar">
         <input
             type="text"
@@ -556,6 +660,8 @@
             🔍 Filter
         </button>
     </div>
+    
+    <!-- Controls -->
     <div class="library-scan-controls">
         <select id="scanModeSelect" aria-label="Scan-Modus">
             <option value="card_only">Nur Ausweis erfassen</option>
@@ -572,10 +678,13 @@
         </button>
         <button id="manualActionBtn" class="button" type="button" style="margin-left:6px; background:#4f46e5; color:white;">Code verarbeiten</button>
     </div>
+    
     <div class="library-scan-reader-wrap" id="scanReaderWrap" style="display: none; margin-top: 15px;">
         <div class="library-scan-reader" style="width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; border-radius: 8px; border: 2px solid #ccc;">
         </div>
     </div>
+    
+    <!-- Customizable Filter Panel -->
     <div id="filterPanel" class="library-filter-panel">
         <div class="filter-row">
             <div class="filter-item">
@@ -674,7 +783,7 @@
 <script>
 
     // =========================================================================
-    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // CUSTOM MODAL HELPERS
     // =========================================================================
     function createModalOverlay() {
         const overlay = document.createElement('div');
@@ -867,6 +976,7 @@
             input.select();
         });
     }
+
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -891,19 +1001,18 @@
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
 
-    // Scanner Related State Variables
     let scannerInstance = null;
     let scannerRunning = false;
     let activeScannerCallback = null;
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
-    // Keyboard-scanner support (physical scanners that act as keyboard wedges)
+    
     let keyboardScannerEnabled = false;
     let keyboardScanBuffer = '';
     let keyboardLastKeyAt = 0;
     let physicalScannerModalOpen = false;
-    const KEYBOARD_SCAN_INTERCHAR_MS = 500; // max time between slower scanner keystrokes
+    const KEYBOARD_SCAN_INTERCHAR_MS = 500; 
     const physicalScanQueue = [];
     let keyboardScanProcessing = false;
     let editLibraryState = {
@@ -1040,13 +1149,14 @@
             const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
             const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
 
+            // Using data-label injection for accurate mobile rendering mapping
             return `
         <tr>
-            <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
+            <td data-label="Titel" class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
-            <td>${escapeHtml(item.ISBN || '-')}</td>
+            <td data-label="ISBN/Code">${escapeHtml(item.ISBN || '-')}</td>
-            <td>${getItemTypeLabel(item.ItemType || 'book')}</td>
+            <td data-label="Typ">${getItemTypeLabel(item.ItemType || 'book')}</td>
-            <td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
+            <td data-label="Anzahl" style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
-            <td>
+            <td data-label="Status">
                 <span class="table-status ${statusClass}">
                     ${statusText}
                 </span>
@@ -1056,7 +1166,7 @@
                 <button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
                     ${actionLabel}
                 </button>
-                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
+                ${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff; margin-left:6px;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
                 ${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
             </td>
         </tr>`;
@@ -1125,26 +1235,22 @@
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
 
-        // 1. CRITICAL FIX: Make the container visible BEFORE Quagga initializes
-        // Quagga cannot calculate video dimensions if display is 'none'
         if (scannerWrap) {
             scannerWrap.style.display = 'block';
         }
 
         setScanStatus('Starte Kamera...', 'warn');
 
-        // 2. Initialize Quagga with a slight delay to allow the DOM to render the block
         setTimeout(() => {
             Quagga.init({
                 inputStream: {
                     name: "Live",
                     type: "LiveStream",
-                    // This MUST match the inner div where the video should appear
                     target: document.querySelector('.library-scan-reader'),
                     constraints: {
                         width: 640,
                         height: 480,
-                        facingMode: "environment" // Prefer back camera on mobile
+                        facingMode: "environment" 
                     }
                 },
                 locator: {
@@ -1152,13 +1258,11 @@
                     halfSample: true
                 },
                 decoder: {
-                    // Keep only the barcode types you actually use to improve performance
                     readers: ["code_128_reader", "ean_reader", "code_39_reader"]
                 },
                 locate: true
             }, function(err) {
                 if (err) {
-                    // This will finally log the actual error (e.g., NotAllowedError) if permissions fail
                     console.error("Quagga initialization failed:", err);
                     setScanStatus('Kamera-Fehler: ' + (err.name || err), 'error');
 
@@ -1190,7 +1294,6 @@
         scannerRunning = false;
         activeScannerCallback = null;
 
-        // Hide the container to free up UI space
         const scannerWrap = document.querySelector('.library-scan-reader-wrap');
         if (scannerWrap) {
             scannerWrap.style.display = 'none';
@@ -1198,7 +1301,7 @@
 
         const toggleBtn = document.getElementById('toggleScannerBtn');
         if (toggleBtn) {
-            toggleBtn.textContent = 'Kamera Scanner'; // Reset button text
+            toggleBtn.textContent = 'Kamera Scanner'; 
         }
     }
 
@@ -1210,7 +1313,6 @@
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    // Falls du in Flask CSRF-Protect nutzt, muss der Token mitgesendet werden:
                     'X-CSRFToken': '{{ csrf_token }}',
                     'X-CSRF-Token': '{{ csrf_token }}'
                 }
@@ -1218,7 +1320,6 @@
 
             if (!response.ok) return false;
 
-            // Wir parsen die Antwort. Flask jsonify({"is_student_card": true/false})
             const data = await response.json();
             return data === true || data.is_student_card === true;
 
@@ -1245,7 +1346,7 @@
     });
 
     // =========================================================================
-    // Keyboard scanner handling (physical scanners that send chars then Enter)
+    // Keyboard scanner handling 
     // =========================================================================
     function getPhysicalScannerInstruction() {
         const mode = document.getElementById('scanModeSelect')?.value || 'card_only';
@@ -1299,7 +1400,6 @@
     }
 
     function keyboardScanKeydownHandler(e) {
-        // Only active when explicitly enabled
         if (!keyboardScannerEnabled || !physicalScannerModalOpen) return;
 
         if (e.key === 'Escape') {
@@ -1310,7 +1410,6 @@
 
         const now = Date.now();
 
-        // If Enter/Return pressed -> finalize buffer
         if (e.key === 'Enter') {
             e.preventDefault();
             const code = keyboardScanBuffer.trim();
@@ -1318,7 +1417,6 @@
             keyboardLastKeyAt = 0;
             if (!code) return;
 
-            // Scanner keystrokes must not be submitted into the focused form field.
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = code;
             updatePhysicalScannerModal('Enter erkannt. Code wird verarbeitet...', 'warn');
@@ -1326,9 +1424,7 @@
             return;
         }
 
-        // Accept all printable scanner characters, including letters and punctuation.
         if (e.key.length === 1) {
-            // If time gap too big, start new buffer
             if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
                 keyboardScanBuffer = '';
             }
@@ -1336,7 +1432,6 @@
             keyboardLastKeyAt = now;
             const displayCode = document.getElementById('physicalScannerCode');
             if (displayCode) displayCode.textContent = keyboardScanBuffer;
-            // Prevent default so scanner input is captured even while an input has focus.
             e.preventDefault();
         }
     }
@@ -1365,21 +1460,18 @@
 
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
-            return; // Verhindert doppeltes Scannen in kurzer Zeit
+            return; 
         }
         lastScanValue = scannedCode;
         lastScanAt = now;
 
-        // Den aktuellen Modus aus dem Dropdown auslesen
         const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
 
-        // 1. Modus: Nur Rückgabe
         if (mode === 'return_only') {
             await returnByCode(scannedCode);
             return;
         }
 
-        // 2. Modus: Nur Ausweis
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Ausweis scannen.`, 'ok');
@@ -1388,13 +1480,11 @@
             return;
         }
 
-        // 3. Modus: Schnellmodus (1x Ausweis, 1x Buch)
         if (mode === 'quick_toggle') {
             await processQuickToggleScan(scannedCode);
             return;
         }
 
-        // 4. Modus: Dauermodus (1x Ausweis, Nx Bücher)
         if (mode === 'continuous') {
             await processContinuousScan(scannedCode);
             return;
@@ -1471,7 +1561,6 @@
                 updatePhysicalScannerModal('Aktion erfolgreich. Bereit für den nächsten Mediencode.', 'ok');
             }
 
-            // Tabellen-Ansicht aktualisieren
             if (typeof loadLibraryItems === "function") {
                 await loadLibraryItems();
             }
@@ -1491,7 +1580,6 @@
 
     async function processQuickToggleScan(scannedCode) {
 
-        // 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
         if (!activeStudentCardId) {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}. Bitte den nächsten Mediencode scannen.`, 'ok');
@@ -1500,7 +1588,6 @@
             return;
         }
 
-        // 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
         try {
             setScanStatus('Verarbeite Mediencode...', 'warn');
             const response = await fetch('/api/library_scan_action', {
@@ -1695,7 +1782,6 @@
     }
 
     function showSmallConfirm(message, kind='ok', action = null) {
-        // Append the small helper text in German
         const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
         const el = document.createElement('div');
         el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
@@ -1720,11 +1806,9 @@
         closeButton.innerHTML = '&times;';
         el.appendChild(closeButton);
         document.body.appendChild(el);
-        // close handler
         closeButton.addEventListener('click', () => {
             if (el && el.parentNode) el.parentNode.removeChild(el);
         });
-        // auto remove after 3 seconds
         setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
     }
 
@@ -1764,11 +1848,9 @@
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
 
-        // Lade-Status anzeigen und Modal öffnen
         detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        // Daten vom Backend-API-Endpoint abrufen
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1832,15 +1914,12 @@
             });
     }
 
-    // Schließt das Modal über den 'x'-Button
     function closeDetailModal() {
         document.getElementById('detailModal').style.display = 'none';
     }
 
-    // Closes the modal if the user clicks the dark background overlay
     window.onclick = function(event) {
         const modal = document.getElementById('detailModal');
-        // If the click happened directly on the dark overlay (not the white box)
         if (event.target === modal) {
             closeDetailModal();
         }
@@ -1905,12 +1984,10 @@
         }
     }
 
-    // Run when DOM structure is entirely ready
     document.addEventListener('DOMContentLoaded', async () => {
-        wireScannerUi();       // Setup scanner control buttons
+        wireScannerUi();       
-        loadLibraryItems();   // Fetch your database items right away!
+        loadLibraryItems();   
 
-        // Safely connect standard Filters and Search inputs inside DOMContentLoaded
         const filterToggleBtn = document.getElementById('filterToggleBtn');
         if (filterToggleBtn) {
             filterToggleBtn.addEventListener('click', () => {
@@ -1968,15 +2045,11 @@
                     return;
                 }
 
-                // Leitet den manuellen Code an die zentrale Logik weiter,
-                // die prüft, welcher Modus im Dropdown aktiv ist.
                 handleScanSuccess(code);
 
-                // Feld nach Eingabe leeren, um direkt den nächsten Code bereitzuhaben
                 manualItemCode.value = '';
             });
 
-            // Optional: Auch auf "Enter" im Textfeld reagieren
             manualItemCode.addEventListener('keypress', (e) => {
                 if (e.key === 'Enter') {
                     e.preventDefault();