walter
/
club-builder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve preview layout: larger preview column + full-width toggle

This commit is contained in:
Walter Jekat 2025-12-05 12:21:32 +01:00
parent 9b7eb16ac4
commit 03dfa70190
1 changed files with 48 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
admin_ui/index.html
View File

@ -61,7 +61,7 @@
min-width: 0; min-width: 0;
} }
.editor { .editor {
flex: 1; flex: 1 1 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.75rem; padding: 0.75rem;
@ -114,7 +114,7 @@
} }
.preview { .preview {
width: 45%; flex: 1 1 50%;
min-width: 320px; min-width: 320px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -163,6 +163,15 @@
color: #e5e7eb; color: #e5e7eb;
font-size: 0.75rem; 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 { .preview-inner {
flex: 1; flex: 1;
@ -192,6 +201,37 @@
width: 1200px; /* typical desktop layout */ width: 1200px; /* typical desktop layout */
max-width: 100%; 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%;
}
</style> </style>
</head> </head>
<body class="device-desktop"> <body class="device-desktop">
@ -219,6 +259,7 @@
<button class="device-btn" data-mode="tablet">📱📱</button> <button class="device-btn" data-mode="tablet">📱📱</button>
<button class="device-btn active" data-mode="desktop">🖥</button> <button class="device-btn active" data-mode="desktop">🖥</button>
<a id="open-preview" class="preview-open" href="#" target="_blank" rel="noopener noreferrer">↗</a> <a id="open-preview" class="preview-open" href="#" target="_blank" rel="noopener noreferrer">↗</a>
<button id="expand-preview" class="preview-expand" title="Toggle full-width preview">⤢</button>
</div> </div>
</div> </div>
<div class="preview-inner"> <div class="preview-inner">
@ -240,6 +281,7 @@
const statusEl = document.getElementById('status'); const statusEl = document.getElementById('status');
const deviceButtons = document.querySelectorAll('.device-btn'); const deviceButtons = document.querySelectorAll('.device-btn');
const openPreviewEl = document.getElementById('open-preview'); const openPreviewEl = document.getElementById('open-preview');
const expandPreviewEl = document.getElementById('expand-preview');
let currentSlug = null; let currentSlug = null;
@ -258,6 +300,10 @@
}); });
}); });
expandPreviewEl.addEventListener('click', () => {
document.body.classList.toggle('preview-full');
});
async function loadPages() { async function loadPages() {
const res = await fetch(API_BASE + '/api/pages'); const res = await fetch(API_BASE + '/api/pages');
const pages = await res.json(); const pages = await res.json();