4102ebfe5b
All checks were successful
Deploy bericht / deploy (push) Successful in 13s
Anhaenge-Spalte: Kachelraster mit Server-Thumbnails statt Dateinamen-Liste (Bilder per GD, PDFs per PDF.js), Grossansicht per Klick, Auswahlreihenfolge sichtbar, Sortierung/Filter (Aufnahmezeit per eigenem EXIF-Parser, da im Prod-Container ohne exif-Modul), ziehbare Spaltenbreite, Kachelgroesse, Drag & Drop auf Seitenliste/Arbeitsflaeche/Raster-Plaetze. Arbeitstisch zeigt jetzt Kopf-, Inhalts- und Fussbereich passend zur echten Seitengeometrie (bericht_page_geometry()) - Editor und PDF-Erzeugung rechnen mit denselben Werten, das PDF setzt die Arbeitsflaeche 1:1 statt sie ein zweites Mal einzupassen. Neu: Bild einer Seite austauschen (auch einzelne Raster-Plaetze), Seiten mehrfach markieren und sammeln loeschen/duplizieren, Autosave mit Verlassen-Warnung, Tastenkuerzel, kein location.reload() mehr nach Hinzufuegen/Loeschen/Hochladen (ajax/fragments.php). Nebenbei behoben: dol_dir_list() ohne mode=1 (Dateigroesse leer), PDF.js-Worker-Pfad ohne /custom-Praefix, PDFs liefen als Download statt inline, Groessen-Select blieb leer, Mehrfach-Upload nahm nur die erste Datei, Race-Condition bei schnellem Seitenwechsel. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
298 lines
6.1 KiB
CSS
298 lines
6.1 KiB
CSS
/**
|
|
* Bericht Image Viewer - Lightbox mit Touch-Zoom
|
|
* Standalone CSS für den Bild-Viewer im Bericht-Modul
|
|
*/
|
|
|
|
/* ========== Overlay (Fullscreen) ========== */
|
|
.bericht-viewer-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.92);
|
|
z-index: 99999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
touch-action: none; /* Verhindert Browser-Gesten */
|
|
}
|
|
|
|
.bericht-viewer-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* ========== Bild-Container ========== */
|
|
.bericht-viewer-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ========== Das Bild selbst ========== */
|
|
.bericht-viewer-image {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
object-fit: contain;
|
|
transform-origin: center center;
|
|
transition: transform 0.15s ease-out;
|
|
cursor: grab;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.bericht-viewer-image.dragging {
|
|
cursor: grabbing;
|
|
transition: none;
|
|
}
|
|
|
|
.bericht-viewer-image.zoomed {
|
|
max-width: none;
|
|
max-height: none;
|
|
}
|
|
|
|
/* ========== Schliessen-Button ========== */
|
|
.bericht-viewer-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
color: #fff;
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.bericht-viewer-close:hover,
|
|
.bericht-viewer-close:focus {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
outline: none;
|
|
}
|
|
|
|
/* ========== Navigation (Pfeile) ========== */
|
|
.bericht-viewer-nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 56px;
|
|
height: 80px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.bericht-viewer-nav:hover,
|
|
.bericht-viewer-nav:focus {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.bericht-viewer-nav:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.bericht-viewer-nav.prev {
|
|
left: 8px;
|
|
border-radius: 4px 8px 8px 4px;
|
|
}
|
|
|
|
.bericht-viewer-nav.next {
|
|
right: 8px;
|
|
border-radius: 8px 4px 4px 8px;
|
|
}
|
|
|
|
/* ========== Bild-Counter (3 / 12) ========== */
|
|
.bericht-viewer-counter {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
z-index: 10;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ========== Zoom-Buttons ========== */
|
|
.bericht-viewer-zoom {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.bericht-viewer-zoom button {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
color: #fff;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.bericht-viewer-zoom button:hover,
|
|
.bericht-viewer-zoom button:focus {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
outline: none;
|
|
}
|
|
|
|
/* ========== Titel-Anzeige ========== */
|
|
.bericht-viewer-title {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
max-width: 80vw;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* ========== Lade-Indikator ========== */
|
|
.bericht-viewer-loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
font-size: 14px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.bericht-viewer-loading::after {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-top-color: #fff;
|
|
border-radius: 50%;
|
|
margin-left: 8px;
|
|
animation: viewer-spin 0.8s linear infinite;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@keyframes viewer-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ========== PDF-Anhang im Vollbild ========== */
|
|
.bericht-viewer-pdf {
|
|
display: none;
|
|
width: 92vw;
|
|
height: 92vh;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
}
|
|
|
|
/* ========== Mobile Anpassungen ========== */
|
|
@media (max-width: 768px) {
|
|
.bericht-viewer-nav {
|
|
width: 44px;
|
|
height: 60px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.bericht-viewer-nav.prev { left: 4px; }
|
|
.bericht-viewer-nav.next { right: 4px; }
|
|
|
|
.bericht-viewer-close {
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.bericht-viewer-zoom {
|
|
bottom: 16px;
|
|
right: 8px;
|
|
}
|
|
|
|
.bericht-viewer-zoom button {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.bericht-viewer-counter {
|
|
bottom: 16px;
|
|
font-size: 12px;
|
|
padding: 4px 10px;
|
|
}
|
|
|
|
.bericht-viewer-title {
|
|
bottom: 50px;
|
|
font-size: 11px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.bericht-viewer-image {
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
}
|
|
}
|
|
|
|
/* ========== Swipe-Hinweis (einmalig bei erstem Öffnen) ========== */
|
|
.bericht-viewer-hint {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
animation: viewer-hint-fade 2s ease-out forwards;
|
|
z-index: 15;
|
|
}
|
|
|
|
@keyframes viewer-hint-fade {
|
|
0% { opacity: 1; }
|
|
70% { opacity: 1; }
|
|
100% { opacity: 0; visibility: hidden; }
|
|
}
|