From 40bd1b8009f8b2a3f56af62911b413c609f6dc3e Mon Sep 17 00:00:00 2001 From: Kerim Atilgan Date: Fri, 15 May 2026 18:06:15 +0200 Subject: [PATCH] =?UTF-8?q?=C3=9Cbersicht=20polish:=20filter=20widths,=20t?= =?UTF-8?q?ransparent=20table=20buttons,=20Stitch=20docs=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three follow-ups to the previous overview redesign: - Filter bar: replace flex-grow inputs with fixed widths so the Zurücksetzen button no longer ends up overlapping the second date field. The date range gets its own 320px slot wide enough for two flexible date pickers and the separator. - Table icon buttons used to inherit the legacy global `button { background, padding, color }` rule and rendered as solid blue blocks. Add a `table button { background: transparent; … }` reset; class-level utilities still win for buttons that opt back in with bg-primary etc., so the "Neue Schaltung" CTA above the table keeps its colour. - Documents modal rewritten in Stitch style: clean white card with a light header and footer separator, file rows as bordered cards with a Material icon, primary "Dokumente hinzufügen" pill and outline "Schließen". showDocuments / closeDocumentsModal toggle a Tailwind hidden/flex pair instead of the legacy `.show` class. The matching legacy CSS blocks (.documents-modal*, .document-info, .download-btn, .view-btn, .no-documents*) are removed. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/index.html | 233 ++++++++++------------------------------------ public/script.js | 89 ++++++++---------- 2 files changed, 88 insertions(+), 234 deletions(-) diff --git a/public/index.html b/public/index.html index f43c9a6..4e80ea5 100644 --- a/public/index.html +++ b/public/index.html @@ -155,6 +155,20 @@ color: #eaf1ff; box-shadow: inset 0 -2px 0 0 #b4c5ff; } + + /* Buttons inside data tables are icon-only by default in the new + Stitch style. The legacy `button { background, padding, color }` + rules would otherwise turn them into solid blue blobs — class- + level Tailwind utilities still win for explicit backgrounds. */ + table button { + background: transparent; + color: inherit; + padding: 0; + border: 0; + cursor: pointer; + font-family: inherit; + font-size: inherit; + } .form-group { margin-bottom: 20px; @@ -621,149 +635,9 @@ } } - /* Document Modal Styles */ - .documents-modal { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.6); - z-index: 2000; - animation: fadeIn 0.3s ease; - } - - .documents-modal.show { - display: flex; - align-items: center; - justify-content: center; - } - - .documents-modal-content { - background: white; - border-radius: 12px; - max-width: 600px; - width: 90%; - max-height: 80vh; - overflow: hidden; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); - animation: slideIn 0.3s ease; - } - - .documents-modal-header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - padding: 20px; - text-align: center; - position: relative; - } - - .documents-modal-header h3 { - margin: 0; - font-size: 20px; - } - - .documents-modal-close { - position: absolute; - top: 15px; - right: 20px; - background: none; - border: none; - color: white; - font-size: 24px; - cursor: pointer; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: background 0.3s ease; - } - - .documents-modal-close:hover { - background: rgba(255, 255, 255, 0.2); - } - - .documents-modal-body { - padding: 20px; - max-height: 400px; - overflow-y: auto; - } - - .document-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 15px; - border: 2px solid #e0e0e0; - border-radius: 8px; - margin-bottom: 10px; - transition: all 0.3s ease; - cursor: pointer; - } - - .document-item:hover { - border-color: #3498db; - background: #f8f9fa; - transform: translateX(5px); - } - - .document-info { - display: flex; - align-items: center; - gap: 15px; - } - - .document-icon { - font-size: 24px; - color: #3498db; - } - - .document-details { - display: flex; - flex-direction: column; - } - - .document-name { - font-weight: bold; - color: #2c3e50; - margin-bottom: 5px; - } - - .document-meta { - font-size: 12px; - color: #7f8c8d; - } - - .download-btn { - background: #27ae60; - color: white; - border: none; - padding: 8px 16px; - border-radius: 6px; - cursor: pointer; - font-size: 14px; - transition: background 0.3s ease; - } - - .download-btn:hover { - background: #219a52; - } - - .no-documents { - text-align: center; - padding: 40px 20px; - color: #7f8c8d; - font-style: italic; - } - - .no-documents-icon { - font-size: 48px; - margin-bottom: 15px; - color: #bdc3c7; - } + /* Documents modal is now styled with Tailwind in the markup. + Only keep the document-item rule at line ~574 — that one is + still used by other places (file upload preview list). */ @keyframes fadeIn { from { opacity: 0; } @@ -913,21 +787,6 @@ background: #219a52; } - .view-btn { - background: #3498db; - color: white; - border: none; - padding: 6px 12px; - border-radius: 4px; - cursor: pointer; - font-size: 12px; - margin-left: 8px; - } - - .view-btn:hover { - background: #2980b9; - } - /* Enhanced Tarifoptionen Styling */ .tarifoption-item { display: flex; @@ -1182,40 +1041,40 @@
-
+
-
+
-
+
-
+
-
+
- – + class="flex-1 min-w-0 bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary"> + – + class="flex-1 min-w-0 bg-surface-container-lowest border border-outline-variant rounded h-8 px-sm font-label-numeric text-[12px] text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
@@ -1996,25 +1855,29 @@
-
-
-
-

📄 Dokumente

- -
-
- -
-
-
-
- - -
- + diff --git a/public/script.js b/public/script.js index 14bc2b9..f7057dc 100644 --- a/public/script.js +++ b/public/script.js @@ -790,65 +790,55 @@ async function showDocuments(schaltungId) { const documents = await apiRequest(`/api/schaltungen/${schaltungId}/dokumente`); const modal = document.getElementById('documentsModal'); const modalBody = document.getElementById('documentsModalBody'); - + modalBody.innerHTML = ''; - + if (documents.length === 0) { - modalBody.innerHTML = ` -
-
📄
-
Keine Dokumente vorhanden
-
Für diese Schaltung wurden noch keine Dokumente hochgeladen.
-
- -
-
+ const empty = document.createElement('div'); + empty.className = 'flex flex-col items-center justify-center py-xl text-center gap-sm'; + empty.innerHTML = ` + draft +
Keine Dokumente vorhanden
+
Für diese Schaltung wurden noch keine Dokumente hochgeladen.
`; + modalBody.appendChild(empty); } else { documents.forEach(doc => { - const docItem = document.createElement('div'); - docItem.className = 'document-item'; - - // Get file extension for icon const fileExt = doc.original_filename.split('.').pop().toLowerCase(); - let icon = '📄'; - if (['pdf'].includes(fileExt)) icon = '📋'; - else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) icon = '🖼️'; - else if (['doc', 'docx'].includes(fileExt)) icon = '📝'; - - // Format file size + let iconName = 'description'; + if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) iconName = 'image'; + else if (['doc', 'docx'].includes(fileExt)) iconName = 'article'; + const fileSize = doc.filesize ? `${(doc.filesize / 1024).toFixed(1)} KB` : 'Unbekannt'; - - // Format upload date const uploadDate = doc.uploaded_at ? formatDate(doc.uploaded_at) : 'Unbekannt'; - + const showView = fileExt === 'pdf'; const safeName = escapeHtml(doc.original_filename); - docItem.innerHTML = ` -
-
${icon}
-
-
${safeName}
-
Größe: ${escapeHtml(fileSize)} • Hochgeladen: ${escapeHtml(uploadDate)}
-
+ const card = document.createElement('div'); + card.className = 'flex items-center gap-md p-md border border-outline-variant rounded-lg bg-surface-container-lowest hover:bg-surface-container-low transition-colors'; + card.innerHTML = ` + ${iconName} +
+ ${safeName} + ${escapeHtml(fileSize)} · Hochgeladen: ${escapeHtml(uploadDate)}
-
- ${showView ? `` : ''} - ` : ''} + -
`; - docItem.querySelectorAll('button[data-doc-action]').forEach(btn => { + card.querySelectorAll('button[data-doc-action]').forEach(btn => { btn.addEventListener('click', () => { const action = btn.dataset.docAction; const id = parseInt(btn.dataset.id, 10); @@ -857,18 +847,18 @@ async function showDocuments(schaltungId) { else if (action === 'delete') deleteDocument(id, btn.dataset.name, parseInt(btn.dataset.schaltungId, 10)); }); }); - - modalBody.appendChild(docItem); + + modalBody.appendChild(card); }); } - // Setup file upload handler for additional documents const fileInput = document.getElementById('additionalDocumentUpload'); - fileInput.onchange = function(event) { + fileInput.onchange = function (event) { uploadAdditionalDocuments(schaltungId, event.target.files); }; - modal.classList.add('show'); + modal.classList.remove('hidden'); + modal.classList.add('flex'); } catch (error) { console.error('Fehler beim Laden der Dokumente:', error); @@ -878,7 +868,8 @@ async function showDocuments(schaltungId) { function closeDocumentsModal() { const modal = document.getElementById('documentsModal'); - modal.classList.remove('show'); + modal.classList.add('hidden'); + modal.classList.remove('flex'); } function downloadDocument(documentId) {