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

fix(layout): quitar dos columnas global y usar solo drag por bloque

Browse Source
This commit is contained in:
komkida91
2026-02-14 20:34:16 +01:00
parent f2fbc6eedd
commit f9f7d23b8d
1 changed files with 16 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
elementor/templates/elementor_builder.html
View File

@@ -377,7 +377,6 @@
<details class="acc"> <details class="acc">
<summary>Layout</summary> <summary>Layout</summary>
<div class="acc-body"> <div class="acc-body">
<div class="row"><label>Layout 2 columnas</label><input id="twoColToggle" type="checkbox"></div>
<div class="row"><label>Animaciones</label><input id="animToggle" type="checkbox"></div> <div class="row"><label>Animaciones</label><input id="animToggle" type="checkbox"></div>
</div> </div>
</details> </details>
@@ -401,7 +400,6 @@
free_drag: false, free_drag: false,
bg_color2: "#e9eef5", bg_color2: "#e9eef5",
bg_gradient: false, bg_gradient: false,
two_col: false,
animations: true, animations: true,
theme: "light", theme: "light",
bg_motion: "none", bg_motion: "none",
@@ -952,9 +950,9 @@ const state = {
const inner = document.createElement("div"); const inner = document.createElement("div");
inner.style.position = "relative"; inner.style.position = "relative";
inner.style.zIndex = "1"; inner.style.zIndex = "1";
if (!state.settings.free_drag && state.settings.two_col){ if (!state.settings.free_drag){
inner.style.display = "grid"; inner.style.display = "flex";
inner.style.gridTemplateColumns = "repeat(2,minmax(0,1fr))"; inner.style.flexWrap = "wrap";
inner.style.gap = "16px"; inner.style.gap = "16px";
inner.style.width = "100%"; inner.style.width = "100%";
} }
@@ -976,7 +974,7 @@ const state = {
el.style.left = "0px"; el.style.left = "0px";
el.style.top = "0px"; el.style.top = "0px";
el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`; el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
const defaultWidth = block.type === "menu" ? 90 : (state.settings.two_col ? 48 : 70); const defaultWidth = block.type === "menu" ? 90 : 70;
const w = Math.max(30, Math.min(100, Number(block.data?.width || defaultWidth))); const w = Math.max(30, Math.min(100, Number(block.data?.width || defaultWidth)));
el.style.width = `${w}%`; el.style.width = `${w}%`;
const h = Number(block.data?.height || 0); const h = Number(block.data?.height || 0);
@@ -984,20 +982,14 @@ const state = {
el.style.cursor = "grab"; el.style.cursor = "grab";
} else { } else {
el.style.transform = ""; el.style.transform = "";
if (state.settings.two_col){ const isFullWidth = block.type === "menu" || !!block.data?.full_width;
const isFullWidth = block.type === "menu" || !!block.data?.full_width; if (isFullWidth){
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))); const w = Math.max(30, Math.min(100, Number(block.data?.width || 100)));
el.style.width = `${w}%`; el.style.width = `${w}%`;
el.style.flex = "0 0 100%";
} else {
el.style.width = "calc(50% - 8px)";
el.style.flex = "0 0 calc(50% - 8px)";
} }
} }
el.innerHTML = renderBlockHtml(block); el.innerHTML = renderBlockHtml(block);
@@ -1090,7 +1082,7 @@ const state = {
function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; } function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; }
function resolveFullWidthByDropX(container, clientX){ function resolveFullWidthByDropX(container, clientX){
if (state.settings.free_drag || !state.settings.two_col) return null; if (state.settings.free_drag) return null;
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
if (!rect || !rect.width) return null; if (!rect || !rect.width) return null;
const ratio = (clientX - rect.left) / rect.width; const ratio = (clientX - rect.left) / rect.width;
@@ -1110,7 +1102,7 @@ const state = {
} }
function addBlock(type,index=state.blocks.length){ function addBlock(type,index=state.blocks.length){
const b={ id: makeId(), type, data: defaultData(type) }; const b={ id: makeId(), type, data: defaultData(type) };
if (!state.settings.free_drag && state.settings.two_col && type !== "menu"){ if (!state.settings.free_drag && type !== "menu"){
b.data.full_width = false; b.data.full_width = false;
} }
if (BUILDER_MODE === "ub24"){ b.page = currentPage; } if (BUILDER_MODE === "ub24"){ b.page = currentPage; }
@@ -1138,7 +1130,7 @@ const state = {
const input=(label,id,val)=>`<div class="row"><label>${label}</label><input id="${id}" type="text" value="${escapeHtml(val||"")}"></div>`; 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))); 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>`; 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"){ if (!state.settings.free_drag && block.type !== "menu"){
html += `<div class="row"><label>Ancho completo</label><input id="blockFullWidth" type="checkbox" ${data.full_width ? "checked" : ""}></div>`; html += `<div class="row"><label>Ancho completo</label><input id="blockFullWidth" type="checkbox" ${data.full_width ? "checked" : ""}></div>`;
} }
if (block.type==="menu"){ if (block.type==="menu"){
@@ -1594,7 +1586,6 @@ const state = {
const bgColor=document.getElementById("bgColorInput"); const bgColor=document.getElementById("bgColorInput");
const bgColor2=document.getElementById("bgColor2Input"); const bgColor2=document.getElementById("bgColor2Input");
const bgGradient=document.getElementById("bgGradientToggle"); const bgGradient=document.getElementById("bgGradientToggle");
const twoCol=document.getElementById("twoColToggle");
const textColor=document.getElementById("textColorInput"); const textColor=document.getElementById("textColorInput");
const mutedColor=document.getElementById("mutedColorInput"); const mutedColor=document.getElementById("mutedColorInput");
const fontBody=document.getElementById("fontBodySelect"); const fontBody=document.getElementById("fontBodySelect");
@@ -1610,7 +1601,6 @@ const state = {
siteName.value=s.site_name||""; primary.value=s.primary_color||"#59d9c8"; siteName.value=s.site_name||""; primary.value=s.primary_color||"#59d9c8";
bgColor.value=s.bg_color||"#f6f7fb"; bgColor2.value=s.bg_color2||"#e9eef5"; bgGradient.checked=!!s.bg_gradient; bgColor.value=s.bg_color||"#f6f7fb"; bgColor2.value=s.bg_color2||"#e9eef5"; bgGradient.checked=!!s.bg_gradient;
bgMotion.value=s.bg_motion||"none"; bgMotion.value=s.bg_motion||"none";
twoCol.checked=!!s.two_col;
textColor.value=s.text_color||"#0b0c10"; mutedColor.value=s.muted_color||"#6b7280"; textColor.value=s.text_color||"#0b0c10"; mutedColor.value=s.muted_color||"#6b7280";
fontBody.value=s.font_body||"Manrope"; fontHeading.value=s.font_heading||"Manrope"; fontBody.value=s.font_body||"Manrope"; fontHeading.value=s.font_heading||"Manrope";
logoDrop.textContent = s.logo_url ? "Logo cargado" : "Suelta imagen o click"; logoDrop.textContent = s.logo_url ? "Logo cargado" : "Suelta imagen o click";
@@ -1624,7 +1614,6 @@ const state = {
bgColor2.addEventListener("input",()=>{ s.bg_color2=bgColor2.value; renderPreview(); }); bgColor2.addEventListener("input",()=>{ s.bg_color2=bgColor2.value; renderPreview(); });
bgGradient.addEventListener("change",()=>{ s.bg_gradient=bgGradient.checked; renderPreview(); }); bgGradient.addEventListener("change",()=>{ s.bg_gradient=bgGradient.checked; renderPreview(); });
bgMotion.addEventListener("change",()=>{ s.bg_motion=bgMotion.value; renderPreview(); }); bgMotion.addEventListener("change",()=>{ s.bg_motion=bgMotion.value; renderPreview(); });
twoCol.addEventListener("change",()=>{ s.two_col=twoCol.checked; renderPreview(); });
textColor.addEventListener("input",()=>{ s.text_color=textColor.value; renderPreview(); }); textColor.addEventListener("input",()=>{ s.text_color=textColor.value; renderPreview(); });
mutedColor.addEventListener("input",()=>{ s.muted_color=mutedColor.value; renderPreview(); }); mutedColor.addEventListener("input",()=>{ s.muted_color=mutedColor.value; renderPreview(); });
fontBody.addEventListener("change",()=>{ s.font_body=fontBody.value; renderPreview(); }); fontBody.addEventListener("change",()=>{ s.font_body=fontBody.value; renderPreview(); });
@@ -1805,11 +1794,11 @@ const state = {
} }
if (sidebar) sidebar.style.display = isPreview ? "none" : ""; if (sidebar) sidebar.style.display = isPreview ? "none" : "";
if (inspector) inspector.style.display = isPreview ? "none" : ""; if (inspector) inspector.style.display = isPreview ? "none" : "";
if (main) main.style.padding = isPreview ? "8px" : ""; if (main) main.style.padding = isPreview ? "0" : "";
if (shell){ if (shell){
if (isPreview){ if (isPreview){
shell.style.maxWidth = "100%"; shell.style.maxWidth = "100%";
shell.style.margin = "8px auto"; shell.style.margin = "0";
shell.classList.remove("size-phone","size-tablet","size-desktop"); shell.classList.remove("size-phone","size-tablet","size-desktop");
shell.classList.add("size-desktop"); shell.classList.add("size-desktop");
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{ ["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
@@ -1836,7 +1825,7 @@ const state = {
if (fullPageBtn){ if (fullPageBtn){
fullPageBtn.addEventListener("click",()=>{ fullPageBtn.addEventListener("click",()=>{
const url = `${window.location.pathname}?full=1`; const url = `${window.location.pathname}?full=1`;
window.open(url, "_blank", "noopener"); window.location.href = url;
}); });
} }
if (FULL_PAGE_MODE && previewBtn && !document.body.classList.contains("preview-mode")){ if (FULL_PAGE_MODE && previewBtn && !document.body.classList.contains("preview-mode")){