Stitch-styled PDF viewer + .icon-btn helper for modal icon buttons
The Anzeigen / Download / Löschen icons inside the documents modal and the close X of every modal sit outside <table>, so the previous "table button" reset didn't reach them — the global blue button styling shone through. - Introduce a generic `.icon-btn` class that mirrors the table reset (transparent background, no padding, inherit colour). The reset rule is now `table button, .icon-btn`. - Tag the documents modal close button and the view/download/delete buttons inside each document card with `icon-btn`. Tailwind classes (`text-outline hover:text-primary` etc.) still win for colour. - Rebuild the PDF viewer modal in Stitch style: clean white card, light header with picture_as_pdf glyph + title, body on a soft grey surface, footer with chevron navigation buttons and zoom icons. Toggle hidden/flex instead of the legacy `.show` class. Removed the matching .pdf-viewer-* / .pdf-nav-btn / .pdf-zoom-btn CSS that no longer applies. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed
1 parent
40bd1b8009
commit
45c0c0047f
2 files changed
+56
-157
No files matched your search
+47
-152
@@ -156,11 +156,13 @@
|
||||
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 {
|
||||
/* Reset for icon-only buttons (table actions, modal close,
|
||||
pdf zoom). The legacy global `button { background, padding,
|
||||
color }` would otherwise turn them into solid blue blobs.
|
||||
Tailwind utilities like `bg-primary` still win since they
|
||||
share class specificity but come later in the cascade. */
|
||||
table button,
|
||||
.icon-btn {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
@@ -650,141 +652,15 @@
|
||||
}
|
||||
|
||||
/* PDF Viewer Styles */
|
||||
.pdf-viewer-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 3000;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.pdf-viewer-modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pdf-viewer-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
max-width: 1200px;
|
||||
max-height: 800px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
animation: slideIn 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pdf-viewer-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pdf-viewer-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pdf-viewer-close {
|
||||
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;
|
||||
}
|
||||
|
||||
.pdf-viewer-close:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pdf-viewer-body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* PDF viewer modal now styled with Tailwind in the markup.
|
||||
Only keep the canvas container neutral so the PDF page stands
|
||||
out against the body background. */
|
||||
.pdf-canvas-container {
|
||||
text-align: center;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.pdf-controls {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.pdf-nav-btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.pdf-nav-btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.pdf-nav-btn:disabled {
|
||||
background: #bdc3c7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pdf-page-info {
|
||||
font-size: 14px;
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pdf-zoom-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pdf-zoom-btn {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pdf-zoom-btn:hover {
|
||||
background: #219a52;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* Enhanced Tarifoptionen Styling */
|
||||
@@ -1862,7 +1738,7 @@
|
||||
<span class="material-symbols-outlined text-primary">description</span>
|
||||
<h3 class="text-title-sm text-on-surface">Dokumente</h3>
|
||||
</div>
|
||||
<button onclick="closeDocumentsModal()" class="text-outline hover:text-on-surface transition-colors" title="Schließen">
|
||||
<button onclick="closeDocumentsModal()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -1883,27 +1759,46 @@
|
||||
</div>
|
||||
|
||||
<!-- PDF Viewer Modal -->
|
||||
<div id="pdfViewerModal" class="pdf-viewer-modal">
|
||||
<div class="pdf-viewer-content">
|
||||
<div class="pdf-viewer-header">
|
||||
<h3 class="pdf-viewer-title" id="pdfViewerTitle">📋 PDF Viewer</h3>
|
||||
<button class="pdf-viewer-close" onclick="closePdfViewer()">×</button>
|
||||
<div id="pdfViewerModal" class="pdf-viewer-modal fixed inset-0 z-[1100] hidden items-center justify-center bg-black/50 p-margin">
|
||||
<div class="bg-surface-container-lowest rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.25)] border border-outline-variant/30 w-full max-w-[1100px] h-[90vh] flex flex-col overflow-hidden">
|
||||
<div class="flex items-center justify-between px-lg py-md border-b border-outline-variant">
|
||||
<div class="flex items-center gap-sm min-w-0">
|
||||
<span class="material-symbols-outlined text-primary shrink-0">picture_as_pdf</span>
|
||||
<h3 class="text-title-sm text-on-surface truncate" id="pdfViewerTitle">PDF Viewer</h3>
|
||||
</div>
|
||||
<button onclick="closePdfViewer()" class="icon-btn text-outline hover:text-on-surface transition-colors" title="Schließen">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pdf-viewer-body">
|
||||
<div class="flex-1 overflow-auto bg-surface-container-low/50 flex items-start justify-center p-md">
|
||||
<div class="pdf-canvas-container">
|
||||
<canvas id="pdfCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pdf-controls">
|
||||
<button class="pdf-nav-btn" id="prevPageBtn" onclick="prevPage()">◀ Vorherige</button>
|
||||
<div class="pdf-page-info">
|
||||
Seite <span id="currentPage">1</span> von <span id="totalPages">1</span>
|
||||
<div class="flex items-center justify-between gap-md px-lg py-md border-t border-outline-variant bg-surface-container-low/50">
|
||||
<div class="flex items-center gap-sm">
|
||||
<button id="prevPageBtn" onclick="prevPage()"
|
||||
class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-xs disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||
Vorherige
|
||||
</button>
|
||||
<span class="text-body-sm text-on-surface-variant">
|
||||
Seite <span id="currentPage" class="font-label-numeric text-on-surface">1</span> von <span id="totalPages" class="font-label-numeric text-on-surface">1</span>
|
||||
</span>
|
||||
<button id="nextPageBtn" onclick="nextPage()"
|
||||
class="bg-surface-container-high text-on-surface border border-outline-variant hover:bg-surface-variant transition-colors rounded-lg px-md py-sm text-body-sm flex items-center gap-xs disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Nächste
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="pdf-nav-btn" id="nextPageBtn" onclick="nextPage()">Nächste ▶</button>
|
||||
<div class="pdf-zoom-controls">
|
||||
<button class="pdf-zoom-btn" onclick="zoomOut()">-</button>
|
||||
<span id="zoomLevel">100%</span>
|
||||
<button class="pdf-zoom-btn" onclick="zoomIn()">+</button>
|
||||
<div class="flex items-center gap-sm">
|
||||
<button onclick="zoomOut()" class="icon-btn text-outline hover:text-primary transition-colors p-1" title="Verkleinern">
|
||||
<span class="material-symbols-outlined text-[22px]">remove</span>
|
||||
</button>
|
||||
<span id="zoomLevel" class="font-label-numeric text-label-numeric text-on-surface min-w-[48px] text-center">100%</span>
|
||||
<button onclick="zoomIn()" class="icon-btn text-outline hover:text-primary transition-colors p-1" title="Vergrößern">
|
||||
<span class="material-symbols-outlined text-[22px]">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+9
-5
@@ -825,15 +825,15 @@ async function showDocuments(schaltungId) {
|
||||
</div>
|
||||
<div class="flex items-center gap-xs shrink-0">
|
||||
${showView ? `<button data-doc-action="view" data-id="${doc.id}" data-name="${safeName}" title="Anzeigen"
|
||||
class="text-outline hover:text-primary transition-colors p-1">
|
||||
class="icon-btn text-outline hover:text-primary transition-colors p-1">
|
||||
<span class="material-symbols-outlined text-[20px]">visibility</span>
|
||||
</button>` : ''}
|
||||
<button data-doc-action="download" data-id="${doc.id}" title="Download"
|
||||
class="text-outline hover:text-primary transition-colors p-1">
|
||||
class="icon-btn text-outline hover:text-primary transition-colors p-1">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
</button>
|
||||
<button data-doc-action="delete" data-id="${doc.id}" data-name="${safeName}" data-schaltung-id="${schaltungId}" title="Löschen"
|
||||
class="text-outline hover:text-error transition-colors p-1">
|
||||
class="icon-btn text-outline hover:text-error transition-colors p-1">
|
||||
<span class="material-symbols-outlined text-[20px]">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -3487,7 +3487,9 @@ async function viewPdfDocument(documentId, filename) {
|
||||
await renderPage(currentPage);
|
||||
|
||||
// Show modal
|
||||
document.getElementById('pdfViewerModal').classList.add('show');
|
||||
const m = document.getElementById('pdfViewerModal');
|
||||
m.classList.remove('hidden');
|
||||
m.classList.add('flex');
|
||||
|
||||
// Update navigation buttons
|
||||
updateNavigationButtons();
|
||||
@@ -3572,7 +3574,9 @@ function updateZoomLevel() {
|
||||
}
|
||||
|
||||
function closePdfViewer() {
|
||||
document.getElementById('pdfViewerModal').classList.remove('show');
|
||||
const m = document.getElementById('pdfViewerModal');
|
||||
m.classList.add('hidden');
|
||||
m.classList.remove('flex');
|
||||
|
||||
// Cleanup
|
||||
currentPdf = null;
|
||||
|
||||
Reference in new issue
Block a user