ccc

admin-dashboard.html

@@ -781,7 +781,27 @@
                             <!-- Image Preview -->
                             <div id="imagePreview" class="image-preview" style="display: none;">
                                 <div class="preview-container">
-                                    <img id="bannerImagePreview" src="" alt="Náhled obrázku" class="img-fluid">
+                                    <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>
@@ -1842,18 +1862,33 @@ function updateBannerPreview() {
             ${imagePosition === 'center' ? 'display: block; margin: 0 auto;' : ''}
         `;
         
-        // Create image container
+        // Create image container with proper styling and positioning
+        const maxWidth = imagePosition === 'left' || imagePosition === 'right' ? '30%' : '100%';
+        const maxHeight = '200px';
+        
         let imgContainer = `
             <div class="banner-image-container" style="
-                display: inline-block;
+                display: block;
-                max-width: 100%;
+                max-width: ${maxWidth};
-                margin-bottom: 10px;
+                text-align: ${imagePosition === 'left' ? 'left' : imagePosition === 'right' ? 'right' : 'center'};
+                ${imagePosition === 'left' ? 'margin-right: 20px;' : ''}
+                ${imagePosition === 'right' ? 'margin-left: 20px;' : ''}
+                ${imagePosition === 'left' || imagePosition === 'right' ? 'align-self: flex-start;' : ''}
             ">
                 <img 
                     src="${currentImage}" 
-                    style="${imgStyle}" 
+                    style="
+                        max-width: 100%;
+                        max-height: ${maxHeight};
+                        width: auto;
+                        height: auto;
+                        object-fit: contain;
+                        border-radius: 8px;
+                        ${imagePosition === 'left' || imagePosition === 'right' ? 'display: block;' : ''}
+                    " 
                     alt="Nahraný obrázek"
                     class="banner-image"
+                    draggable="false"
                 >
             </div>`;
             
@@ -1881,20 +1916,40 @@ function updateBannerPreview() {
                 ${bannerTextContent}
             </div>`;
         
-        // Get background style - handle both gradient and solid colors
+        // Get all styles from template or use defaults
-        let backgroundStyle = '';
+        const styles = {
-        if (template.background && template.background.includes('gradient')) {
+            // Background styles
-            // Use the gradient from template
+            background: template.background || '',
-            backgroundStyle = `background: ${template.background};`;
+            backgroundColor: bannerBgColorPicker?.value || template.backgroundColor || '#f8f9fa',
-        } else if (currentTemplate === 'dark') {
+            
-            // Special handling for dark theme
+            // Text styles
-            backgroundStyle = 'background: #2d3748;';
+            color: bannerTextColorPicker?.value || template.textColor || '#212529',
-        } else {
+            textColor: bannerTextColorPicker?.value || template.textColor || '#212529',
-            // Use custom background or template's background color
+            textAlign: template.textAlign || 'left',
-            const bgColor = bannerBgColorPicker?.value || template?.backgroundColor || '#f8f9fa';
+            fontSize: template.fontSize ? `${template.fontSize}px` : '16px',
-            backgroundStyle = `background-color: ${bgColor};`;
+            
+            // Layout styles
+            padding: template.padding ? `${template.padding}px` : '20px',
+            margin: template.margin ? `${template.margin}px` : '20px',
+            borderRadius: template.borderRadius ? `${template.borderRadius}px` : '8px',
+            
+            // Container styles
+            containerStyle: template.containerStyle || ''
+        };
+
+        // Special handling for specific templates
+        if (currentTemplate === 'dark') {
+            styles.background = '#2d3748';
+            styles.backgroundColor = '#2d3748';
+            styles.color = '#e2e8f0';
+            styles.textColor = '#e2e8f0';
         }
 
+        // Build the background style
+        let backgroundStyle = styles.background.includes('gradient') 
+            ? `background: ${styles.background};`
+            : `background-color: ${styles.backgroundColor};`;
+            
         // Create container with proper layout
         bannerContent = `
             <div class="banner-content" style="
@@ -1914,6 +1969,8 @@ function updateBannerPreview() {
                 margin: ${styles.margin};
                 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                 min-height: 200px;
+                max-width: 1200px;
+                margin: 0 auto;
             ">
                 ${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
                 <div style="flex: 1;">

index.html

@@ -122,20 +122,27 @@
                     `;
                     
                     // Create image container
+                    // Set max dimensions for the image
+                    const maxImageWidth = imagePosition === 'left' || imagePosition === 'right' ? '40%' : '100%';
+                    const maxImageHeight = '200px';
+                    
                     let imgContainer = `
                         <div class="banner-image-container" style="
                             display: block;
                             max-width: 100%;
-                            text-align: center;
+                            text-align: ${imagePosition === 'left' ? 'left' : imagePosition === 'right' ? 'right' : 'center'};
-                            ${imagePosition === 'top' || imagePosition === 'bottom' ? 'margin-bottom: 20px;' : ''}
+                            ${imagePosition === 'left' || imagePosition === 'right' ? 'float: ' + imagePosition + '; margin: 0 20px 20px 0;' : ''}
+                            ${imagePosition === 'left' || imagePosition === 'right' ? 'max-width: ' + maxImageWidth + ';' : ''}
                         ">
-                            <img 
+                            <img src="${imageUrl}" style="
-                                src="${imageUrl}" 
+                                max-width: 100%;
-                                style="${imgStyle}" 
+                                max-height: ${maxImageHeight};
-                                alt="Banner obrázek"
+                                width: auto;
-                                class="banner-image"
+                                height: auto;
-                                onerror="console.error('Failed to load banner image:', this.src)"
+                                object-fit: contain;
-                            >
+                                border-radius: ${borderRadius}px;
+                                ${imagePosition === 'left' || imagePosition === 'right' ? 'float: ' + imagePosition + ';' : ''}
+                            " alt="Banner obrázek" class="banner-image" onerror="console.error('Failed to load banner image:', this.src)">
                         </div>`;
                         
                     // Add image to content