fix(layout): quitar dos columnas global y usar solo drag por bloque
This commit is contained in:
@@ -377,7 +377,6 @@
|
||||
<details class="acc">
|
||||
<summary>Layout</summary>
|
||||
<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>
|
||||
</details>
|
||||
@@ -401,7 +400,6 @@
|
||||
free_drag: false,
|
||||
bg_color2: "#e9eef5",
|
||||
bg_gradient: false,
|
||||
two_col: false,
|
||||
animations: true,
|
||||
theme: "light",
|
||||
bg_motion: "none",
|
||||
@@ -952,9 +950,9 @@ const state = {
|
||||
const inner = document.createElement("div");
|
||||
inner.style.position = "relative";
|
||||
inner.style.zIndex = "1";
|
||||
if (!state.settings.free_drag && state.settings.two_col){
|
||||
inner.style.display = "grid";
|
||||
inner.style.gridTemplateColumns = "repeat(2,minmax(0,1fr))";
|
||||
if (!state.settings.free_drag){
|
||||
inner.style.display = "flex";
|
||||
inner.style.flexWrap = "wrap";
|
||||
inner.style.gap = "16px";
|
||||
inner.style.width = "100%";
|
||||
}
|
||||
@@ -976,7 +974,7 @@ const state = {
|
||||
el.style.left = "0px";
|
||||
el.style.top = "0px";
|
||||
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)));
|
||||
el.style.width = `${w}%`;
|
||||
const h = Number(block.data?.height || 0);
|
||||
@@ -984,20 +982,14 @@ const state = {
|
||||
el.style.cursor = "grab";
|
||||
} else {
|
||||
el.style.transform = "";
|
||||
if (state.settings.two_col){
|
||||
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}%`;
|
||||
el.style.flex = "0 0 100%";
|
||||
} 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)));
|
||||
el.style.width = `${w}%`;
|
||||
el.style.width = "calc(50% - 8px)";
|
||||
el.style.flex = "0 0 calc(50% - 8px)";
|
||||
}
|
||||
}
|
||||
el.innerHTML = renderBlockHtml(block);
|
||||
@@ -1090,7 +1082,7 @@ const state = {
|
||||
|
||||
function removeDrop(){ if (dropIndicator && dropIndicator.parentNode) dropIndicator.parentNode.removeChild(dropIndicator); dropIndicator=null; }
|
||||
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();
|
||||
if (!rect || !rect.width) return null;
|
||||
const ratio = (clientX - rect.left) / rect.width;
|
||||
@@ -1110,7 +1102,7 @@ const state = {
|
||||
}
|
||||
function addBlock(type,index=state.blocks.length){
|
||||
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;
|
||||
}
|
||||
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 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"){
|
||||
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>`;
|
||||
}
|
||||
if (block.type==="menu"){
|
||||
@@ -1594,7 +1586,6 @@ const state = {
|
||||
const bgColor=document.getElementById("bgColorInput");
|
||||
const bgColor2=document.getElementById("bgColor2Input");
|
||||
const bgGradient=document.getElementById("bgGradientToggle");
|
||||
const twoCol=document.getElementById("twoColToggle");
|
||||
const textColor=document.getElementById("textColorInput");
|
||||
const mutedColor=document.getElementById("mutedColorInput");
|
||||
const fontBody=document.getElementById("fontBodySelect");
|
||||
@@ -1610,7 +1601,6 @@ const state = {
|
||||
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;
|
||||
bgMotion.value=s.bg_motion||"none";
|
||||
twoCol.checked=!!s.two_col;
|
||||
textColor.value=s.text_color||"#0b0c10"; mutedColor.value=s.muted_color||"#6b7280";
|
||||
fontBody.value=s.font_body||"Manrope"; fontHeading.value=s.font_heading||"Manrope";
|
||||
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(); });
|
||||
bgGradient.addEventListener("change",()=>{ s.bg_gradient=bgGradient.checked; 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(); });
|
||||
mutedColor.addEventListener("input",()=>{ s.muted_color=mutedColor.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 (inspector) inspector.style.display = isPreview ? "none" : "";
|
||||
if (main) main.style.padding = isPreview ? "8px" : "";
|
||||
if (main) main.style.padding = isPreview ? "0" : "";
|
||||
if (shell){
|
||||
if (isPreview){
|
||||
shell.style.maxWidth = "100%";
|
||||
shell.style.margin = "8px auto";
|
||||
shell.style.margin = "0";
|
||||
shell.classList.remove("size-phone","size-tablet","size-desktop");
|
||||
shell.classList.add("size-desktop");
|
||||
["btnSizePhone","btnSizeTablet","btnSizeDesktop"].forEach(id=>{
|
||||
@@ -1836,7 +1825,7 @@ const state = {
|
||||
if (fullPageBtn){
|
||||
fullPageBtn.addEventListener("click",()=>{
|
||||
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")){
|
||||
|
||||
Reference in New Issue
Block a user