admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrige proporção de cartazes, layout paisagem e recorte de imagens ilustrativas

Browse Source
This commit is contained in:
admtracksteel
2026-06-07 16:09:40 +00:00
parent 03f9317853
commit f81b7c0f5c
3 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+54 -3
View File
@@ -6998,7 +6998,51 @@ document.addEventListener('DOMContentLoaded', () => {
cartazPrintableArea.style.backgroundColor = bg;
cartazPrintableArea.style.color = text;
cartazPrintableArea.style.fontFamily = font;
cartazPrintableArea.style.maxWidth = orientacao === 'paisagem' ? '800px' : '500px';
if (orientacao === 'paisagem') {
cartazPrintableArea.style.maxWidth = '800px';
cartazPrintableArea.style.aspectRatio = '1.414 / 1';
cartazPrintableArea.style.height = 'auto';
cartazPreviewContent.style.flexDirection = 'row';
cartazPreviewContent.style.flexWrap = 'wrap';
cartazPreviewContent.style.justifyContent = 'center';
cartazPreviewContent.style.alignContent = 'flex-start';
cartazPreviewContent.style.gap = '12px';
setTimeout(() => {
Array.from(cartazPreviewContent.children).forEach(child => {
child.style.flex = '1 1 calc(50% - 12px)';
child.style.boxSizing = 'border-box';
child.style.margin = '0';
child.style.background = 'rgba(255,255,255,0.25)';
child.style.padding = '12px';
child.style.borderRadius = '8px';
child.style.border = '1px solid rgba(0,0,0,0.05)';
});
}, 0);
} else {
cartazPrintableArea.style.maxWidth = '500px';
cartazPrintableArea.style.aspectRatio = '1 / 1.414';
cartazPrintableArea.style.height = 'auto';
cartazPreviewContent.style.flexDirection = 'column';
cartazPreviewContent.style.flexWrap = 'nowrap';
cartazPreviewContent.style.justifyContent = 'flex-start';
cartazPreviewContent.style.gap = '12px';
setTimeout(() => {
Array.from(cartazPreviewContent.children).forEach(child => {
child.style.flex = '0 0 auto';
child.style.width = '100%';
child.style.boxSizing = 'border-box';
child.style.margin = '0';
child.style.background = 'rgba(255,255,255,0.25)';
child.style.padding = '12px';
child.style.borderRadius = '8px';
child.style.border = '1px solid rgba(0,0,0,0.05)';
});
}, 0);
}
cartazPreviewTitle.textContent = title;
cartazPreviewTitle.style.borderColor = text;
@@ -7124,7 +7168,7 @@ document.addEventListener('DOMContentLoaded', () => {
const orientacao = document.getElementById('cartazOrientacaoSelect') ? document.getElementById('cartazOrientacaoSelect').value : 'retrato';
const imgContainerHtml = cartazPreviewImageContainer.style.display === 'block'
? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; max-height: 400px; border: 2px solid rgba(0,0,0,0.1);"><img src="${cartazPreviewImage.src}" style="width: 100%; height: 100%; object-fit: cover;"></div>`
? `<div style="width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; border: 2px solid rgba(0,0,0,0.1); text-align: center; background: rgba(0,0,0,0.02);"><img src="${cartazPreviewImage.src}" style="max-width: 100%; max-height: 350px; object-fit: contain; display: inline-block;"></div>`
: '';
const printWindow = window.open('', '_blank');
@@ -7157,9 +7201,12 @@ document.addEventListener('DOMContentLoaded', () => {
border-radius: 16px;
width: 100%;
max-width: ${orientacao === 'paisagem' ? '1200px' : '800px'};
aspect-ratio: ${orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414'};
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border: ${border === 'none' ? 'none' : `${border} ${text}`};
display: flex;
flex-direction: column;
}
h1 {
text-align: center;
@@ -7173,17 +7220,21 @@ document.addEventListener('DOMContentLoaded', () => {
font-size: 1.5rem;
line-height: 1.6;
display: flex;
flex-direction: ${orientacao === 'paisagem' ? 'row' : 'column'};
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
/* Suporte para cards na content-area */
.content-area > div, .content-area > p, .content-area > ul {
box-sizing: border-box;
background: rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
width: 100%;
width: ${orientacao === 'paisagem' ? 'calc(50% - 20px)' : '100%'};
flex: ${orientacao === 'paisagem' ? '1 1 calc(50% - 20px)' : '0 0 auto'};
margin: 0;
}
ul {
margin-left: 20px;
public/index.html
+3 -3
View File
@@ -1868,12 +1868,12 @@
<h1 id="cartazPreviewTitle" style="text-align: center; margin-top: 0; font-size: 2.2rem; border-bottom: 2px solid; padding-bottom: 12px; margin-bottom: 20px;">Título do Cartaz</h1>
<!-- Área da Imagem IA no Cartaz -->
<div id="cartazPreviewImageContainer" style="display: none; width: 100%; margin-bottom: 20px; border-radius: 8px; overflow: hidden; max-height: 250px; border: 2px solid rgba(0,0,0,0.1);">
<img id="cartazPreviewImage" src="" style="width: 100%; height: 100%; object-fit: cover;">
<div id="cartazPreviewImageContainer" style="display: none; width: 100%; margin-bottom: 20px; border-radius: 8px; border: 2px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); text-align: center; overflow: hidden;">
<img id="cartazPreviewImage" src="" style="max-width: 100%; max-height: 240px; object-fit: contain; display: inline-block; vertical-align: middle;">
</div>
<!-- Conteúdo de Texto do Cartaz -->
<div id="cartazPreviewContent" style="font-size: 1.1rem; line-height: 1.6; flex: 1;">
<div id="cartazPreviewContent" style="font-size: 1.1rem; line-height: 1.6; flex: 1; display: flex; flex-direction: column; gap: 12px;">
<p style="text-align: center; color: #718096; font-style: italic;">Clique em "Criar Cartaz Pedagógico" para que a assistente monte e estruture o cartaz ideal para você.</p>
</div>
</div>