admin/gkachele-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): ancho total y dos columnas con control por bloque

Browse Source
This commit is contained in:
komkida91
2026-02-14 20:17:54 +01:00
parent df641372fa
commit e5df6de8fc
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
elementor/templates/elementor_builder.html
View File

@@ -17,7 +17,7 @@
.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#59d9c8,#7aa7ff)}
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:12px 0 8px}
.block-item{background:var(--panel2);border:1px solid var(--border);padding:8px 10px;border-radius:10px;margin-bottom:8px;cursor:grab}
.main{padding:18px}
.main{padding:10px}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.save-status{font-size:12px;color:var(--muted);min-width:150px;text-align:right}
.save-status.ok{color:#34d399}
@@ -28,7 +28,7 @@
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center}
.btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(89,217,200,.15)}
.preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:none;margin:0 auto}
.preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:0;width:100%;max-width:none;margin:0 auto}
body.ub24 .preview-shell{background:#eef1f6;border-color:#e5e7eb}
body.ub24 .apple-bar{display:none}
body.ub24 .preview-shell{padding:0;border-radius:12px}
@@ -49,7 +49,7 @@
.apple-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px}
.apple-dot{width:9px;height:9px;border-radius:50%}
.red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80}
.canvas{min-height:700px;padding:34px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
.canvas{min-height:700px;padding:18px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)}
.block{background:var(--site-card,#fff);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid transparent;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:fadeUp .25s ease;color:var(--site-text,#0b0c10);position:relative;will-change:transform;cursor:grab}
.block.dragging,.block.resizing{transition:none;cursor:grabbing}
body.dragging{user-select:none}
@@ -485,7 +485,7 @@ const state = {
}
function defaultData(type){
switch(type){
case "menu": return { title:"Menu", items:[], menu_mode:"both" };
case "menu": return { title:"Menu", items:[], menu_mode:"both", full_width:true };
case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" };
case "text": return { text:"Describe tu negocio aqui." };
case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" };
@@ -952,8 +952,9 @@ const state = {
inner.style.zIndex = "1";
if (!state.settings.free_drag && state.settings.two_col){
inner.style.display = "grid";
inner.style.gridTemplateColumns = "1fr 1fr";
inner.style.gridTemplateColumns = "repeat(2,minmax(0,1fr))";
inner.style.gap = "16px";
inner.style.width = "100%";
}
canvas.appendChild(inner);
if (!state.blocks.length){ inner.innerHTML = '<div class="empty">Arrastra bloques para empezar.</div>'; return; }
@@ -982,10 +983,15 @@ const state = {
} else {
el.style.transform = "";
if (state.settings.two_col){
const fullTypes = ["menu","hero","gallery","contact","video","map","calendar"];
if (fullTypes.includes(block.type)){ el.style.gridColumn = "1 / -1"; }
const w = Math.max(30, Math.min(100, Number(block.data?.width || 100)));
el.style.width = `${w}%`;
const isFullWidth = block.type === "menu" || !!block.data?.full_width;
if (isFullWidth){
el.style.gridColumn = "1 / -1";
const w = Math.max(30, Math.min(100, Number(block.data?.width || 100)));
el.style.width = `${w}%`;
} else {
el.style.gridColumn = "";
el.style.width = "100%";
}
el.style.justifySelf = "start";
} else {
const w = Math.max(30, Math.min(100, Number(block.data?.width || 100)));
@@ -1116,6 +1122,9 @@ const state = {
const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`;
const widthVal = Math.max(30, Math.min(100, Number(data.width || 100)));
html += `<div class="row"><label>Ancho bloque (%)</label><input id="blockWidth" type="range" min="30" max="100" value="${widthVal}"><div id="blockWidthValue" style="margin-top:4px;color:var(--muted);font-size:12px">${widthVal}%</div></div>`;
if (!state.settings.free_drag && state.settings.two_col && block.type !== "menu"){
html += `<div class="row"><label>Ancho completo</label><input id="blockFullWidth" type="checkbox" ${data.full_width ? "checked" : ""}></div>`;
}
if (block.type==="menu"){
html+=input("Titulo","menuTitle",data.title);
const mm = escapeHtml(data.menu_mode || "both");
@@ -1240,6 +1249,10 @@ const state = {
if (widthEl){
block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100)));
}
const fullWidthEl = document.getElementById("blockFullWidth");
if (fullWidthEl && block.type !== "menu"){
block.data.full_width = !!fullWidthEl.checked;
}
if (block.type==="menu"){
block.data.title=document.getElementById("menuTitle").value;
const mm = document.getElementById("menuMode");