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 09:37:26 +02:00
parent e795aec55d
commit 82a4220651
1 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+43 -28
View File
@@ -56,38 +56,44 @@
const margin = style.Margin || '20px'; const margin = style.Margin || '20px';
const imagePosition = style.ImagePosition || 'right'; const imagePosition = style.ImagePosition || 'right';
// Create banner content container // Create banner content container with proper styling
let content = ` const bannerStyle = `
<div style=" background-color: ${backgroundColor};
background-color: ${backgroundColor}; color: ${textColor};
color: ${textColor}; text-align: ${textAlign};
text-align: ${textAlign}; font-size: ${fontSize};
font-size: ${fontSize}; padding: ${padding};
padding: ${padding}; margin: ${margin} 0;
margin: ${margin} 0; border-radius: ${borderRadius}px;
border-radius: ${borderRadius}px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden;
overflow: hidden; display: block;
"> width: 100%;
box-sizing: border-box;
`; `;
// Start building banner content
let content = `<div style="${bannerStyle}">`;
// Handle image if it exists // Handle image if it exists
if (banner.Image) { if (banner.image) {
const imageUrl = banner.Image.startsWith('http') ? banner.Image : banner.Image; const imageUrl = banner.image.startsWith('http') ? banner.image : banner.image;
const imageWidth = style.ImageWidth || 300; // Use default dimensions if not specified or 0
const imageHeight = style.ImageHeight || 200; const imageWidth = (style.imageWidth && style.imageWidth > 0) ? style.imageWidth : 300;
const imageHeight = (style.imageHeight && style.imageHeight > 0) ? style.imageHeight : 'auto';
// Create image element with styles // Create image element with styles
const imgStyle = ` const imgStyle = `
max-width: 100%; max-width: 100%;
height: auto; height: ${imageHeight === 'auto' ? 'auto' : imageHeight + 'px'};
width: ${imageWidth}px; width: ${imageWidth}px;
max-height: ${imageHeight}px;
object-fit: contain; object-fit: contain;
border-radius: ${borderRadius}px; border-radius: ${borderRadius}px;
${imagePosition === 'left' ? 'float: left; margin-right: 20px;' : ''} ${imagePosition === 'left' ? 'float: left; margin: 0 20px 10px 0;' : ''}
${imagePosition === 'right' ? 'float: right; margin-left: 20px;' : ''} ${imagePosition === 'right' ? 'float: right; margin: 0 0 10px 20px;' : ''}
${imagePosition === 'center' ? 'display: block; margin: 0 auto 20px;' : ''} ${imagePosition === 'center' ? 'display: block; margin: 0 auto 20px;' : ''}
${imagePosition === 'top' ? 'display: block; margin: 0 auto 20px;' : ''}
${imagePosition === 'bottom' ? 'display: block; margin: 20px auto 0;' : ''}
`; `;
// Create image container // Create image container
@@ -118,15 +124,19 @@
content += imgContainer; content += imgContainer;
} }
// Add text content // Add text content with proper spacing
if (banner.Text) { if (banner.Text) {
const textStyle = `
margin: 0;
padding: 10px;
line-height: 1.6;
${['left', 'right'].includes(imagePosition) ? 'overflow: hidden;' : 'display: block;'}
${imagePosition === 'left' ? 'padding-left: 20px;' : ''}
${imagePosition === 'right' ? 'padding-right: 20px;' : ''}
`;
content += ` content += `
<div class="banner-text" style=" <div class="banner-text" style="${textStyle}">
margin: 0;
padding: 0;
line-height: 1.5;
${imagePosition === 'left' || imagePosition === 'right' ? 'overflow: hidden;' : ''}
">
${banner.Text.replace(/\n/g, '<br>')} ${banner.Text.replace(/\n/g, '<br>')}
</div>`; </div>`;
} }
@@ -135,6 +145,11 @@
if (['right', 'bottom'].includes(imagePosition)) { if (['right', 'bottom'].includes(imagePosition)) {
content += imgContainer; content += imgContainer;
} }
// Add clearfix if needed
if (['left', 'right'].includes(imagePosition)) {
content += '<div style="clear: both;"></div>';
}
} else { } else {
// No image, just show text // No image, just show text
if (banner.Text) { if (banner.Text) {