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

rrr

Browse Source
This commit is contained in:
Tomas Dvorak
2025-05-29 11:30:13 +02:00
parent 9c35263d2f
commit 24eec9a867
1 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dashboard.html
+66 -49
View File
@@ -1133,10 +1133,14 @@ document.addEventListener('DOMContentLoaded', () => {
const bannerImagePreview = document.getElementById('bannerImagePreview'); const bannerImagePreview = document.getElementById('bannerImagePreview');
const uploadPrompt = document.getElementById('uploadPrompt'); const uploadPrompt = document.getElementById('uploadPrompt');
const imagePreview = document.getElementById('imagePreview'); const imagePreview = document.getElementById('imagePreview');
const imagePreviewContainer = document.getElementById('imagePreviewContainer');
if (bannerImagePreview) { if (bannerImagePreview) {
bannerImagePreview.src = currentImage; bannerImagePreview.src = currentImage;
bannerImagePreview.style.display = 'block'; bannerImagePreview.style.display = 'block';
bannerImagePreview.style.maxWidth = '100%';
bannerImagePreview.style.maxHeight = '200px';
bannerImagePreview.style.objectFit = 'contain';
} }
if (uploadPrompt) { if (uploadPrompt) {
@@ -1147,6 +1151,11 @@ document.addEventListener('DOMContentLoaded', () => {
imagePreview.style.display = 'block'; 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 handling image preview:', error);
@@ -1899,47 +1908,49 @@ function updateBannerPreview() {
const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200'); const imageHeight = parseInt(document.getElementById('bannerImageHeight')?.value || '200');
const imagePosition = document.getElementById('bannerImagePosition')?.value || 'right'; const imagePosition = document.getElementById('bannerImagePosition')?.value || 'right';
// Create image element with template styles and dynamic dimensions
const imgStyle = `
max-width: 100%;
height: auto;
width: ${imageWidth}px;
max-height: ${imageHeight}px;
object-fit: contain;
border-radius: ${template?.BorderRadius || '8'}px;
${imagePosition === 'left' ? 'float: left; margin-right: 20px;' : ''}
${imagePosition === 'right' ? 'float: right; margin-left: 20px;' : ''}
${imagePosition === 'center' ? 'display: block; margin: 0 auto;' : ''}
`;
// Create image container with proper styling and positioning // Create image container with proper styling and positioning
const maxWidth = imagePosition === 'left' || imagePosition === 'right' ? '30%' : '100%'; const isSideBySide = imagePosition === 'left' || imagePosition === 'right';
const maxHeight = '200px'; const maxWidth = isSideBySide ? '40%' : '100%';
const maxHeight = isSideBySide ? '300px' : '200px';
// Create flex container for better layout control
let imgContainer = ` let imgContainer = `
<div class="banner-image-container" style=" <div class="banner-image-container" style="
display: block; flex: 0 0 auto;
display: flex;
max-width: ${maxWidth}; max-width: ${maxWidth};
text-align: ${imagePosition === 'left' ? 'left' : imagePosition === 'right' ? 'right' : 'center'}; ${isSideBySide ? 'width: 30%;' : 'width: 100%;'}
${imagePosition === 'left' ? 'margin-right: 20px;' : ''} ${imagePosition === 'left' ? 'justify-content: flex-start;' : ''}
${imagePosition === 'right' ? 'margin-left: 20px;' : ''} ${imagePosition === 'right' ? 'justify-content: flex-end;' : ''}
${imagePosition === 'left' || imagePosition === 'right' ? '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;' : ''}
"> ">
<img <div style="
src="${currentImage}" position: relative;
style=" width: 100%;
max-width: 100%; height: 100%;
max-height: ${maxHeight}; display: flex;
width: auto; justify-content: ${imagePosition === 'left' ? 'flex-start' : imagePosition === 'right' ? 'flex-end' : 'center'};
height: auto; align-items: center;
object-fit: contain; ">
border-radius: 8px; <img
${imagePosition === 'left' || imagePosition === 'right' ? 'display: block;' : ''} src="${currentImage}"
" style="
alt="Nahraný obrázek" max-width: 100%;
class="banner-image" max-height: ${maxHeight};
draggable="false" width: auto;
> height: auto;
object-fit: contain;
border-radius: 8px;
display: block;
"
alt="Nahraný obrázek"
class="banner-image"
draggable="false"
>
</div>
</div>`; </div>`;
// Wrap image with link if URL is provided // Wrap image with link if URL is provided
@@ -2010,29 +2021,35 @@ function updateBannerPreview() {
: `background-color: ${styles.backgroundColor};`; : `background-color: ${styles.backgroundColor};`;
// Create container with proper layout // Create container with proper layout
const isVerticalLayout = imagePosition === 'top' || imagePosition === 'bottom';
bannerContent = ` bannerContent = `
<div class="banner-content" style=" <div class="banner-content" style="
${styles.containerStyle}
${backgroundStyle}
color: ${styles.color};
text-align: ${styles.textAlign};
font-size: ${styles.fontSize};
padding: ${styles.padding};
overflow: hidden;
display: flex; display: flex;
flex-direction: ${imagePosition === 'bottom' ? 'column' : 'row'}; flex-direction: ${isVerticalLayout ? 'column' : 'row'};
flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 20px; padding: ${styles.padding};
border-radius: ${styles.borderRadius};
margin: ${styles.margin}; margin: ${styles.margin};
box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: ${styles.background || styles.backgroundColor};
min-height: 200px; color: ${styles.color};
border-radius: ${styles.borderRadius};
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
${styles.containerStyle};
gap: 20px;
width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; box-sizing: border-box;
margin-left: auto;
margin-right: auto;
"> ">
${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''} ${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
<div style="flex: 1; width: 100%;"> <div style="
flex: ${isVerticalLayout ? '0 1 auto' : '1'};
width: ${isVerticalLayout ? '100%' : 'auto'};
text-align: ${styles.textAlign};
font-size: ${styles.fontSize};
">
${textElement} ${textElement}
</div> </div>
${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''} ${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''}