Aplica container queries e limites rígidos de dimensões aos 8 formatos de cartazes
This commit is contained in:
+25
-7
@@ -6999,10 +6999,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
cartazPrintableArea.style.color = text;
|
||||
cartazPrintableArea.style.fontFamily = font;
|
||||
|
||||
if (orientacao === 'paisagem') {
|
||||
cartazPrintableArea.style.maxWidth = '800px';
|
||||
cartazPrintableArea.style.aspectRatio = '1.414 / 1';
|
||||
const tamanho = document.getElementById('cartazTamanhoSelect') ? document.getElementById('cartazTamanhoSelect').value : 'A4';
|
||||
|
||||
const FORMAT_SIZES = {
|
||||
'A4': { retrato: 380, paisagem: 537 },
|
||||
'A3': { retrato: 480, paisagem: 679 },
|
||||
'A2': { retrato: 580, paisagem: 820 },
|
||||
'A1': { retrato: 680, paisagem: 962 }
|
||||
};
|
||||
|
||||
const maxW = FORMAT_SIZES[tamanho]?.[orientacao] || FORMAT_SIZES['A4']['retrato'];
|
||||
|
||||
cartazPrintableArea.style.width = '100%';
|
||||
cartazPrintableArea.style.maxWidth = `${maxW}px`;
|
||||
cartazPrintableArea.style.aspectRatio = orientacao === 'paisagem' ? '1.414 / 1' : '1 / 1.414';
|
||||
cartazPrintableArea.style.height = 'auto';
|
||||
|
||||
if (orientacao === 'paisagem') {
|
||||
cartazPreviewContent.style.flexDirection = 'row';
|
||||
cartazPreviewContent.style.flexWrap = 'wrap';
|
||||
cartazPreviewContent.style.justifyContent = 'center';
|
||||
@@ -7021,9 +7034,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
}, 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';
|
||||
@@ -7053,7 +7063,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
[cartazBgColor, cartazTextColor, cartazFontSelect, cartazBorderSelect, cartazTituloInput, document.getElementById('cartazOrientacaoSelect')].forEach(elem => {
|
||||
[
|
||||
cartazBgColor,
|
||||
cartazTextColor,
|
||||
cartazFontSelect,
|
||||
cartazBorderSelect,
|
||||
cartazTituloInput,
|
||||
document.getElementById('cartazOrientacaoSelect'),
|
||||
document.getElementById('cartazTamanhoSelect')
|
||||
].forEach(elem => {
|
||||
if (elem) elem.addEventListener('input', updateLivePreview);
|
||||
if (elem && elem.tagName === 'SELECT') elem.addEventListener('change', updateLivePreview);
|
||||
});
|
||||
|
||||
@@ -3623,6 +3623,68 @@ code {
|
||||
100% { border-color: var(--border-light, #262626); }
|
||||
}
|
||||
|
||||
/* Estilos para o Preview do Cartaz (Estúdio de Cartazes PedaGog) */
|
||||
#cartazPrintableArea {
|
||||
container-type: inline-size;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden !important; /* STRICT LIMIT: nothing overflows the paper! */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Garante que o conteúdo de texto se ajuste */
|
||||
#cartazPreviewContent {
|
||||
font-size: 3.5cqw !important;
|
||||
line-height: 1.4 !important;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 3cqw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#cartazPreviewContent > div,
|
||||
#cartazPreviewContent > p,
|
||||
#cartazPreviewContent > ul {
|
||||
box-sizing: border-box !important;
|
||||
padding: 3.5cqw !important;
|
||||
border-radius: 2cqw !important;
|
||||
font-size: 3cqw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#cartazPreviewContent h2,
|
||||
#cartazPreviewContent h3 {
|
||||
font-size: 4.5cqw !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 2cqw !important;
|
||||
}
|
||||
|
||||
#cartazPreviewContent li {
|
||||
font-size: 2.8cqw !important;
|
||||
margin-bottom: 1.5cqw !important;
|
||||
}
|
||||
|
||||
/* Título principal do cartaz */
|
||||
#cartazPreviewTitle {
|
||||
font-size: 7cqw !important;
|
||||
border-bottom-width: 0.5cqw !important;
|
||||
padding-bottom: 2cqw !important;
|
||||
margin-bottom: 4cqw !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Imagem ilustrativa */
|
||||
#cartazPreviewImageContainer {
|
||||
margin-bottom: 3cqw !important;
|
||||
border-radius: 2cqw !important;
|
||||
max-height: 35% !important;
|
||||
}
|
||||
|
||||
#cartazPreviewImage {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user