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) {