Changeset a623e7e in Klonkt for src/views/pages/post-edit.ejs

Timestamp:

06/19/2026 01:09:31 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c1a4147

Parents:

a4f6827

Message:

ui(editor): tap-to-edit pill sticky at the bottom instead of centred

Central pill (ugly, in the middle of the text) + dashed border removed.
Now a .pe-edit-hint that sticks to the bottom of the container on touch
(bottom 4.5rem, above the Save/Cancel bar), pointer-events:none; tapping
the field opens fullscreen.

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

File:

• src/views/pages/post-edit.ejs (modified) (2 diffs)

src/views/pages/post-edit.ejs

@@ -137 +137 @@
              data-placeholder="Begin met schrijven…"></div>
 
+        <%# Sticky "tik om te bewerken"-hint (alleen zichtbaar op touch + niet-fullscreen
+            via CSS). Puur visueel (pointer-events:none); de tik op het veld opent fullscreen. %>
+        <div class="pe-edit-hint" aria-hidden="true">✎ Tik om te bewerken</div>
+
         <%# Hidden field is what actually submits to the server. The visible
             contenteditable's serialized HTML is copied here on submit. %>
@@ -479 +483 @@
 
 /* Touch: het inline content-veld is geen tekstveld maar een tap-vlak → fullscreen
-   bewerken. Een duidelijke, GECENTREERDE "tik om te bewerken"-pill + dashed rand
-   maken dat onmiskenbaar. */
+   bewerken. Een "✎ Tik om te bewerken"-pill plakt sticky onderaan de container,
+   zodat de hint altijd in beeld is zonder midden in de tekst te staan. */
 .pe-editor.pe-tap-to-edit { cursor: pointer; }
+.pe-edit-hint { display: none; }
 @media (pointer: coarse) {
-  .pe-editor-frame:not(.pe-fs) { position: relative; }
-  .pe-editor-frame:not(.pe-fs) .pe-editor {
-    outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
-    outline-offset: -6px;
-  }
-  .pe-editor-frame:not(.pe-fs)::after {
-    content: "✎ Tik om te bewerken";
-    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+  .pe-editor-frame:not(.pe-fs) .pe-edit-hint {
+    display: block;
+    position: sticky;
+    bottom: 4.5rem;   /* boven de sticky Opslaan/Annuleren-balk */
+    width: max-content;
+    max-width: calc(100% - 2rem);
+    margin: .4rem auto;
     background: var(--accent); color: #fff;
-    font-size: 1rem; font-weight: 700; padding: .6rem 1.1rem; border-radius: 999px;
-    pointer-events: none; white-space: nowrap;
-    box-shadow: 0 6px 20px rgba(0,0,0,.4);
+    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;
   }
 }