fleet viewer: make hero drop zone the whole card, not just the chip

2df70d0cd1c52033cb4483b8da5505251a7674d2 · 2026-06-01 15:11:33 -0700 · SteveStudio2

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M viewer/index.html

Diff

commit 2df70d0cd1c52033cb4483b8da5505251a7674d2
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Mon Jun 1 15:11:33 2026 -0700

    fleet viewer: make hero drop zone the whole card, not just the chip
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 viewer/index.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/viewer/index.html b/viewer/index.html
index cf4c045..2d4064f 100644
--- a/viewer/index.html
+++ b/viewer/index.html
@@ -20,7 +20,7 @@
   .stat{display:inline-flex;gap:5px;align-items:center}
   .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
   .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:14px;padding:20px 24px}
-  .card{background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .12s,border-color .12s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
+  .card{position:relative;background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .12s,border-color .12s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
   .card:hover{transform:translateY(-2px);border-color:var(--accent)}
   .accentbar{height:5px}
   .thumb{aspect-ratio:16/9;background:#0a0b0d center/cover no-repeat;border-bottom:1px solid var(--rule);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
@@ -29,8 +29,9 @@
   .thumb .heroref{position:absolute;top:6px;right:6px;z-index:4;width:26px;height:26px;padding:0;border-radius:50%;background:rgba(14,15,18,.72);color:var(--ink);border:1px solid var(--rule);font-size:13px;font-weight:400;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s,background .12s}
   .thumb:hover .heroref{opacity:1}
   .thumb .heroref:hover{background:var(--accent);color:#1a1a1a;border-color:var(--accent)}
-  .thumb.dragover{outline:2px dashed var(--accent);outline-offset:-5px}
-  .thumb.dragover::after{content:'drop image to set hero';position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(14,15,18,.66);color:var(--ink);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
+  /* whole card is the drop zone — overlay covers the full card so the target is large */
+  .card.dragover{border-color:var(--accent)}
+  .card.dragover::after{content:'drop image to set hero';position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;background:rgba(14,15,18,.74);color:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:2px dashed var(--accent);border-radius:10px;pointer-events:none}
   .thumb.busy{opacity:.55}
   #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--panel);color:var(--ink);border:1px solid var(--rule);border-radius:8px;padding:9px 16px;font-size:12px;box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
   #toast.show{opacity:1}
@@ -195,11 +196,12 @@ function extractUrl(dt){
   const txt=(dt.getData('text/plain')||'').trim(); if(/^https?:\/\/.+\.(jpg|jpeg|png|webp|avif|gif)/i.test(txt)) return txt;
   return null;
 }
-$('#grid').addEventListener('dragover', (e)=>{ const t=e.target.closest('.thumb'); if(!t) return; e.preventDefault(); e.dataTransfer.dropEffect='copy'; t.classList.add('dragover'); });
-$('#grid').addEventListener('dragleave', (e)=>{ const t=e.target.closest('.thumb'); if(t && !t.contains(e.relatedTarget)) t.classList.remove('dragover'); });
+$('#grid').addEventListener('dragover', (e)=>{ const c=e.target.closest('.card'); if(!c) return; e.preventDefault(); e.dataTransfer.dropEffect='copy'; c.classList.add('dragover'); });
+$('#grid').addEventListener('dragleave', (e)=>{ const c=e.target.closest('.card'); if(c && !c.contains(e.relatedTarget)) c.classList.remove('dragover'); });
 $('#grid').addEventListener('drop', async (e)=>{
-  const thumb=e.target.closest('.thumb'); if(!thumb) return;
-  e.preventDefault(); thumb.classList.remove('dragover');
+  const card=e.target.closest('.card'); if(!card) return;
+  e.preventDefault(); card.classList.remove('dragover');
+  const thumb=card.querySelector('.thumb'); if(!thumb) return;
   const d=thumb.dataset.domain; const dt=e.dataTransfer;
   thumb.classList.add('busy');
   try{

← 14428b6 viewer: harden rescrape single-flight against client disconn · back to Dw Fleet Registry · normalize header names → domain name across 53 sites (remove 8a825a8 →