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

f

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-29 11:43:22 +02:00
parent da9c37417e
commit 13d517731a
1 changed files with 26 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+26 -52
View File
@@ -1003,8 +1003,7 @@ function updateBannerPreview() {
// Add image if exists // Add image if exists
if (hasImage) { if (hasImage) {
const activePosBtn = document.querySelector('.image-pos-btn.active, .position-btn.active'); const imagePosition = document.querySelector('.image-pos-btn.active')?.dataset.pos || 'center';
const imagePosition = activePosBtn ? activePosBtn.dataset.pos : (template?.imagePosition || 'right');
let imageStyle = 'max-width: 100%; max-height: 100%; object-fit: contain;'; let imageStyle = 'max-width: 100%; max-height: 100%; object-fit: contain;';
// Apply position based on selection // Apply position based on selection
@@ -1031,10 +1030,7 @@ function updateBannerPreview() {
// Update preview // Update preview
bannerPreview.innerHTML = previewHTML; bannerPreview.innerHTML = previewHTML;
// Add drag functionality for custom positioning // No custom positioning, always right-aligned
if (hasImage && document.querySelector('.image-pos-btn.active')?.dataset.pos === 'custom') {
setupDraggableImage();
}
} }
// Initialize template object if not exists // Initialize template object if not exists
@@ -1047,8 +1043,7 @@ let template = {
fontSize: 16, fontSize: 16,
padding: 20, padding: 20,
margin: 20, margin: 20,
borderRadius: 8, borderRadius: 8
imagePosition: 'right' // Default to right
}; };
// Initialize when DOM is loaded // Initialize when DOM is loaded
@@ -1097,18 +1092,12 @@ document.addEventListener('DOMContentLoaded', () => {
const removeImageBtn = document.getElementById('removeImageBtn'); const removeImageBtn = document.getElementById('removeImageBtn');
const dropArea = document.getElementById('dropArea'); const dropArea = document.getElementById('dropArea');
// Initialize image position buttons // Image is always on the right side
document.querySelectorAll('.image-pos-btn, .position-btn').forEach(btn => { const rightPositionBtn = document.querySelector('.image-pos-btn[data-pos="right"], .position-btn[data-pos="right"]');
btn.addEventListener('click', function() { if (rightPositionBtn) {
document.querySelectorAll('.image-pos-btn, .position-btn').forEach(b => { rightPositionBtn.classList.add('active', 'btn-primary');
b.classList.remove('active', 'btn-primary'); rightPositionBtn.classList.remove('btn-outline-secondary');
b.classList.add('btn-outline-secondary'); }
});
this.classList.add('active', 'btn-primary');
this.classList.remove('btn-outline-secondary');
updateBannerPreview();
});
});
// Handle file selection // Handle file selection
function handleFileSelect(file) { function handleFileSelect(file) {
@@ -1905,47 +1894,34 @@ function updateBannerPreview() {
const bannerTextContent = bannerText || 'Náhled banneru'; const bannerTextContent = bannerText || 'Náhled banneru';
if (hasImage && currentImage) { if (hasImage && currentImage) {
// Get image dimensions from inputs or use defaults // Get image dimensions and position from inputs or use defaults
const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300'); const imageWidth = parseInt(document.getElementById('bannerImageWidth')?.value || '300');
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200'); const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
const imagePosition = document.getElementById('bannerImagePosition')?.value || 'right';
// Get image position from active button or template
const activePosBtn = document.querySelector('.image-pos-btn.active, .position-btn.active');
let imagePosition = activePosBtn ? activePosBtn.dataset.pos : (template?.imagePosition || 'right');
// Update template with current position
if (template) {
template.imagePosition = imagePosition;
}
// Log the current position for debugging // Log the current position for debugging
console.log('Image position:', imagePosition); console.log('Image position:', imagePosition);
// Create image container with proper styling and positioning // Create image container fixed on the right side
const isSideBySide = imagePosition === 'left' || imagePosition === 'right'; const maxWidth = '30%';
const maxWidth = isSideBySide ? '40%' : '100%'; const maxHeight = '300px';
const maxHeight = isSideBySide ? '300px' : '200px';
// Create flex container for better layout control // Create flex container for right-aligned image
let imgContainer = ` let imgContainer = `
<div class="banner-image-container" style=" <div class="banner-image-container" style="
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
max-width: ${maxWidth}; max-width: ${maxWidth};
${isSideBySide ? 'width: 30%;' : 'width: 100%;'} width: 30%;
${imagePosition === 'left' ? 'justify-content: flex-start;' : ''} justify-content: flex-end;
${imagePosition === 'right' ? 'justify-content: flex-end;' : ''} align-self: flex-start;
${imagePosition === 'center' ? 'justify-content: center; margin: 0 auto;' : ''}
${isSideBySide ? 'align-self: flex-start;' : ''}
${imagePosition === 'top' ? 'margin-bottom: 20px;' : ''}
${imagePosition === 'bottom' ? 'margin-top: 20px;' : ''}
"> ">
<div style=" <div style="
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: ${imagePosition === 'left' ? 'flex-start' : imagePosition === 'right' ? 'flex-end' : 'center'}; justify-content: flex-end;
align-items: center; align-items: center;
"> ">
<img <img
@@ -2036,15 +2012,14 @@ function updateBannerPreview() {
? `background: ${styles.background};` ? `background: ${styles.background};`
: `background-color: ${styles.backgroundColor};`; : `background-color: ${styles.backgroundColor};`;
// Create container with proper layout // Create container with right-aligned image layout
const isVerticalLayout = imagePosition === 'top' || imagePosition === 'bottom';
bannerContent = ` bannerContent = `
<div class="banner-content" style=" <div class="banner-content" style="
display: flex; display: flex;
flex-direction: ${isVerticalLayout ? 'column' : 'row'}; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: space-between;
padding: ${styles.padding}; padding: ${styles.padding};
margin: ${styles.margin}; margin: ${styles.margin};
background: ${styles.background || styles.backgroundColor}; background: ${styles.background || styles.backgroundColor};
@@ -2059,16 +2034,15 @@ function updateBannerPreview() {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
"> ">
${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
<div style=" <div style="
flex: ${isVerticalLayout ? '0 1 auto' : '1'}; flex: 1;
width: ${isVerticalLayout ? '100%' : 'auto'};
text-align: ${styles.textAlign}; text-align: ${styles.textAlign};
font-size: ${styles.fontSize}; font-size: ${styles.fontSize};
padding-right: 20px;
"> ">
${textElement} ${textElement}
</div> </div>
${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''} ${imgContainer}
</div>`; </div>`;
// Show the image preview in the container // Show the image preview in the container