From 03dfa70190fd55fdb25c6458db865125da6aa5a8 Mon Sep 17 00:00:00 2001 From: Walter Jekat Date: Fri, 5 Dec 2025 12:21:32 +0100 Subject: [PATCH] Improve preview layout: larger preview column + full-width toggle --- admin_ui/index.html | 50 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/admin_ui/index.html b/admin_ui/index.html index 561bb17..c1e1b1d 100644 --- a/admin_ui/index.html +++ b/admin_ui/index.html @@ -61,7 +61,7 @@ min-width: 0; } .editor { - flex: 1; + flex: 1 1 50%; display: flex; flex-direction: column; padding: 0.75rem; @@ -114,7 +114,7 @@ } .preview { - width: 45%; + flex: 1 1 50%; min-width: 320px; display: flex; flex-direction: column; @@ -163,6 +163,15 @@ color: #e5e7eb; font-size: 0.75rem; } + .preview-expand { + padding: 0.15rem 0.45rem; + border-radius: 999px; + border: 1px solid #4b5563; + background: #020617; + color: #e5e7eb; + font-size: 0.75rem; + cursor: pointer; + } .preview-inner { flex: 1; @@ -192,6 +201,37 @@ width: 1200px; /* typical desktop layout */ max-width: 100%; } + + /* Adjust column ratios per mode */ + .device-mobile .editor { + flex-basis: 50%; + } + .device-mobile .preview { + flex-basis: 50%; + } + + .device-tablet .editor { + flex-basis: 40%; + } + .device-tablet .preview { + flex-basis: 60%; + } + + .device-desktop .editor { + flex-basis: 35%; + } + .device-desktop .preview { + flex-basis: 65%; + } + + /* Full-width preview mode: hide editor, preview takes all */ + .preview-full .editor { + display: none; + } + .preview-full .preview { + flex-basis: 100%; + width: 100%; + } @@ -219,6 +259,7 @@ โ†— +
@@ -240,6 +281,7 @@ const statusEl = document.getElementById('status'); const deviceButtons = document.querySelectorAll('.device-btn'); const openPreviewEl = document.getElementById('open-preview'); + const expandPreviewEl = document.getElementById('expand-preview'); let currentSlug = null; @@ -258,6 +300,10 @@ }); }); + expandPreviewEl.addEventListener('click', () => { + document.body.classList.toggle('preview-full'); + }); + async function loadPages() { const res = await fetch(API_BASE + '/api/pages'); const pages = await res.json();