Index: src/views/partials/fedi-interact-styles.ejs =================================================================== --- src/views/partials/fedi-interact-styles.ejs (revision 3ceaef6e9590862b66c5019b361edfac9e1af4fe) +++ src/views/partials/fedi-interact-styles.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) @@ -7,10 +7,4 @@ .auth-interact { max-width: 640px; margin: 1rem auto; padding: 0 1rem; } .auth-interact-title { margin: 0 0 1rem; } - .auth-interact-meta { color: var(--ink-soft, #888); margin: 0 0 .75rem; } - .auth-interact-preview { - margin: 0 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--accent, #888); - background: color-mix(in srgb, var(--ink, #000) 4%, transparent); border-radius: 0 12px 12px 0; - color: var(--ink, inherit); - } .auth-interact-form { display: flex; flex-direction: column; gap: .75rem; } .auth-interact-form textarea, .auth-interact-form input[type=url] { @@ -21,28 +15,4 @@ .auth-interact-actions { display: flex; gap: .5rem; align-items: center; } .auth-interact-note { color: var(--ink-soft, #999); font-size: .85rem; margin-top: 1rem; } - .auth-interact-where { margin: .25rem 0 .85rem; padding: .6rem .8rem; font-size: .85rem; line-height: 1.5; border-radius: 10px; background: color-mix(in srgb, var(--accent, #888) 12%, transparent); color: var(--ink, inherit); } - .auth-interact-content { line-height: 1.55; } - .auth-interact-content p { margin: .35rem 0; } - .auth-interact-content p:first-child { margin-top: 0; } - .auth-interact-img { max-width: 100%; height: auto; border-radius: 10px; margin: .5rem 0 0; display: block; } - .auth-interact-orig { margin: .75rem 0 0; font-size: .85rem; } - .auth-interact-orig a { color: var(--accent, #06c); } - .auth-view-src { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; padding: .6rem 1rem; - border: 1px solid color-mix(in srgb, var(--accent, #888) 45%, transparent); border-radius: 12px; - background: color-mix(in srgb, var(--accent, #888) 10%, transparent); color: var(--accent, #06c); - text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .15s, border-color .15s; } - .auth-view-src:hover { background: color-mix(in srgb, var(--accent, #888) 18%, transparent); border-color: var(--accent, #888); } - .auth-interact-react { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .25rem; } - .auth-interact-react form { margin: 0; } - .fedi-bigact { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px; - border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); - background: color-mix(in srgb, var(--ink, #000) 4%, transparent); - color: var(--ink, inherit); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap; - transition: background .12s, border-color .12s; } - .fedi-bigact svg { width: 17px; height: 17px; flex: 0 0 17px; } - .fedi-bigact-like svg { color: #e8b04b; } - .fedi-bigact-like:hover, .fedi-bigact-like.is-on { background: color-mix(in srgb, #e8b04b 16%, transparent); border-color: color-mix(in srgb, #e8b04b 55%, transparent); } - .fedi-bigact-boost svg { color: #2fa85a; } - .fedi-bigact-boost:hover, .fedi-bigact-boost.is-on { background: color-mix(in srgb, #2fa85a 16%, transparent); border-color: color-mix(in srgb, #2fa85a 55%, transparent); } .fedi-manage { list-style: none; padding: 0; margin: 1.25rem 0 1rem; display: flex; flex-direction: column; gap: .7rem; } .fedi-manage-item { padding: .9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ink, #000) 3.5%, transparent); border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent); transition: border-color .15s ease, box-shadow .15s ease; } @@ -87,25 +57,128 @@ .fedi-edit-save { padding: .4rem 1rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--paper, #fff); font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; } - /* Poll ballot / results on the interact page */ - .auth-poll { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1rem; } - .auth-poll-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; + + /* ── De kaart van een post of profiel van een andere server ────────────── + Eén kaart voor de live-preview, de zoekpagina en /authorize_interaction. + De telefoon is het uitgangspunt: knoppen van minstens 44 punten, en op + een smal scherm vallen de woorden weg en blijven de tekens staan. */ + .rp-card { position: relative; padding: 14px 16px 4px; border-radius: 16px; + border: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); + background: color-mix(in srgb, var(--ink, #000) 2.5%, var(--paper, transparent)); + color: var(--ink, inherit); overflow: hidden; } + .rp-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 10px; } + .rp-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; + background: color-mix(in srgb, var(--ink, #000) 8%, transparent); } + .rp-profile .rp-avatar { flex-basis: 56px; width: 56px; height: 56px; } + .rp-avatar-empty { display: inline-flex; align-items: center; justify-content: center; + font-weight: 700; color: var(--ink-soft, #888); } + .rp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } + .rp-name { font-weight: 700; color: var(--ink, inherit); text-decoration: none; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .rp-name:hover { text-decoration: underline; } + .rp-handle { font-size: .82rem; color: var(--ink-soft, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + .rp-body { line-height: 1.55; overflow-wrap: anywhere; } + .rp-body p { margin: .45rem 0; } + .rp-body > :first-child { margin-top: 0; } + .rp-body > :last-child { margin-bottom: 0; } + .rp-body a { color: var(--accent, #06c); } + .rp-body img { max-width: 100%; height: auto; } + + /* Beeld als raster: één foto op volle breedte, meer als tegels, zodat een + lange reeks de knoppen niet van het scherm duwt. */ + /* Vaste rijhoogtes in plaats van verhoudingen: met verhoudingen groeit het + raster mee met de breedte, en werd op een desktop de eerste van drie foto's + zo hoog dat de knoppen onder de vouw van de uitklaplijst verdwenen. */ + .rp-media { display: grid; gap: 3px; margin: 10px 0 0; border-radius: 12px; overflow: hidden; } + .rp-media a { display: block; min-width: 0; } + .rp-media img { display: block; width: 100%; height: 100%; object-fit: cover; } + .rp-media-1 img { height: auto; max-height: 480px; } + .rp-media-2, .rp-media-3, .rp-media-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(120px, 28vw, 220px); } + .rp-media-3 a:first-child { grid-column: 1 / -1; } + .rp-compact .rp-media-1 img { max-height: 240px; } + .rp-compact .rp-media-2, .rp-compact .rp-media-3, .rp-compact .rp-media-4 { grid-auto-rows: 110px; } + + /* Een inhoudswaarschuwing: dicht tot je ervoor kiest. */ + .rp-cw > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; + min-height: 44px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; + background: color-mix(in srgb, #e8b04b 12%, transparent); border: 1px solid color-mix(in srgb, #e8b04b 35%, transparent); } + .rp-cw > summary::-webkit-details-marker { display: none; } + .rp-cw-text { min-width: 0; overflow-wrap: anywhere; } + .rp-cw-open { flex: 0 0 auto; font-size: .8rem; color: var(--accent, #06c); } + .rp-cw[open] > summary { margin: 0 0 10px; } + .rp-cw[open] .rp-cw-open { display: none; } + + /* De rij knoppen: gelijke tekens, het origineel rechts. */ + .rp-actions { display: flex; align-items: center; gap: 2px; margin: 10px -8px 0; padding: 2px 0; + border-top: 1px solid color-mix(in srgb, var(--ink, #000) 8%, transparent); } + .rp-actions form { margin: 0; } + .rp-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; + min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; + background: transparent; color: var(--ink-soft, #888); font: inherit; font-size: .88rem; font-weight: 600; + text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; + transition: background .12s, color .12s; } + .rp-act svg { flex: 0 0 18px; width: 18px; height: 18px; } + .rp-act:hover { background: color-mix(in srgb, var(--ink, #000) 6%, transparent); color: var(--ink, inherit); } + .rp-act:focus-visible { outline: 2px solid var(--accent, #06c); outline-offset: 2px; } + .rp-act[disabled] { opacity: .55; cursor: progress; } + .rp-like.is-on { color: #d99a1e; } + .rp-like.is-on svg { fill: currentColor; } + .rp-boost.is-on { color: #2fa85a; } + .rp-reply-btn[aria-expanded="true"] { color: var(--accent, #06c); } + .rp-src { margin-left: auto; } + .rp-primary { background: var(--accent, #06c); color: var(--paper, #fff); } + .rp-primary:hover { background: var(--accent, #06c); color: var(--paper, #fff); filter: brightness(1.08); } + .rp-profile .rp-actions { border-top: 0; margin-top: 4px; padding-bottom: 8px; } + .rp-profile .rp-actions form { flex: 0 0 auto; } + + /* Een peiling in de kaart. */ + .rp-poll { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; } + .rp-poll-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); } - .auth-poll-choice:hover { border-color: var(--accent); } - .auth-poll-choice input { accent-color: var(--accent); } - .auth-poll-res { position: relative; padding: 9px 12px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; gap: 8px; + .rp-poll-choice:hover { border-color: var(--accent, #06c); } + .rp-poll-choice input { accent-color: var(--accent, #06c); } + .rp-poll-res { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink, #000) 6%, transparent); } - .auth-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; } - .auth-poll-name { position: relative; z-index: 1; flex: 1; font-size: .95rem; } - .auth-poll-pct { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 500; } - .auth-poll-foot { font-size: .82rem; color: var(--ink-soft, #888); margin: .1rem 0 0; } - .auth-report { margin: .6rem 0 0; } - .auth-report summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft, #888); } - .auth-report summary:hover, .auth-report[open] summary { color: #c0392b; } - .auth-report[open] summary { margin-bottom: .5rem; } - .auth-report-note { font-size: .82rem; color: var(--ink-muted, #999); margin: 0 0 .5rem; } - /* Het gezicht van een profiel dat we net hebben opgehaald. */ - .remote-actor { display: flex; align-items: center; gap: .75rem; } - .remote-actor .auth-interact-meta { margin: 0; } - .remote-actor-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 48px; - background: color-mix(in srgb, var(--ink, #000) 8%, transparent); } + .rp-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent, #06c) 22%, transparent); } + .rp-poll-name { position: relative; flex: 1; } + .rp-poll-pct { position: relative; font-variant-numeric: tabular-nums; font-weight: 600; } + .rp-poll-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; + font-size: .82rem; color: var(--ink-soft, #888); } + + /* Wat er onder de kaart staat, op de volle pagina. */ + .rp-reply { margin: 12px 0 0; } + .rp-reply-where { margin: 0 0 8px; font-size: .85rem; line-height: 1.5; color: var(--ink-soft, #888); } + .rp-reply-foot { display: flex; justify-content: flex-end; margin-top: 4px; } + .rp-as { margin: 12px 2px 0; font-size: .8rem; color: var(--ink-soft, #999); } + .rp-report { margin: 6px 2px 0; } + .rp-report > summary { display: inline-block; padding: 8px 0; cursor: pointer; font-size: .8rem; color: var(--ink-soft, #888); } + .rp-report > summary:hover, .rp-report[open] > summary { color: #c0392b; } + .rp-report-form { display: flex; flex-direction: column; gap: .6rem; } + .rp-report-note { margin: 0; font-size: .82rem; color: var(--ink-soft, #999); } + .rp-report-form textarea { width: 100%; box-sizing: border-box; padding: .6rem .8rem; font: inherit; resize: vertical; border-radius: 12px; + border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent); background: var(--paper, #fff); color: var(--ink, #000); } + + /* De live-preview: open-link onder de kaart, en de kaart zonder rand-marge. */ + .rp-open { display: block; padding: 10px 4px 2px; text-align: right; font-weight: 600; font-size: .88rem; + color: var(--accent, #06c); text-decoration: none; } + .rp-open:hover { text-decoration: underline; } + .ss-remote { padding: 4px 0 6px; } + .ss-remote-note { padding: .8rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; } + .ss-remote-loading { display: flex; align-items: center; gap: 10px; padding: .9rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; } + .ss-remote-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; + border: 2px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent); border-top-color: var(--accent, #06c); + animation: ss-spin .8s linear infinite; } + @keyframes ss-spin { to { transform: rotate(360deg); } } + @media (prefers-reduced-motion: reduce) { .ss-remote-loading::before { animation: none; } } + + /* Smal scherm: alleen de tekens, gelijk verdeeld over de breedte. De woorden + blijven bestaan voor wie het scherm voorgelezen krijgt. */ + @media (max-width: 480px) { + .rp-card { padding: 12px 12px 2px; border-radius: 14px; } + .rp-actions { margin: 8px -4px 0; justify-content: space-between; } + .rp-act .rp-act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } + .rp-src { margin-left: 0; } + .rp-media-1 img { max-height: 360px; } + } Index: src/views/partials/remote-actor.ejs =================================================================== --- src/views/partials/remote-actor.ejs (revision 3ceaef6e9590862b66c5019b361edfac9e1af4fe) +++ src/views/partials/remote-actor.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) @@ -2,28 +2,43 @@ Een PERSOON van een andere server: wie het is, en de knop om te volgen. - Zelfde reden als remote-object: de zoekbalk en /authorize_interaction laten - hetzelfde zien, dus staat het op één plek. Het volgen zelf gaat naar - /authorize_interaction/follow, want daar zit de poort van de guardians - (shaer-p729) en die hoort niet twee keer geschreven te worden. + Dezelfde kaart als een post (remote-object), zodat een profiel en een post in + de zoekbalk er als familie uitzien en niet als twee formulieren. Het volgen + zelf gaat naar /authorize_interaction/follow, want daar zit de poort van de + guardians (shaer-p729) en die hoort niet twee keer geschreven te worden. - Verwacht: actor (uit resolveRemoteActor). Optioneel: cancelUrl, siteTitle. + Verwacht: actor (uit resolveRemoteActor). Optioneel: compact (de + live-preview), siteTitle. %> -<% const _annuleer = (typeof cancelUrl !== 'undefined' && cancelUrl) ? cancelUrl : '/'; %> -
- <% if (actor.actor_icon) { %> - - <% } %> -

- <%= t('fedi.follow_intro') %> - <%= actor.actor_name %> - <%= actor.actor_handle %> -

-
-
- -
- - <%= t('comments.cancel') %> -
-
-

<%= t('fedi.remote_as', { site: typeof siteTitle !== 'undefined' ? siteTitle : '' }) %>

+<% + const _compact = !!locals.compact; + const _initial = String(actor.actor_name || actor.actor_handle || '?').replace(/^@/, '').slice(0, 1).toUpperCase(); +%> +
+
+ <% if (actor.actor_icon) { %> + + <% } else { %> + + <% } %> +
+ <%= actor.actor_name || actor.actor_handle %> + <%= actor.actor_handle %> +
+
+ +
+<% if (!_compact) { %> +

<%= t('fedi.remote_as', { site: typeof siteTitle !== 'undefined' ? siteTitle : '' }) %>

+<% } %> Index: src/views/partials/remote-object.ejs =================================================================== --- src/views/partials/remote-object.ejs (revision 3ceaef6e9590862b66c5019b361edfac9e1af4fe) +++ src/views/partials/remote-object.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) @@ -1,103 +1,161 @@ <%# - Een object van een andere server: hoe het eruit ziet, en wat je ermee kunt. + Een post van een andere server: hoe hij eruit ziet, en wat je ermee kunt. - EEN PLEK, TWEE INGANGEN (de zoekbalk en /authorize_interaction). Dit stond - alleen op die tweede pagina, en toen de zoekfunctie een URL leerde herkennen - zou het een tweede render worden -- en daarmee een tweede plek waar een poort, - een sanitizer of een knop vergeten kan worden. De formulieren posten dus ook - vanaf de zoekpagina naar /authorize_interaction/..., want daar zit het werk en - daar zit de rechtencontrole. + EEN PLEK, DRIE INGANGEN: de live-preview onder de zoekbalk, de zoekpagina en + /authorize_interaction. Eén render, zodat een poort, een sanitizer of een knop + niet op één plek vergeten kan worden. De formulieren posten overal naar + /authorize_interaction/..., want daar zit het werk en de rechtencontrole. + + Hij ziet eruit als een POST, niet als een formulier over een post: kop met + gezicht, de inhoud, en één rij knoppen eronder. Wat daar vroeger omheen stond + (een zin "je reageert op", een aparte knop naar het origineel, twee grote + pillen, "of reageer:" en een altijd open antwoordvenster) is teruggebracht tot + die ene rij. Antwoorden klapt pas open als je erom vraagt, melden staat + onderaan en niet in de weg. Verwacht: target (uit resolveRemoteNote), uri, reacted {liked,boosted}. - Optioneel: mayReply (false = alleen lezen en reageren, geen antwoordvenster), - cancelUrl (waar Annuleren heen gaat, standaard het origineel), siteTitle. + Optioneel: + compact de live-preview: geen antwoordvenster en geen meldformulier; die + twee staan een tik verder op de volle pagina. Een editor in een + uitklaplijst is op een telefoon geen plek om te schrijven. + mayReply false = alleen lezen en reageren, geen antwoordknop + replyOpen het antwoordvenster staat al open (?reply=1, de terugval zonder JS) + reportOpen idem voor melden (?report=1) + cancelUrl waar Annuleren heen gaat zonder JS, standaard de volle pagina + siteTitle %> -<% const _cancel = (typeof cancelUrl !== 'undefined' && cancelUrl) ? cancelUrl : uri; %> -

- <%= t('fedi.remote_replying_to') %> - <%= target.actor_name %> - <%= target.actor_handle %> -

-
- <% if (target.content) { %>
<%- target.content %>
- <% } else if (target.preview) { %><%= target.preview %><% } %> - <% (target.images || []).forEach(function(im){ %> - - <% }); %> -
- <% if (target.url || uri) { %> - - - <%= t('fedi.remote_view_original') %> +<% + const _compact = !!locals.compact; + const _mayReply = locals.mayReply !== false; + const _full = '/authorize_interaction?uri=' + encodeURIComponent(uri); + const _cancel = locals.cancelUrl || _full; + const _liked = !!(locals.reacted && reacted.liked); + const _boosted = !!(locals.reacted && reacted.boosted); + const _src = target.url || uri; + // Een inhoudswaarschuwing wordt gerespecteerd. De oude render toonde alles + // gewoon open, ook wat de schrijver achter een waarschuwing had gezet. + const _warn = target.cw || (target.sensitive ? t('fedi.sensitive') : ''); + const _imgs = (target.images || []).slice(0, 4); + const _initial = String(target.actor_name || target.actor_handle || '?').replace(/^@/, '').slice(0, 1).toUpperCase(); +%> +
+
+ <% if (target.actor_icon) { %> + + <% } else { %> + + <% } %> +
+ <%= target.actor_name || target.actor_handle %> + <%= target.actor_handle %> +
+
+ + <% if (_warn) { %> +
+ <%= _warn %><%= t('fedi.cw_open') %> + <% } %> + <% if (target.content) { %> +
<%- target.content %>
+ <% } else if (target.preview) { %> +

<%= target.preview %>

+ <% } %> + <% if (_imgs.length) { %> +
+ <% _imgs.forEach(function (im) { %> + + <% }); %> +
+ <% } %> + <% if (_warn) { %> +
+ <% } %> + + <% if (target.poll) { var _pl = target.poll; var _tot = _pl.options.reduce(function(s,o){return s+(o.count||0);},0); var _vn = (_pl.voters!=null?_pl.voters:_tot); %> + <% if (!_pl.closed) { %> +
+ + <% _pl.options.forEach(function(o){ %> + + <% }); %> +
+ <%= _vn %> <%= _vn === 1 ? t('poll.voter_one') : t('poll.voter_many') %><% if (_pl.endTime) { %> · <%= t('poll.closes') %> <%= new Date(_pl.endTime).toLocaleString() %><% } %><% if (_pl.multiple) { %> · <%= t('poll.multiple') %><% } %> + +
+
+ <% } else { %> +
+ <% _pl.options.forEach(function(o){ var _pct = _tot ? Math.round((o.count||0)*100/_tot) : 0; %> +
<%= o.name %><%= _pct %>%
+ <% }); %> +
<%= _vn %> <%= _vn === 1 ? t('poll.voter_one') : t('poll.voter_many') %> · <%= t('poll.closed') %>
+
+ <% } %> + <% } %> + + <%# Eén rij. Op een smalle telefoon vallen de woorden weg en blijven de + tekens staan, elk minstens 44 punten groot: een duim is geen muis. De + woorden blijven voor een schermlezer wel gewoon bestaan. %> + +
+ +<% if (_compact) { %> + <%= t('fedi.open_full') %> → +<% } else { %> + <% if (_mayReply) { %> + <%# Dicht tot je op Reageer tikt. Zonder JS opent ?reply=1 hem, zodat de + knop ook dan ergens heen gaat. %> +
> +

<%= t('fedi.reply_where') %>

+ <%- include('./reply-editor', { + action: '/authorize_interaction', + hiddenFields: [{ name: 'uri', value: uri }], + placeholder: t('fedi.reply_ph'), + submitLabel: t('fedi.send'), + rows: 4, + participants: (target && target.actor_uri) ? [{ + uri: target.actor_uri, + url: target.actor_url || target.actor_uri, + handle: target.actor_handle || '', + }] : [], + }) %> +
<%= t('comments.cancel') %>
+
+ <% } %> +

<%= t('fedi.remote_as', { site: siteTitle }) %>

+
> + <%= t('fedi.report_open') %> +
+ + +

<%= t('fedi.report_where') %>

+ +
+
+
+<% } %> Index: src/views/partials/remote-preview.ejs =================================================================== --- src/views/partials/remote-preview.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) +++ src/views/partials/remote-preview.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) @@ -0,0 +1,28 @@ +<%# + De live-preview van een geplakt adres, onder de zoekbalk (shaer-utpi). + + Een los fragment, geen pagina: de zoekbalk haalt dit op terwijl je plakt en + zet het in de uitklaplijst. Daarom: + + - GEEN SCRIPT. Wat via innerHTML binnenkomt draait niet, en onder de + strenge CSP zou het ook niet mogen. Het gedrag (waarderen en boosten + zonder de pagina te verlaten) zit in chrome.js, dat op elke pagina staat. + - DE OPMAAK REIST MEE. De overlay staat op elke pagina en die heeft de + opmaak van de kaart niet vanzelf; style-src staat inline toe. + - COMPACT. Antwoorden en melden gebeuren op de volle pagina: een editor in + een uitklaplijst is op een telefoon geen plek om te schrijven. + + Verwacht: remote, remoteKind ('note' | 'actor' | null), remoteUri, reacted, + siteTitle. +%> +<%- include('./fedi-interact-styles') %> +
+
<%= t('search.section_fediverse') %>
+ <% if (remote && remoteKind === 'note') { %> + <%- include('./remote-object', { target: remote, uri: remoteUri, reacted: reacted, siteTitle: siteTitle, compact: true }) %> + <% } else if (remote && remoteKind === 'actor') { %> + <%- include('./remote-actor', { actor: remote, siteTitle: siteTitle, compact: true }) %> + <% } else { %> +
<%= t('fedi.remote_notfound') %>
+ <% } %> +
Index: src/views/partials/topnav.ejs =================================================================== --- src/views/partials/topnav.ejs (revision 3ceaef6e9590862b66c5019b361edfac9e1af4fe) +++ src/views/partials/topnav.ejs (revision 9eb6e1bceee7058678085d70abe8ff4dffe8bff8) @@ -178,6 +178,6 @@ <%# De teksten staan op het element dat ze gebruikt, niet in het script: een module is een statisch bestand en kan geen vertaling interpoleren. %> -