Changeset 0dba092 in Klonkt

Timestamp:

06/24/2026 03:09:22 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

914eb9f

Parents:

749c183

Message:

style(activitypub): reply field as a floating popover (zero layout shift)

The address field now opens as an absolutely-positioned popover below the button
(appended to body) instead of inline — so neither the post CTA nor a comment row
reflows. Closes on outside-click, Escape, scroll, or cancel; toggles on re-click.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (2 diffs)
• views/pages/post.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -4419 +4419 @@
 
 /* Reply-via-fediverse CTA on post pages */
-.post-fediverse-cta { margin: 1.75rem 0; display: flex; align-items: center; min-height: 2.4rem; }
+.post-fediverse-cta { margin: 1.75rem 0; }
 .fedi-remote-reply-btn { display: inline-flex; align-items: center; gap: .45rem; }
 .post-fediverse-cta .fedi-remote-reply-btn {
@@ -4432 +4432 @@
 
 /* Inline "reply via fediverse" address form (replaces the browser prompt) */
-.fedi-remote-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; }
+.fedi-remote-form {
+  position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: .4rem;
+  padding: .4rem; border-radius: 999px;
+  background: var(--paper-2, var(--paper, #fff));
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
+  box-shadow: 0 10px 30px rgba(0,0,0,.28);
+}
 .fedi-remote-form input {
   height: 2.2rem; padding: 0 .9rem; border-radius: 999px; font: inherit; min-width: 230px;

src/views/pages/post.ejs

@@ -102 +102 @@
   (function(){
     if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
+    var current = null, currentBtn = null;
+    function close(){ if (current) { current.remove(); current = null; currentBtn = null; } }
     function go(raw, uri){
       var d = (raw||'').trim().replace(/^@?[^@\s]*@/, '').replace(/^https?:\/\//i, '').replace(/\/.*$/, '').trim();
       if (d) location.href = 'https://' + d + '/authorize_interaction?uri=' + encodeURIComponent(uri||'');
     }
-    function closeForm(f){ if (!f) return; if (f._btn) f._btn.style.display = ''; f.remove(); }
+    function place(f, b){
+      var r = b.getBoundingClientRect();
+      f.style.top = (r.bottom + window.scrollY + 6) + 'px';
+      f.style.left = Math.max(8, Math.min(r.left + window.scrollX, window.scrollX + window.innerWidth - 340)) + 'px';
+    }
     document.addEventListener('click', function(e){
-      var cancel = e.target.closest && e.target.closest('.fedi-remote-cancel');
-      if (cancel) { closeForm(cancel.closest('.fedi-remote-form')); return; }
+      if (e.target.closest && e.target.closest('.fedi-remote-cancel')) { close(); return; }
+      if (current && e.target.closest && e.target.closest('.fedi-remote-form')) return; // click inside → keep
       var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
-      if (!b) return;
-      e.preventDefault();
-      closeForm(document.querySelector('.fedi-remote-form')); // close any open one (restores its button)
-      var f = document.createElement('form');
-      f.className = 'fedi-remote-form';
-      f.dataset.uri = b.getAttribute('data-fedi-uri') || '';
-      f._btn = b;
-      f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false">'
-        + '<button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button>'
-        + '<button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
-      var inp = f.querySelector('input');
-      inp.placeholder = b.getAttribute('data-fedi-ph') || '@name@server.social';
-      b.style.display = 'none';                  // replace the button in place → no layout jump
-      b.parentNode.insertBefore(f, b.nextSibling);
-      inp.focus();
+      if (b) {
+        e.preventDefault();
+        if (currentBtn === b) { close(); return; }   // toggle off
+        close();
+        var f = document.createElement('form');
+        f.className = 'fedi-remote-form';
+        f.dataset.uri = b.getAttribute('data-fedi-uri') || '';
+        f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false">'
+          + '<button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button>'
+          + '<button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
+        f.querySelector('input').placeholder = b.getAttribute('data-fedi-ph') || '@name@server.social';
+        document.body.appendChild(f);            // floating popover → no layout reflow
+        place(f, b); current = f; currentBtn = b;
+        f.querySelector('input').focus();
+        return;
+      }
+      if (current) close(); // click anywhere else closes it
     });
     document.addEventListener('submit', function(e){
       var f = e.target.closest && e.target.closest('.fedi-remote-form');
-      if (!f) return;
-      e.preventDefault();
+      if (!f) return; e.preventDefault();
       go(f.querySelector('input').value, f.dataset.uri);
     });
+    document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
+    window.addEventListener('scroll', close, true);
   })();
   </script>

src/views/shell.ejs

@@ -175 +175 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=43">
+<link rel="stylesheet" href="/assets/css/style.css?v=44">
 
 <!-- Audio player styles: loaded on every page so the mini-player works