mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 12:32:59 +00:00
fe
This commit is contained in:
Tomas Dvorak
+4
-151
@@ -532,32 +532,6 @@
|
|||||||
min-height: 220px;
|
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 {
|
.draggable-image {
|
||||||
cursor: move;
|
cursor: move;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -763,7 +737,6 @@
|
|||||||
|
|
||||||
<!-- Upload Box -->
|
<!-- Upload Box -->
|
||||||
<div id="dropArea" class="upload-box">
|
<div id="dropArea" class="upload-box">
|
||||||
<input type="file" id="fileElem" accept="image/*" class="d-none">
|
|
||||||
|
|
||||||
<!-- Upload Prompt -->
|
<!-- Upload Prompt -->
|
||||||
<div id="uploadPrompt" class="upload-prompt text-center p-4">
|
<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>
|
<p class="small text-muted mt-2 mb-0">Podporované formáty: JPG, PNG, GIF (max. 5MB)</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Image Preview -->
|
<!-- Image preview removed -->
|
||||||
<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>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
@@ -976,10 +898,6 @@ function updateBannerPreview() {
|
|||||||
const borderRadius = document.getElementById('bannerBorderRadius')?.value || '4px';
|
const borderRadius = document.getElementById('bannerBorderRadius')?.value || '4px';
|
||||||
const isVisible = document.getElementById('bannerVisibility')?.checked !== false;
|
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
|
// Build preview HTML
|
||||||
let previewHTML = `
|
let previewHTML = `
|
||||||
<div class="banner-preview-content" style="
|
<div class="banner-preview-content" style="
|
||||||
@@ -999,20 +917,7 @@ function updateBannerPreview() {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
">
|
">
|
||||||
<div class="banner-text">${text}</div>
|
<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>';
|
previewHTML += '</div>';
|
||||||
|
|
||||||
@@ -1073,12 +978,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
// Initialize upload functionality
|
// Initialize upload functionality
|
||||||
const uploadPrompt = document.getElementById('uploadPrompt');
|
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 uploadBtn = document.getElementById('uploadBtn');
|
||||||
const changeImageBtn = document.getElementById('changeImageBtn');
|
|
||||||
const removeImageBtn = document.getElementById('removeImageBtn');
|
|
||||||
const dropArea = document.getElementById('dropArea');
|
const dropArea = document.getElementById('dropArea');
|
||||||
|
|
||||||
// Image is always on the right side - no position selector needed
|
// Image is always on the right side - no position selector needed
|
||||||
@@ -1100,41 +1000,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show preview
|
// Process the file
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = function(e) {
|
reader.onload = function(e) {
|
||||||
try {
|
try {
|
||||||
currentImage = e.target.result;
|
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();
|
updateBannerPreview();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error handling image preview:', error);
|
console.error('Error processing file:', error);
|
||||||
showNotification('Chyba při načítání náhledu obrázku', 'error');
|
showNotification('Chyba při zpracování souboru', 'error');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -1804,27 +1678,6 @@ function removeImage() {
|
|||||||
bannerImageInput.value = '';
|
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
|
// Clear current image
|
||||||
currentImage = null;
|
currentImage = null;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user