Repo-Mirror/cloudflare-error-page
9
0
Fork 0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-19 14:59:28 +00:00
Code Issues Releases Activity

editor/ui: expand preview frame in mobile view to avoid scrolling

Browse Source
This commit is contained in:
Anthony Donlon
2025-12-09 22:03:54 +08:00
parent 67fb5267b2
commit 46b4c99e72
1 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
editor/resources/index.html
View File

@@ -333,7 +333,6 @@
// store last rendered HTML for "open in new tab" // store last rendered HTML for "open in new tab"
lastRenderedHtml = pageHtml; lastRenderedHtml = pageHtml;
updateStatusBlockStyles();
} }
/* Open in new tab: create blob and open */ /* Open in new tab: create blob and open */
@@ -387,6 +386,11 @@
document.body.removeChild(link) document.body.removeChild(link)
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url)
} }
function resizePreviewFrame() {
const iframe = $('previewFrame');
const height = iframe.contentWindow.document.body.scrollHeight + 2
iframe.style.setProperty('--expanded-height', height + 'px')
}
/* Wire up events */ /* Wire up events */
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@@ -422,10 +426,18 @@
inp.addEventListener('input', debounce(() => { inp.addEventListener('input', debounce(() => {
// Update status block color classes for quick visual feedback in the editor // Update status block color classes for quick visual feedback in the editor
render(); render();
updateStatusBlockStyles();
}, 200)); }, 200));
// for radio change events (error_source) // for radio change events (error_source)
if (inp.type === 'radio') inp.addEventListener('change', () => { render(); }); if (inp.type === 'radio') inp.addEventListener('change', () => { render(); });
}); });
// Automatically update frame height
const observer = new ResizeObserver(entries => resizePreviewFrame());
const iframe = $('previewFrame');
observer.observe(iframe.contentWindow.document.body);
// resizePreviewFrame()
setInterval(resizePreviewFrame, 1000) // TODO...
}); });
/* Update status block colors based on selected status and error_source */ /* Update status block colors based on selected status and error_source */
@@ -485,6 +497,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
iframe.preview-frame {
height: 100% !important;
}
} }
/* On small screens use stacked layout: editor then iframe */ /* On small screens use stacked layout: editor then iframe */
@@ -499,8 +514,7 @@
background: #fff; background: #fff;
border: 1px solid #e3e6ea; border: 1px solid #e3e6ea;
border-radius: .5rem; border-radius: .5rem;
padding: 0.8rem 0; padding: 0.8rem 0 0 0;
min-height: 100%;
} }
/* Compact form: label and control same row */ /* Compact form: label and control same row */
@@ -542,8 +556,9 @@
/* Iframe styling */ /* Iframe styling */
iframe.preview-frame { iframe.preview-frame {
--expanded-height: 100%;
width: 100%; width: 100%;
height: 100%; height: var(--expanded-height);
border: 1px solid #ddd; border: 1px solid #ddd;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 360px; min-height: 360px;