(steve) 01/01: Empty hint should be excluded from sortable elements

[tison]

This is an automated email from the ASF dual-hosted git repository.

tison pushed a commit to branch sortable-placeholder
in repository https://gitbox.apache.org/repos/asf/steve.git

commit 0bce64a47704608ac25a740b9efd50be069dd313
Author: tison <wander4...@gmail.com>
AuthorDate: Wed Feb 25 20:20:50 2026 +0800

    Empty hint should be excluded from sortable elements
    
    Signed-off-by: tison <wander4...@gmail.com>
---
 v3/server/templates/vote-on.ezt | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/v3/server/templates/vote-on.ezt b/v3/server/templates/vote-on.ezt
index bf14ec5..a8a1324 100644
--- a/v3/server/templates/vote-on.ezt
+++ b/v3/server/templates/vote-on.ezt
@@ -76,7 +76,9 @@
   .sortable-chosen { box-shadow: 0 2px 8px rgba(13,110,253,.25); }
 
   /* empty-state hint */
-  .stv-panel-empty {
+  #stv-ranked-list.is-empty::after {
+    content: "Drag candidates here to rank them";
+    display: block;
     color: #adb5bd;
     font-size: .85rem;
     text-align: center;
@@ -291,9 +293,6 @@
               </button>
             </div>
             <div class="stv-panel" id="stv-ranked-list">
-              <div class="stv-panel-empty" id="stv-ranked-empty">
-                Drag candidates here to rank them
-              </div>
             </div>
           </div>
 
@@ -436,12 +435,6 @@
   }
 
   function onSortEnd() {
-    // Remove the empty-hint element if it got sorted (it shouldn't, but guard)
-    const hint = document.getElementById('stv-ranked-empty');
-    const rp   = document.getElementById('stv-ranked-list');
-    if (hint && hint.parentElement === rp && rp.children.length > 1) {
-      hint.remove();
-    }
     updateRankNumbers();
     updateEmptyHint();
   }
@@ -454,19 +447,8 @@
 
   function updateEmptyHint() {
     const rp    = document.getElementById('stv-ranked-list');
-    let   hint  = document.getElementById('stv-ranked-empty');
     const items = rp.querySelectorAll('.stv-item');
-    if (items.length === 0) {
-      if (!hint) {
-        hint = document.createElement('div');
-        hint.className = 'stv-panel-empty';
-        hint.id        = 'stv-ranked-empty';
-        hint.textContent = 'Drag candidates here to rank them';
-      }
-      rp.appendChild(hint);
-    } else if (hint) {
-      hint.remove();
-    }
+    rp.classList.toggle('is-empty', items.length === 0);
   }
 
   // ── Save ranking back to hidden input ────────────────────────────────────