experimental: portfolio features (justified layout, unlisted pages, captions, per-album grid, focal point, nav links, cover hero) (#431)
## Was ist das? Sieben neue Portfolio-Features, alle als **experimental** gekennzeichnet — in YAML-Kommentaren, Admin-Panel-Labels und Commit-Scopes, damit sie einzeln nachvollziehbar und revertierbar bleiben. ## Features (je ein Commit) | Commit | Feature | | --- | --- | | `justified rows gallery layout` | Neues Grid-Layout `justified`: zeilenbasiert, gleiche Höhen, volle Breite — Flexbox ohne JS-Messung, letzte Zeile bleibt natürlich klein | | `hide subpages from navigation` | `hidden: true`: Seite aus Nav/Homepage raus, per Direktlink erreichbar — im Gegensatz zu `enabled: false` (404) | | `lightbox captions` | Immich-Asset-Description als Bildunterschrift im Info-Panel; EXIF-Route liefert bei `exifOnHover: false` jetzt nur noch die Caption statt 403 | | `per-album grid overrides` | `grid:` pro Album-Eintrag, Präzedenz global < Subpage < Album | | `per-album cover focal point` | `coverPosition:` → `object-position` auf Cover-Karten, strikt validiert | | `external links in header navigation` | `navLinks:` in settings.yaml, nur http(s), sanitisiert | | `cover splash hero style` | `heroStyle: cover`: Fullscreen-Splash mit Enter-Link ins Portfolio | Alle Optionen sind im Admin-Panel editierbar (PageBuilder / SettingsEditor). ## Tests - 356 Unit-Tests grün (13 neue: deriveGallery hidden/grid/coverPosition, sanitizeNavLinks, EXIF-Route-Captions, justified-Layout-Validierung) - `npx tsc --noEmit`: 0 Fehler - `npm run build`: sauber - Justified-Zeilenmathematik und Cover-Splash per Browser-Harness visuell/numerisch verifiziert (volle Zeilen enden exakt an der Containerkante, letzte Zeile bleibt natürlich) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: ralksta <ralksta@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
This commit is contained in:
Ralksta
@@ -2220,7 +2220,9 @@ h3 .svg-icon {
|
||||
|
||||
.album-drawer {
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
/* Narrower than the subpage sheet (1100px) so the nested editor still reads
|
||||
as a layer on top of it, but wide enough for the same two-column body. */
|
||||
max-width: 960px;
|
||||
max-height: 90vh;
|
||||
background: var(--admin-bg-raised);
|
||||
border: 1px solid var(--admin-border);
|
||||
@@ -2255,8 +2257,9 @@ h3 .svg-icon {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Single-column body — and the drawer's only scroll container. Nesting a second
|
||||
scroller here is what used to clip the sort listbox popup. */
|
||||
/* The drawer's only scroll container. Nesting a second scroller here is what
|
||||
used to clip the sort listbox popup — the two columns inside must stay
|
||||
overflow-free and scroll together. */
|
||||
.album-drawer-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -2278,6 +2281,20 @@ h3 .svg-icon {
|
||||
}
|
||||
}
|
||||
|
||||
/* Full-screen on phones, mirroring the subpage sheet. */
|
||||
@media (max-width: 560px) {
|
||||
.album-drawer-overlay {
|
||||
padding: 0;
|
||||
}
|
||||
.album-drawer {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
height: 100dvh;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.album-drawer-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
@@ -3470,7 +3487,9 @@ h3 .svg-icon {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ── Subpage Slide-Over Drawer Modal ──────────────────────────── */
|
||||
/* ── Subpage Editor Sheet (centered two-column modal) ─────────── */
|
||||
/* z-index 999 is load-bearing: the album detail modal (1000) and the
|
||||
portalled Listbox popup (1100) must stack above this sheet. */
|
||||
.subpage-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -3478,28 +3497,37 @@ h3 .svg-icon {
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.subpage-drawer-container {
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
height: 100vh;
|
||||
max-width: 1100px;
|
||||
max-height: 90vh;
|
||||
background: var(--admin-bg-card, #181818);
|
||||
border-left: 1px solid var(--admin-border, #333);
|
||||
border: 1px solid var(--admin-border, #333);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
|
||||
animation: slideInRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
|
||||
/* No fill-mode: after the entry animation the computed transform must
|
||||
return to none, so the container never becomes a containing block for
|
||||
fixed-position descendants (Listbox popup measurement). */
|
||||
animation: sheetIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
@keyframes sheetIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
transform: scale(0.96) translateY(10px);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3538,6 +3566,8 @@ h3 .svg-icon {
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
flex: 1;
|
||||
/* Required so the flex child scrolls under max-height instead of growing */
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
@@ -3552,6 +3582,71 @@ h3 .svg-icon {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ── Shared two-column layout for admin editor sheets ─────────── */
|
||||
/* Used by the subpage editor and the album detail editor so both read as the
|
||||
same surface. Columns always live inside their sheet's single body scroller
|
||||
— never give a column its own overflow, a nested scroller clips the
|
||||
portalled Listbox popup (see the .album-drawer-body note). */
|
||||
.admin-sheet-columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* The subpage editor is asymmetric on purpose: the left column is a settings
|
||||
form with a natural maximum, the right one holds the album list and wants
|
||||
every pixel it can get. */
|
||||
.admin-sheet-columns--settings-aside {
|
||||
grid-template-columns: minmax(380px, 460px) 1fr;
|
||||
}
|
||||
|
||||
.admin-sheet-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-sheet-col--divided {
|
||||
border-left: 1px solid var(--admin-border);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.admin-sheet-columns,
|
||||
.admin-sheet-columns--settings-aside {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.admin-sheet-col--divided {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.subpage-drawer-backdrop {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subpage-drawer-container {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
height: 100dvh;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.subpage-drawer-container,
|
||||
.subpage-drawer-backdrop {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breadcrumb + title stack on the left of the drawer header. */
|
||||
.subpage-drawer-title-group {
|
||||
display: flex;
|
||||
|
||||
@@ -170,6 +170,17 @@ export function IconGlobe({ size = 16, className = 'svg-icon', strokeWidth = 2,
|
||||
);
|
||||
}
|
||||
|
||||
export function IconEyeOff({ size = 16, className = 'svg-icon', strokeWidth = 2, ...props }: IconProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
|
||||
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
|
||||
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
|
||||
<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
|
||||
<line x1="2" x2="22" y1="2" y2="22" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconBan({ size = 16, className = 'svg-icon', strokeWidth = 2, ...props }: IconProps) {
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
|
||||
|
||||
@@ -43,6 +43,9 @@ import {
|
||||
IconGripVertical,
|
||||
IconHome,
|
||||
IconImage,
|
||||
IconBan,
|
||||
IconEyeOff,
|
||||
IconGlobe,
|
||||
IconLock,
|
||||
IconPencil,
|
||||
IconPlus,
|
||||
@@ -92,6 +95,10 @@ interface AlbumEntry {
|
||||
sort?: AlbumSortMode;
|
||||
/** Pinned asset UUIDs for `sort: manual`; everything else follows automatically. */
|
||||
assetOrder?: string[];
|
||||
/** EXPERIMENTAL: per-album grid override (layout only in the UI for now) */
|
||||
grid?: { columns?: number; gap?: number; aspectRatio?: string; layout?: string };
|
||||
/** EXPERIMENTAL: focal point for the cover crop, e.g. "50% 25%" or "top" */
|
||||
coverPosition?: string;
|
||||
}
|
||||
|
||||
interface Section {
|
||||
@@ -106,6 +113,8 @@ interface Subpage {
|
||||
subtitle?: string;
|
||||
password?: string;
|
||||
enabled?: boolean;
|
||||
/** EXPERIMENTAL: reachable by direct link, but not shown in navigation */
|
||||
hidden?: boolean;
|
||||
essayText?: string;
|
||||
essayFile?: string;
|
||||
sections?: Section[];
|
||||
@@ -153,7 +162,9 @@ function hasAlbumOptions(entry: AlbumEntry): boolean {
|
||||
entry.password ||
|
||||
entry.heroImage ||
|
||||
(entry.sort && entry.sort !== DEFAULT_ALBUM_SORT) ||
|
||||
entry.assetOrder?.length,
|
||||
entry.assetOrder?.length ||
|
||||
entry.grid ||
|
||||
entry.coverPosition,
|
||||
);
|
||||
}
|
||||
|
||||
@@ -171,6 +182,8 @@ function parseAlbumEntries(raw: RawAlbumEntry[] | undefined): AlbumEntry[] {
|
||||
heroImage: value.heroImage,
|
||||
sort: isAlbumSortMode(value.sort) ? value.sort : undefined,
|
||||
assetOrder: value.assetOrder,
|
||||
grid: value.grid,
|
||||
coverPosition: value.coverPosition,
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -192,6 +205,8 @@ function serializeAlbumEntries(entries: AlbumEntry[]): RawAlbumEntry[] {
|
||||
// Persisted regardless of the mode, so manual → newest → manual does not
|
||||
// throw away a hand-curated order.
|
||||
if (entry.assetOrder?.length) val.assetOrder = entry.assetOrder;
|
||||
if (entry.grid) val.grid = entry.grid;
|
||||
if (entry.coverPosition) val.coverPosition = entry.coverPosition;
|
||||
return { [entry.id]: val };
|
||||
});
|
||||
}
|
||||
@@ -326,6 +341,12 @@ function SortableSubpageTile({
|
||||
</span>
|
||||
)}
|
||||
|
||||
{sp.hidden === true && sp.enabled !== false && (
|
||||
<span className="subpage-badge-protected" title="Hidden from navigation, reachable by direct link">
|
||||
Unlisted
|
||||
</span>
|
||||
)}
|
||||
|
||||
{sp.password && (
|
||||
<span className="subpage-badge-protected" title="Password protected">
|
||||
<IconLock size={12} /> Password
|
||||
@@ -420,6 +441,22 @@ export default function PageBuilder() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dirty, saving, gallery]);
|
||||
|
||||
// ── Escape closes the subpage sheet — only when it is topmost ─
|
||||
useEffect(() => {
|
||||
if (expandedSubpage === null) return;
|
||||
function handleEscape(e: KeyboardEvent) {
|
||||
if (e.key !== 'Escape') return;
|
||||
// Listbox preventDefaults its own Escape but does not stopPropagation —
|
||||
// respect that so closing a popup never also closes the sheet.
|
||||
if (e.defaultPrevented) return;
|
||||
// A higher layer (album editor, pickers, order editor) owns the key.
|
||||
if (editingAlbumAddress || pickerTarget || heroPickerTarget || orderEditorTarget) return;
|
||||
setExpandedSubpage(null);
|
||||
}
|
||||
window.addEventListener('keydown', handleEscape);
|
||||
return () => window.removeEventListener('keydown', handleEscape);
|
||||
}, [expandedSubpage, editingAlbumAddress, pickerTarget, heroPickerTarget, orderEditorTarget]);
|
||||
|
||||
// ── Unsaved changes guard ────────────────────────────────────
|
||||
useEffect(() => {
|
||||
function handleBeforeUnload(e: BeforeUnloadEvent) {
|
||||
@@ -470,6 +507,7 @@ export default function PageBuilder() {
|
||||
subtitle: sp.subtitle as string | undefined,
|
||||
password: sp.password as string | undefined,
|
||||
enabled: sp.enabled !== false,
|
||||
hidden: sp.hidden === true,
|
||||
essayText: sp.essayText as string | undefined,
|
||||
essayFile: sp.essayFile as string | undefined,
|
||||
albums: parseAlbumEntries(sp.albums as Array<string | Record<string, string>> | undefined),
|
||||
@@ -494,6 +532,7 @@ export default function PageBuilder() {
|
||||
subtitle: sp.subtitle as string | undefined,
|
||||
password: sp.password as string | undefined,
|
||||
enabled: sp.enabled !== false,
|
||||
hidden: sp.hidden === true,
|
||||
essayText: sp.essayText as string | undefined,
|
||||
essayFile: sp.essayFile as string | undefined,
|
||||
albums: parseAlbumEntries(
|
||||
@@ -533,6 +572,7 @@ export default function PageBuilder() {
|
||||
if (sp.subtitle) entry.subtitle = sp.subtitle;
|
||||
if (sp.password) entry.password = sp.password;
|
||||
if (sp.enabled === false) entry.enabled = false;
|
||||
if (sp.hidden === true) entry.hidden = true;
|
||||
if (sp.essayText) entry.essayText = sp.essayText;
|
||||
if (sp.essayFile) entry.essayFile = sp.essayFile;
|
||||
if (sp.grid) entry.grid = sp.grid;
|
||||
@@ -1175,7 +1215,8 @@ export default function PageBuilder() {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="admin-sheet-columns admin-sheet-columns--settings-aside">
|
||||
<div className="admin-sheet-col">
|
||||
<div className="subpage-drawer-section">
|
||||
<div className="admin-field">
|
||||
<label>Page Name (URL Identifier)</label>
|
||||
@@ -1215,9 +1256,74 @@ export default function PageBuilder() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label>Password Protection (optional)</label>
|
||||
<div className="password-input-wrapper">
|
||||
<div className="admin-field" style={{ marginTop: '1rem' }}>
|
||||
<label>Visibility & Access</label>
|
||||
{/*
|
||||
One field, three states — enabled/hidden are two YAML flags,
|
||||
but for the owner it is a single question: how visible is
|
||||
this page? Splitting it across two toggles produced
|
||||
contradictory copy ("Disabled (Hidden)" vs "Unlisted").
|
||||
*/}
|
||||
{(
|
||||
[
|
||||
{
|
||||
key: 'published',
|
||||
active: sp.enabled !== false && sp.hidden !== true,
|
||||
icon: <IconGlobe size={15} />,
|
||||
iconColor: '#4ade80',
|
||||
title: 'Published',
|
||||
desc: 'Shown in the header menu and homepage lists, reachable via URL',
|
||||
patch: { enabled: true, hidden: false },
|
||||
},
|
||||
{
|
||||
key: 'unlisted',
|
||||
active: sp.enabled !== false && sp.hidden === true,
|
||||
icon: <IconEyeOff size={15} />,
|
||||
iconColor: '#fbbf24',
|
||||
title: 'Unlisted (Experimental)',
|
||||
desc: 'Not shown in menus or on the homepage, but reachable via direct link',
|
||||
patch: { enabled: true, hidden: true },
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
active: sp.enabled === false,
|
||||
icon: <IconBan size={15} />,
|
||||
iconColor: '#f87171',
|
||||
title: 'Disabled',
|
||||
desc: 'Completely offline — returns 404 even when accessed directly',
|
||||
patch: { enabled: false, hidden: false },
|
||||
},
|
||||
] as const
|
||||
).map((opt) => (
|
||||
<button
|
||||
key={opt.key}
|
||||
type="button"
|
||||
className={`admin-toggle-card ${opt.active ? 'active' : ''}`}
|
||||
onClick={() => updateSubpage(spIndex, opt.patch)}
|
||||
aria-pressed={opt.active}
|
||||
style={{ padding: '10px 14px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: '8px', cursor: 'pointer', marginBottom: '6px' }}
|
||||
>
|
||||
<div className="toggle-card-info" style={{ textAlign: 'left' }}>
|
||||
<span className="toggle-card-title" style={{ fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{ color: opt.iconColor, display: 'inline-flex' }} aria-hidden="true">
|
||||
{opt.icon}
|
||||
</span>
|
||||
{opt.title}
|
||||
</span>
|
||||
<span className="toggle-card-desc" style={{ fontSize: '0.8rem', display: 'block', opacity: 0.75 }}>
|
||||
{opt.desc}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`switch-toggle ${opt.active ? 'on' : ''}`}>
|
||||
<span className="switch-slider" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Password lives in the same group: it is the access half
|
||||
of "who gets to see this page". Applies to Published and
|
||||
Unlisted; a Disabled page 404s before the gate. */}
|
||||
<div className="password-input-wrapper" style={{ marginTop: '6px' }}>
|
||||
<span className="password-icon"><IconLock size={12} /></span>
|
||||
<input
|
||||
type="password"
|
||||
@@ -1225,40 +1331,11 @@ export default function PageBuilder() {
|
||||
onChange={(e) =>
|
||||
updateSubpage(spIndex, { password: e.target.value || undefined })
|
||||
}
|
||||
placeholder="Leave empty for public access"
|
||||
placeholder="Password protection (optional) — leave empty for public access"
|
||||
disabled={sp.enabled === false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-field" style={{ marginTop: '1rem' }}>
|
||||
<label>Page Visibility Status</label>
|
||||
<button
|
||||
type="button"
|
||||
className={`admin-toggle-card ${sp.enabled !== false ? 'active' : ''}`}
|
||||
onClick={() => updateSubpage(spIndex, { enabled: sp.enabled === false })}
|
||||
style={{ padding: '10px 14px', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderRadius: '8px', cursor: 'pointer' }}
|
||||
>
|
||||
<div className="toggle-card-info" style={{ textAlign: 'left' }}>
|
||||
<span className="toggle-card-title" style={{ fontWeight: 600 }}>
|
||||
<span
|
||||
className={`page-status-dot ${sp.enabled !== false ? 'is-on' : 'is-off'}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{sp.enabled !== false
|
||||
? 'Page Active (Published)'
|
||||
: 'Page Disabled (Hidden)'}
|
||||
</span>
|
||||
<span className="toggle-card-desc" style={{ fontSize: '0.8rem', display: 'block', opacity: 0.75 }}>
|
||||
{sp.enabled !== false
|
||||
? 'Visible in header menu and reachable via URL'
|
||||
: 'Hidden from navigation menu. Returns 404 if accessed directly.'}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`switch-toggle ${sp.enabled !== false ? 'on' : ''}`}>
|
||||
<span className="switch-slider" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="admin-field" style={{ marginTop: '1rem' }}>
|
||||
<label>Page Layout Style</label>
|
||||
<select
|
||||
@@ -1313,8 +1390,9 @@ export default function PageBuilder() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
</div>
|
||||
|
||||
<div className="admin-sheet-col admin-sheet-col--divided">
|
||||
{/* Albums (if no sections) with DnD */}
|
||||
{(!sp.sections || sp.sections.length === 0) && (
|
||||
<div className="subpage-albums">
|
||||
@@ -1437,7 +1515,8 @@ export default function PageBuilder() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1503,6 +1582,8 @@ export default function PageBuilder() {
|
||||
form already shows (password state, custom hero) is not
|
||||
repeated as a read-only stat. */}
|
||||
<div className="album-drawer-body">
|
||||
<div className="admin-sheet-columns">
|
||||
<div className="admin-sheet-col">
|
||||
<div className="modal-cover-container">
|
||||
{heroThumb ? (
|
||||
<img src={`/api/admin/thumbnail/${heroThumb}`} alt="" loading="lazy" />
|
||||
@@ -1551,6 +1632,40 @@ export default function PageBuilder() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="admin-sheet-col admin-sheet-col--divided">
|
||||
<div className="admin-field">
|
||||
<label>Layout override (Experimental)</label>
|
||||
<select
|
||||
value={album.grid?.layout || ''}
|
||||
onChange={(e) => {
|
||||
const layout = e.target.value || undefined;
|
||||
// Only the layout is exposed here; drop the grid object
|
||||
// entirely when it goes back to "inherit" so the YAML
|
||||
// stays clean.
|
||||
onUpdate({ grid: layout ? { ...(album.grid || {}), layout } : undefined });
|
||||
}}
|
||||
>
|
||||
<option value="">Inherit from page / global settings</option>
|
||||
<option value="masonry">Masonry</option>
|
||||
<option value="uniform">Uniform Grid</option>
|
||||
<option value="showcase">Showcase</option>
|
||||
<option value="filmstrip">Filmstrip</option>
|
||||
<option value="editorial-flow">Editorial Flow</option>
|
||||
<option value="justified">Justified (Experimental)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label>Cover focal point (Experimental)</label>
|
||||
<input
|
||||
value={album.coverPosition || ''}
|
||||
onChange={(e) => onUpdate({ coverPosition: e.target.value || undefined })}
|
||||
placeholder={'e.g. "50% 25%" or "top" — where the cover crop should anchor'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hero Image Selection */}
|
||||
<div className="admin-field">
|
||||
<label>Custom Hero Image</label>
|
||||
@@ -1627,6 +1742,8 @@ export default function PageBuilder() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="album-drawer-footer">
|
||||
<button
|
||||
|
||||
@@ -35,6 +35,8 @@ interface Settings {
|
||||
email?: string;
|
||||
website?: string;
|
||||
};
|
||||
/** EXPERIMENTAL: external links appended to the header navigation */
|
||||
navLinks?: Array<{ label?: string; url?: string }>;
|
||||
legal?: {
|
||||
enabled?: boolean;
|
||||
name?: string;
|
||||
@@ -71,9 +73,9 @@ interface Settings {
|
||||
}
|
||||
|
||||
const PRESETS = ['studio', 'studio-modern', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
|
||||
const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow'];
|
||||
const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
|
||||
const PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
|
||||
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic'];
|
||||
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic', 'cover'];
|
||||
const ASPECT_RATIOS = ['1', '3/2', '2/3', '16/9', 'auto'];
|
||||
|
||||
/**
|
||||
@@ -760,6 +762,7 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
stacked: { label: 'Stacked', desc: 'Title stacked directly over photo' },
|
||||
typographic: { label: 'Typographic', desc: 'Oversized magazine masthead' },
|
||||
mosaic: { label: 'Mosaic', desc: 'Dynamic photo collage layout' },
|
||||
cover: { label: 'Cover (Experimental)', desc: 'Fullscreen splash with a single Enter link' },
|
||||
}[s] || { label: s, desc: '' };
|
||||
const isActive = (settings.theme?.heroStyle || 'split') === s;
|
||||
|
||||
@@ -888,6 +891,7 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
showcase: { label: 'Showcase', desc: 'Featured hero photos mixed with smaller tiles' },
|
||||
filmstrip: { label: 'Filmstrip', desc: 'Horizontal scrollable film strip timeline' },
|
||||
'editorial-flow': { label: 'Editorial Flow', desc: 'Magazine story layout with varying photo sizes' },
|
||||
justified: { label: 'Justified (Experimental)', desc: 'Equal-height rows that fill the full width' },
|
||||
}[l] || { label: l, desc: '' };
|
||||
const isActive = (settings.grid?.layout || 'masonry') === l;
|
||||
|
||||
@@ -930,6 +934,12 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
<div className="demo-row"><div className="demo-tile" /><div className="demo-tile" /></div>
|
||||
</div>
|
||||
)}
|
||||
{l === 'justified' && (
|
||||
<div className="demo-editorial-flow">
|
||||
<div className="demo-row"><div className="demo-tile wide" /><div className="demo-tile" /></div>
|
||||
<div className="demo-row"><div className="demo-tile" /><div className="demo-tile wide" /></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="preset-card-info">
|
||||
@@ -1050,6 +1060,59 @@ export default function SettingsEditor({ section }: SettingsEditorProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-header" style={{ marginTop: '2rem' }}>
|
||||
<h3><Icons.IconLink size={18} /> Header Navigation Links (Experimental)</h3>
|
||||
<p className="settings-section-sub">External links shown after your pages in the header menu. Only http(s) URLs are allowed; they open in a new tab.</p>
|
||||
</div>
|
||||
|
||||
{(settings.navLinks || []).map((link, i) => (
|
||||
<div className="admin-field-row" key={i}>
|
||||
<div className="admin-field">
|
||||
<label>Label</label>
|
||||
<input
|
||||
value={link.label || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], label: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="Shop"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label>URL</label>
|
||||
<input
|
||||
value={link.url || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], url: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="https://shop.example.com"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
style={{ alignSelf: 'flex-end' }}
|
||||
onClick={() => {
|
||||
const next = (settings.navLinks || []).filter((_, j) => j !== i);
|
||||
update('navLinks', next.length > 0 ? next : undefined);
|
||||
}}
|
||||
title="Remove link"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
onClick={() => update('navLinks', [...(settings.navLinks || []), { label: '', url: '' }])}
|
||||
>
|
||||
+ Add external link
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user