TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-03 20:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fe

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-29 12:38:07 +02:00
parent d4ed6411b9
commit c0ba5d06ff
1 changed files with 4 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+4 -151
View File
@@ -532,32 +532,6 @@
min-height: 220px;
}
.image-position-options {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.image-position-btn {
padding: 6px 12px;
background-color: #f8f9fa;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 0.9rem;
cursor: pointer;
transition: var(--transition);
}
.image-position-btn:hover {
background-color: #e9ecef;
}
.image-position-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.draggable-image {
cursor: move;
position: relative;
@@ -763,7 +737,6 @@
<!-- Upload Box -->
<div id="dropArea" class="upload-box">
<input type="file" id="fileElem" accept="image/*" class="d-none">
<!-- Upload Prompt -->
<div id="uploadPrompt" class="upload-prompt text-center p-4">
@@ -778,58 +751,7 @@
<p class="small text-muted mt-2 mb-0">Podporované formáty: JPG, PNG, GIF (max. 5MB)</p>
</div>
<!-- Image Preview -->
<div id="imagePreview" class="image-preview" style="display: none;">
<div class="preview-container">
<div class="banner-image-container" style="
display: block;
max-width: 100%;
text-align: center;
">
<img
src=""
style="
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
"
alt="Banner obrázek"
class="banner-image"
onerror="console.error('Failed to load banner image:', this.src)"
draggable="false"
>
</div>
<div class="preview-overlay">
<button type="button" class="btn btn-light btn-sm rounded-circle me-1" id="changeImageBtn">
<i class="fas fa-sync-alt"></i>
</button>
<button type="button" class="btn btn-light btn-sm rounded-circle" id="removeImageBtn">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Image Position Controls -->
<div class="position-controls mt-3">
<label class="form-label d-block">Pozice obrázku</label>
<div class="btn-group w-100" role="group">
<button type="button" class="btn btn-outline-primary position-btn active" data-position="left">
<i class="fas fa-align-left me-1"></i> Vlevo
</button>
<button type="button" class="btn btn-outline-secondary position-btn" data-position="center">
<i class="fas fa-align-center me-1"></i> Uprostřed
</button>
<button type="button" class="btn btn-outline-secondary position-btn" data-position="right">
<i class="fas fa-align-right me-1"></i> Vpravo
</button>
</div>
</div>
</div>
<!-- Image preview removed -->
</form>
<div class="form-section">
@@ -976,10 +898,6 @@ function updateBannerPreview() {
const borderRadius = document.getElementById('bannerBorderRadius')?.value || '4px';
const isVisible = document.getElementById('bannerVisibility')?.checked !== false;
// Get image if exists
const imagePreview = document.getElementById('bannerImagePreview');
const hasImage = imagePreview && imagePreview.src && !imagePreview.classList.contains('d-none');
// Build preview HTML
let previewHTML = `
<div class="banner-preview-content" style="
@@ -999,20 +917,7 @@ function updateBannerPreview() {
overflow: hidden;
">
<div class="banner-text">${text}</div>
`;
// Add image if exists (always on the right)
if (hasImage) {
previewHTML += `
<img src="${imagePreview.src}" alt="Banner preview" style="
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin-left: auto;
float: right;
">
`;
}
previewHTML += '</div>';
@@ -1073,12 +978,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Initialize upload functionality
const uploadPrompt = document.getElementById('uploadPrompt');
const imagePreview = document.getElementById('imagePreview');
const bannerImagePreview = document.getElementById('bannerImagePreview');
const fileInput = document.getElementById('fileElem');
const uploadBtn = document.getElementById('uploadBtn');
const changeImageBtn = document.getElementById('changeImageBtn');
const removeImageBtn = document.getElementById('removeImageBtn');
const dropArea = document.getElementById('dropArea');
// Image is always on the right side - no position selector needed
@@ -1100,41 +1000,15 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
// Show preview
// Process the file
const reader = new FileReader();
reader.onload = function(e) {
try {
currentImage = e.target.result;
const bannerImagePreview = document.getElementById('bannerImagePreview');
const uploadPrompt = document.getElementById('uploadPrompt');
const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
if (bannerImagePreview) {
bannerImagePreview.src = currentImage;
bannerImagePreview.style.display = 'block';
bannerImagePreview.style.maxWidth = '100%';
bannerImagePreview.style.maxHeight = '200px';
bannerImagePreview.style.objectFit = 'contain';
}
if (uploadPrompt) {
uploadPrompt.style.display = 'none';
}
if (imagePreview) {
imagePreview.style.display = 'block';
}
if (imagePreviewContainer) {
imagePreviewContainer.style.display = 'block';
}
// Initialize or update the banner preview
updateBannerPreview();
} catch (error) {
console.error('Error handling image preview:', error);
showNotification('Chyba při načítání náhledu obrázku', 'error');
console.error('Error processing file:', error);
showNotification('Chyba při zpracování souboru', 'error');
}
};
@@ -1804,27 +1678,6 @@ function removeImage() {
bannerImageInput.value = '';
}
// Hide image preview
if (bannerImagePreview) {
bannerImagePreview.src = '';
bannerImagePreview.style.display = 'none';
}
// Hide remove button
if (removeBtn) {
removeBtn.style.display = 'none';
}
// Show drag & drop message
if (dragDropMessage) {
dragDropMessage.style.display = 'flex';
}
// Reset preview container
if (previewContainer) {
previewContainer.style.display = 'none';
}
// Clear current image
currentImage = null;