Changeset 04c70fc in Klonkt

Timestamp:

06/27/2026 12:22:38 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

204bd74

Parents:

dd7daef

Message:

style(fedi): neater Edit button — pill in the foot row (left), like the other buttons

• views/pages/authorize-interaction.ejs — the reply Edit toggle is now a pill button styled like Go-to-post / Delete, placed first (left) in the manage-card foot; Delete is pushed right. The edit textarea expands below via a small JS toggle (no more <details>). + CSS.

File:

• src/views/pages/authorize-interaction.ejs (modified) (3 diffs)

src/views/pages/authorize-interaction.ejs

@@ -33 +33 @@
             <div class="fedi-manage-content"><%- m.content %></div>
             <div class="fedi-manage-foot">
+              <button type="button" class="fedi-edit-btn" aria-expanded="false"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg> <%= t('fedi.edit') %></button>
               <% if (m.in_reply_to) { %>
               <a class="fedi-goto-btn" href="<%= m.in_reply_to %>" target="_blank" rel="nofollow noopener"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg> <%= t('fedi.goto_post') %></a>
-              <% } else { %><span></span><% } %>
-              <form method="post" action="/fediverse/<%= m.id %>/delete" onsubmit="return confirm('<%= t('fedi.delete_confirm') %>')">
+              <% } %>
+              <form method="post" action="/fediverse/<%= m.id %>/delete" class="fedi-del-form" onsubmit="return confirm('<%= t('fedi.delete_confirm') %>')">
                 <button type="submit" class="fedi-del-btn"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg> <%= t('comments.delete') %></button>
               </form>
             </div>
-            <details class="fedi-edit">
-              <summary class="fedi-edit-toggle"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg> <%= t('fedi.edit') %></summary>
-              <form method="post" action="/fediverse/<%= m.id %>/edit" class="fedi-edit-form">
-                <textarea name="text" rows="3" maxlength="2000" class="fedi-edit-ta"><%= m.editable %></textarea>
-                <div class="fedi-edit-actions"><button type="submit" class="fedi-edit-save"><%= t('fedi.save_edit') %></button></div>
-              </form>
-            </details>
+            <form method="post" action="/fediverse/<%= m.id %>/edit" class="fedi-edit-form">
+              <textarea name="text" rows="3" maxlength="2000" class="fedi-edit-ta"><%= m.editable %></textarea>
+              <div class="fedi-edit-actions"><button type="submit" class="fedi-edit-save"><%= t('fedi.save_edit') %></button></div>
+            </form>
           </li>
         <% }); %>
       </ul>
+      <script>
+      (function () {
+        if (window.__fediEditWired) return; window.__fediEditWired = true;
+        document.addEventListener('click', function (e) {
+          var b = e.target.closest && e.target.closest('.fedi-edit-btn');
+          if (!b) return;
+          var li = b.closest('.fedi-manage-item'); if (!li) return;
+          var form = li.querySelector('.fedi-edit-form'); if (!form) return;
+          var open = form.classList.toggle('is-open');
+          b.classList.toggle('is-open', open);
+          b.setAttribute('aria-expanded', open ? 'true' : 'false');
+          if (open) { var ta = form.querySelector('textarea'); if (ta) ta.focus(); }
+        });
+      })();
+      </script>
     <% } %>
     <p class="auth-interact-note"><a href="/"><%= t('fedi.remote_back') %></a></p>
@@ -209 +222 @@
   .fedi-manage-content p:first-child { margin-top: 0; }
   .fedi-manage-content p:last-child { margin-bottom: 0; }
-  .fedi-manage-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .65rem; }
+  .fedi-manage-foot { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
   .fedi-goto-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid color-mix(in srgb, var(--accent, #888) 45%, transparent); background: color-mix(in srgb, var(--accent, #888) 12%, transparent); color: var(--accent, #06c); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; text-decoration: none; transition: background .15s ease; }
   .fedi-goto-btn:hover { background: color-mix(in srgb, var(--accent, #888) 22%, transparent); }
@@ -224 +237 @@
   @keyframes fedi-bm-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
   .fedi-bm-help { color: var(--ink-soft, #888); font-size: .82rem; line-height: 1.5; margin: .6rem 0 0; }
-  .fedi-edit { margin: .4rem 0 0; }
-  .fedi-edit > summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none;
-    font-size: .78rem; font-weight: 600; color: var(--ink-soft, #888); padding: .2rem 0; }
-  .fedi-edit > summary::-webkit-details-marker { display: none; }
-  .fedi-edit[open] > summary { color: var(--accent); }
-  .fedi-edit-form { margin: .5rem 0 0; }
+  .fedi-edit-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid color-mix(in srgb, var(--ink, #888) 28%, transparent);
+    background: color-mix(in srgb, var(--ink, #888) 8%, transparent); color: var(--ink-soft, #aaa); border-radius: 999px; padding: .3rem .8rem;
+    font: inherit; font-size: .82rem; cursor: pointer; transition: background .15s ease, color .15s ease; }
+  .fedi-edit-btn:hover { background: color-mix(in srgb, var(--ink, #888) 16%, transparent); }
+  .fedi-edit-btn.is-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+  .fedi-del-form { margin-left: auto; }
+  .fedi-edit-form { display: none; margin: .55rem 0 0; }
+  .fedi-edit-form.is-open { display: block; }
   .fedi-edit-ta { width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; padding: .55rem .7rem;
     border: 1.5px solid var(--rule, #333); border-radius: 10px; background: var(--paper-2, #14141a); color: var(--ink, #eee); font: inherit; font-size: .9rem; }