Index: src/views/pages/post-edit.ejs =================================================================== --- src/views/pages/post-edit.ejs (revision 2165b6d3d57ceaa8b5d1f70491868482149470cf) +++ src/views/pages/post-edit.ejs (revision 7bc636b391c66ac399c33e54f7173a022c6a3cbd) @@ -9,100 +9,29 @@ // and styling changed. const _hasCover = !!post.cover_image_url; -// In hub mode, save/create/cancel must carry the /user// prefix, otherwise -// the request falls back to the primary site (siteUrlBase empty) and the post -// renders headerless (bareChrome) after saving. In solo mode _base is empty. -const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; %>
-

<%= isNew ? t('pedit.title_new') : t('pedit.title_edit') %>

- -
- - <%# ── TYPE (segmented) + type-specific inputs ──────────────── - Post type lives at the TOP (above the body), and the selected type - reveals its own input: Audio → inline upload, Video → embed URL, - Foto → cover/insert hint. %> - <% var ptype = post.type || 'post'; %> - <% var TYPE_ICONS = { post: '📝', foto: '📷', video: '🎬', album: '💿', playlist: '📃', mixtape: '📼', audio: '🎵' }; %> - <%# Audio is geen keuze meer (shaer-cyg): alles wat muziek is landt op Album - of Playlist. De knop blijft alleen staan zolang deze post nog audio IS, - zodat een oude post niet stilzwijgend van type verandert bij het openen. %> - <% var TYPES = (typeof keuzeTypes !== 'undefined' && keuzeTypes.length) - ? keuzeTypes.slice() : ['post','foto','video','album','playlist','mixtape']; %> - <% if (ptype === 'audio' && TYPES.indexOf('audio') < 0) TYPES.push('audio'); %> -
-
<%= t('pedit.s_type') %>
- -
- <% TYPES.forEach(function (tt) { %> - - <% }); %> -
- - <%# Muziek: inline upload (transcodes + drops [[track]] into the post). - Album, Playlist en Mixtape delen dit paneel -- het verschil zit in de - playlist die je insluit, niet in wat je hier uploadt. Audio staat er - alleen nog voor oude posts. %> - - - <%# Video: paste a URL → embed chip %> - - - <%# Foto: light hint toward cover + insert-image %> - -
+

<%= isNew ? 'Nieuwe post' : 'Post bewerken' %>

+ + <%# ── IDENTITY ─────────────────────────────────────────────── %>
- <% var _postLang = (typeof post.language !== 'undefined' && post.language) ? post.language : (typeof lang !== 'undefined' ? lang : 'en'); %> -
@@ -110,5 +39,5 @@ <%# ── COVER ────────────────────────────────────────────────── %>
-
<%= t('pedit.s_cover') %>
+
Cover
> @@ -118,21 +47,12 @@
- - <%# Muted loop MP4 for an animated cover (auto-made from an animated WebP). Hidden — set by the uploader. %> -
@@ -146,59 +66,51 @@
- <%= t('pedit.s_content') %> - <%= t('pedit.content_hint') %> + Content + Sleep een afbeelding om in te voegen · selecteer tekst om op te maken
@@ -209,15 +121,10 @@ role="textbox" aria-multiline="true" - aria-label="<%= t('pedit.editor_aria') %>">
- - <%# Sticky "tap to edit" hint (only visible on touch + non-fullscreen - via CSS). Purely visual (pointer-events:none); tapping the field opens fullscreen. %> - + aria-label="Content" + data-placeholder="Begin met schrijven…">
<%# Hidden field is what actually submits to the server. The visible contenteditable's serialized HTML is copied here on submit. %> - <%# value = de BESTAANDE inhoud: laadt de module niet (oude cache, js uit), - dan slaat het formulier de post ongewijzigd op in plaats van hem te wissen. %> - + <%# Initial content is injected as a JSON string in a script tag so we @@ -228,5 +135,5 @@
- 0 <%= t('pedit.chars') %> + 0 tekens
@@ -237,130 +144,38 @@ <%# ── META ─────────────────────────────────────────────────── %>
-
<%= t('pedit.s_publication') %>
- +
Publicatie
+
+ + +
-
- - -
0) ? '' : 'hidden' %>> - - - - - -
-
+ - - - <% var _fediOpen = (typeof fediOpenAudio !== 'undefined' && fediOpenAudio); %> - - <% if (_fediOpen) { %> -

<%= t('pedit.fedi_audio_locked') %>

- <% } else { %> - - <%# De scripts van deze pagina staan in assets/js/mod/post-edit.js; de gegevens via partials/page-data.ejs (shaer-bqr). %> - <% } %> - - <% // Poll (federates as an AS2 Question). Free feature. A poll with votes is frozen. - var _poll = null; try { _poll = post.poll_json ? JSON.parse(post.poll_json) : null; } catch (e) { _poll = null; } - var _pollLocked = (typeof pollLocked !== 'undefined' && pollLocked); - var _pollOpts = (_poll && Array.isArray(_poll.options) && _poll.options.length) ? _poll.options : [{ name: '' }, { name: '' }]; %> - - - <%# NB: keep the condition INSIDE the quoted attribute — escaped output (equals-tag) - turns a whole emitted style attribute into entity soup (fields showed always). %> -
- <% if (_pollLocked) { %>

<%= t('pedit.poll_locked') %>

<% } %> -
- <% _pollOpts.forEach(function (o) { %> -
- > - <% if (!_pollLocked) { %><% } %> -
- <% }); %> -
- <% if (!_pollLocked) { %><% } %> - - - -
- - <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %> - - -
- -
- - <% var _scheduled = !!(post.publish_at && (post.status === 'scheduled' || Date.parse(String(post.publish_at).replace(' ', 'T')) > Date.now())); %> - -
- - data-iso="<%= post.publish_at || '' %>" value="" style="padding:8px 10px;border-radius:8px;border:1px solid var(--rule,rgba(128,128,128,.4));background:transparent;color:inherit"> - <% if (post.status === 'scheduled' && post.publish_at) { %>
⏳ <%= t('pedit.scheduled_for', { d: post.publish_at }) %>
<% } %> -
<%= t('pedit.schedule_hint') %>
-
- - <% } %>
@@ -368,10 +183,10 @@ <%# ── ACTIONS (sticky at bottom) ──────────────────────────── %>
- <%= t('pedit.cancel') %> + Annuleren
<% if (!isNew && post.status !== 'published') { %> - + <% } %> - +
@@ -526,86 +341,4 @@ } -/* ─── Post type: segmented control + type-aware panels ──────────── */ -.pe-typeseg { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.4rem; -} -.pe-typeseg-btn { - display: flex; flex-direction: column; align-items: center; gap: 0.25rem; - padding: 0.7rem 0.4rem; - border: 1px solid var(--rule); - border-radius: 9px; - background: var(--paper-2); - color: var(--ink-soft); - font-size: 0.85rem; font-weight: 600; - cursor: pointer; - transition: border-color 120ms, background 120ms, color 120ms; -} -.pe-typeseg-btn:hover { border-color: var(--accent); color: var(--ink); } -.pe-typeseg-btn .pe-typeseg-ic { font-size: 1.3rem; line-height: 1; } -.pe-typeseg-btn.is-active { - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); - color: var(--ink); -} -.pe-typeseg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } -@media (max-width: 480px) { - .pe-typeseg-btn { font-size: 0.78rem; padding: 0.6rem 0.25rem; } - .pe-typeseg-btn .pe-typeseg-ic { font-size: 1.15rem; } -} - -.pe-type-panel { margin-top: 0.2rem; } - -/* Audio drop/upload zone */ -.pe-audio-up { - display: flex; flex-direction: column; align-items: center; gap: 0.3rem; - text-align: center; - padding: 1.4rem 1rem; - border: 2px dashed var(--rule); - border-radius: 10px; - background: var(--paper-2); - color: var(--ink-soft); - cursor: pointer; - transition: border-color 120ms, background 120ms; -} -.pe-audio-up:hover, -.pe-audio-up:focus-visible { border-color: var(--accent); outline: none; } -.pe-audio-up.is-drag { - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 12%, var(--paper-2)); -} -.pe-audio-up .pe-audio-up-ic { font-size: 1.7rem; line-height: 1; } -.pe-audio-up strong { color: var(--ink); font-size: 0.95rem; } -.pe-audio-up small { font-size: 0.78rem; color: var(--ink-muted, var(--ink-soft)); max-width: 42ch; } - -.pe-audio-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } -.pe-audio-item { - display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; - padding: 0.5rem 0.7rem; - border: 1px solid var(--rule); - border-radius: 7px; - background: var(--paper-2); - font-size: 0.85rem; -} -.pe-audio-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pe-audio-item-state { flex: none; font-size: 0.8rem; color: var(--ink-soft); } -.pe-audio-item.is-done { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule)); } -.pe-audio-item.is-done .pe-audio-item-state { color: var(--accent); } -.pe-audio-item.is-fail .pe-audio-item-state { color: #d9534f; } - -/* Video URL row */ -.pe-video-row { display: flex; gap: 0.5rem; } -.pe-video-row input { flex: 1 1 auto; min-width: 0; } -.pe-video-row input { - box-sizing: border-box; padding: 0.6rem 0.75rem; - border: 1px solid var(--rule); border-radius: 6px; - background: var(--paper-2); color: var(--ink); font-size: 0.95rem; -} -.pe-video-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } -.pe-video-row .pe-btn { flex: none; } - -.pe-foto-hint { margin: 0; font-size: 0.88rem; color: var(--ink-soft); } - /* ─── Editor frame (WYSIWYG: top toolbar, contenteditable body, status bar) ─── */ .pe-editor-frame { @@ -633,6 +366,4 @@ width: 32px; height: 32px; padding: 0; - touch-action: manipulation; /* snappy taps on mobile, no double-tap zoom */ - -webkit-user-select: none; user-select: none; background: transparent; border: 1px solid transparent; @@ -645,21 +376,14 @@ -webkit-tap-highlight-color: transparent; } -/* Hover only on real hover-capable devices — on touch :hover otherwise "sticks" - after a tap, making the active/inactive state unreadable. */ -@media (hover: hover) { - .pe-toolbar button:hover { - background: var(--paper-2); - color: var(--accent); - } +.pe-toolbar button:hover { + background: var(--paper-2); + color: var(--accent); } .pe-toolbar button:active { transform: scale(.94); } -/* Active formatting = unmistakably filled with the accent colour. On mobile - it's immediately clear when e.g. bold is ON (tap again = off). */ .pe-toolbar button.is-active { - background: var(--accent); - color: #fff; - border-color: var(--accent); -} -.pe-toolbar button.is-active svg { color: #fff; } + background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); + color: var(--accent); + border-color: color-mix(in srgb, var(--accent) 30%, transparent); +} .pe-toolbar button svg { width: 16px; height: 16px; } .pe-toolbar button.pe-tb-text { font-family: var(--font-display, serif); font-weight: 700; } @@ -671,42 +395,4 @@ } .pe-toolbar-spacer { flex: 1; } - -/* ─── Full-screen writing mode ─── */ -.fs-icon-compress { display: none; } -.pe-editor-frame.pe-fs .fs-icon-expand { display: none; } -.pe-editor-frame.pe-fs .fs-icon-compress { display: inline; } -.pe-editor-frame.pe-fs { - position: fixed; inset: 0; z-index: 1000; - margin: 0; border-top: 0; - height: 100dvh; - background: var(--paper); - overflow: hidden; /* only the text field scrolls, not the frame itself */ -} -/* In fullscreen the writing field fills the remaining space and scrolls itself - (max-height: none overrides the mobile box limit below). */ -.pe-editor-frame.pe-fs .pe-editor { - flex: 1 1 auto; min-height: 0; height: auto; max-height: none; -} -/* iOS: in fullscreen the toolbar sits at the very top → push it below the - camera / Dynamic Island with the top safe-area inset. */ -.pe-editor-frame.pe-fs .pe-toolbar { padding-top: calc(.4rem + env(safe-area-inset-top, 0px)); } -/* NB: deliberately NO overflow:hidden on html/body in fullscreen — that could get - stuck (e.g. leaving fullscreen via navigation) and would block scrolling on the - whole page. The fullscreen frame (position:fixed, inset:0) already covers the page, - and on touch scrollbars are hidden → no double bar needed. */ - -/* "Done" button: only visible in fullscreen (left side of toolbar), clear - accent-pill instead of a square icon. */ -/* Hide rule more specific than ".pe-toolbar button" (otherwise that wins and the - Done button also shows inline as a small button). Only shown in fullscreen → large. */ -.pe-toolbar button.pe-fs-done { display: none; } -.pe-editor-frame.pe-fs .pe-fs-done { - display: inline-flex; align-items: center; gap: .35rem; - width: auto !important; height: auto !important; min-height: 40px; - padding: .55rem 1.3rem !important; margin-right: .5rem; - background: var(--accent); color: #fff; - font-weight: 700; font-size: 1.05rem; border-radius: 999px; -} -.pe-editor-frame.pe-fs .pe-fs-done:hover { background: var(--accent); color: #fff; } /* Editor body — looks like prose, behaves like a textarea */ @@ -726,40 +412,14 @@ } .pe-editor:focus { outline: none; } -/* Inline (non-fullscreen) the writing field simply grows with the content — no - internal scroll-box (scroll-within-scroll is confusing). On mobile/tablet typing - always goes fullscreen (see JS), where the field fills the page and is the sole - scroller. */ -.pe-editor-frame:not(.pe-fs) .pe-editor { overflow: visible; } - -/* Touch: the inline content field is not a text field but a tap target → fullscreen - editing. A "✎ Tap to edit" pill sticks to the bottom of the container, - so the hint is always visible without sitting in the middle of the text. */ -.pe-editor.pe-tap-to-edit { cursor: pointer; } -.pe-edit-hint { display: none; } -@media (pointer: coarse) { - .pe-editor-frame:not(.pe-fs) .pe-edit-hint { - display: block; - position: sticky; - bottom: 4.5rem; /* above the sticky Save/Cancel bar */ - width: max-content; - max-width: calc(100% - 2rem); - margin: .4rem auto; - background: var(--accent); color: #fff; - font-size: .9rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px; - box-shadow: 0 4px 14px rgba(0,0,0,.35); - pointer-events: none; text-align: center; white-space: nowrap; - } - /* Not relevant on touch (drag/select belongs to inline editing on desktop). */ - .pe-content-hint { display: none; } - /* Inline (non-fullscreen) on touch: keep it simple — you don't edit here anyway, - so no formatting toolbar and no border. Just the content preview + the - "tap to edit" pill. The toolbar only appears in fullscreen. */ - .pe-editor-frame:not(.pe-fs) .pe-toolbar { display: none; } - .pe-editor-frame:not(.pe-fs) { border-top: 0; } - .pe-editor-frame:not(.pe-fs) .pe-editor { min-height: 8rem; } -} .pe-editor.is-dragover { outline: 2px dashed var(--accent); outline-offset: -10px; +} +.pe-editor[data-placeholder]:empty::before, +.pe-editor[data-placeholder]:has(br:only-child)::before { + content: attr(data-placeholder); + color: var(--ink-muted, #999); + pointer-events: none; + opacity: .55; } /* Inline prose styles inside the editor — match the public post styling so @@ -1118,19 +778,29 @@ } -/* Pin: checkbox + ▲▼-stepper with description (instead of a raw rank number). */ -.pe-pin { display: flex; flex-direction: column; gap: 0.45rem; } -.pe-pin-pos { display: flex; align-items: center; gap: 0.55rem; padding-left: 1.65rem; } -.pe-pin-pos[hidden] { display: none; } -.pe-pin-steps { display: inline-flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; } -.pe-pin-btn { - width: 30px; height: 28px; padding: 0; - border: none; background: var(--paper-2); color: var(--ink); - cursor: pointer; font-size: 0.68rem; line-height: 1; - display: inline-flex; align-items: center; justify-content: center; -} -.pe-pin-btn + .pe-pin-btn { border-left: 1px solid var(--rule); } -.pe-pin-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--paper-2)); color: var(--accent); } -.pe-pin-btn:disabled { opacity: 0.35; cursor: default; } -.pe-pin-label { font-size: 0.85rem; color: var(--accent); font-weight: 600; } +/* Pinned rank: replaces the old boolean checkbox with a number input. + Stack the label / input / hint vertically — small footprint. */ +.pe-pinned-rank { + display: flex; flex-direction: column; gap: 0.25rem; + font-size: 0.95rem; + color: var(--ink); +} +.pe-pinned-rank input[type="number"] { + width: 80px; + padding: 0.4rem 0.6rem; min-height: 36px; + border: 1px solid var(--rule); border-radius: 6px; + background: var(--paper-2); color: var(--ink); + font-family: var(--font-ui, system-ui), sans-serif; + font-size: 0.95rem; + font-variant-numeric: tabular-nums; + -webkit-appearance: none; appearance: textfield; +} +.pe-pinned-rank input[type="number"]:focus { + outline: 2px solid var(--accent); outline-offset: -1px; + border-color: var(--accent); +} +.pe-pinned-rank small { + font-size: 0.78rem; + color: var(--ink-muted, var(--ink-soft)); +} /* ─── Sticky action footer ──────────────────────────────────────── */ @@ -1141,5 +811,5 @@ gap: 0.5rem; padding: 0.85rem 1rem; - margin: 0.5rem -1rem 0; /* extend to viewport edges on a narrow container */ + margin: 0.5rem -1rem 0; /* extend to viewport edges on tight container */ background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(8px); @@ -1150,48 +820,507 @@ .pe-actions-spacer { flex: 1; } -/* The editor is a focus screen: hide the mobile site tab bar (Home/Search/…) - so two bars don't stack at the bottom (Save bar + tab bar). The - Save/Cancel bar then becomes the only bottom bar → plain bottom:0, - no tab offset needed. On desktop the tab bar is already hidden. */ -body:has(.post-edit-page) .bottom-tab { display: none; } -/* Audio player (if playing) no longer lifted 56px for the now-hidden - tab bar, otherwise it would float above the action bar. */ -body:has(.post-edit-page) .audio-player { bottom: 0; } - -/* ── Image editor (rotate / crop / mirror) ── */ -.imed-backdrop { - position: fixed; inset: 0; z-index: 9999; - display: flex; align-items: center; justify-content: center; - background: rgba(0,0,0,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); - padding: 14px; -} -.imed-modal { - display: flex; flex-direction: column; gap: 12px; - width: 100%; max-width: 640px; max-height: 92vh; - background: var(--paper, #fff); color: var(--ink, #111); - border: 1px solid var(--rule, rgba(128,128,128,.3)); border-radius: 14px; - padding: 14px; box-sizing: border-box; -} -.imed-stage { - height: 58vh; flex: 0 0 auto; - background: var(--paper-2, rgba(128,128,128,.08)); border-radius: 10px; overflow: hidden; -} -.imed-stage img { display: block; max-width: 100%; } -/* Cropper's container must fill the full stage height — otherwise it collapses - in a flex column without an explicit height → empty edit window (no image). */ -.imed-stage .cropper-container { width: 100% !important; height: 100% !important; } -.imed-tools { - display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; -} -.imed-tools button { - width: 42px; height: 42px; font-size: 18px; line-height: 1; - border: 1px solid var(--rule, rgba(128,128,128,.4)); border-radius: 10px; - background: var(--paper-2, transparent); color: inherit; cursor: pointer; -} -.imed-tools button:hover { border-color: var(--accent); } -.imed-actions { display: flex; gap: 8px; justify-content: flex-end; } +/* On a body that already has a fixed bottom-tab nav (mobile), nudge the + sticky footer up so it doesn't sit under it. The bottom-tab is ~64px tall. */ +body.has-bottom-tab .pe-actions { + bottom: 64px; +} - + <%# ── Track picker modal (P59). Mobile-first: full-screen sheet on small @@ -1202,6 +1331,6 @@ -
-
<%= t('pedit.js_tracks_loading') %>
+
+
Tracks laden…
@@ -1225,3 +1354,2 @@ <%- include('../partials/playlist-editor', { csrfToken: (typeof csrfToken !== 'undefined' ? csrfToken : '') }) %> <% } %> -<%- include('../partials/page-data', { pageData: { _timezone: (typeof timezone !== 'undefined' ? timezone : ''), apply: t('imed.apply'), audio_up_busy: t('pedit.audio_up_busy'), audio_up_done: t('pedit.audio_up_done'), audio_up_fail: t('pedit.audio_up_fail'), cancel: t('imed.cancel'), chip_album: t('pedit.chip_album'), chip_playlist: t('pedit.chip_playlist'), chip_track: t('pedit.chip_track'), flip_h: t('imed.flip_h'), flip_v: t('imed.flip_v'), js_embed_invalid: t('pedit.js_embed_invalid'), js_embed_prompt: t('pedit.js_embed_prompt'), js_failed: t('pedit.js_failed'), js_inserted: t('pedit.js_inserted'), js_link_prompt: t('pedit.js_link_prompt'), js_no_tracks_found: t('pedit.js_no_tracks_found'), js_no_tracks_yet: t('pedit.js_no_tracks_yet'), js_playlist_choose: t('pedit.js_playlist_choose'), js_playlist_editor_missing: t('pedit.js_playlist_editor_missing'), js_playlist_existing: t('pedit.js_playlist_existing'), js_tracks_load_fail: t('pedit.js_tracks_load_fail'), js_tracks_loading: t('pedit.js_tracks_loading'), js_uploaded: t('pedit.js_uploaded'), js_uploading: t('pedit.js_uploading'), pin_nth_suffix: t('pedit.pin_nth_suffix'), pin_top: t('pedit.pin_top'), reset: t('imed.reset'), rotate_left: t('imed.rotate_left'), rotate_right: t('imed.rotate_right'), tb_done: t('pedit.tb_done'), tb_fullscreen: t('pedit.tb_fullscreen'), title: t('imed.title'), zoom_in: t('imed.zoom_in'), zoom_out: t('imed.zoom_out') } }) %>