[object Object]

← back to Sdcc Journalists Viewer

journalists viewer: make column control explicit — relabel Density→Columns, extend 1–8, live count readout, clamp card scale so 6–8 cols stay readable

0ef7365118ce22068734e8046d4c2f8bf5ab2696 · 2026-07-23 11:31:58 -0700 · Steve Abrams

Files touched

Diff

commit 0ef7365118ce22068734e8046d4c2f8bf5ab2696
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 23 11:31:58 2026 -0700

    journalists viewer: make column control explicit — relabel Density→Columns, extend 1–8, live count readout, clamp card scale so 6–8 cols stay readable
---
 public/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 419ce6e..143b9c6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -110,7 +110,7 @@ table.list tr.notes-row td { padding-top:2px; }
       <option value="outlet">Outlet A→Z</option>
       <option value="artdate">Latest article date</option>
     </select>
-    <span class="density">Density <input type="range" id="density" min="1" max="5" step="1" value="3"></span>
+    <span class="density">Columns <input type="range" id="density" min="1" max="8" step="1" value="3"><b id="colcount" style="color:var(--pri);min-width:1.2em;text-align:center">3</b></span>
   </div>
   <div class="grid" id="grid"></div>
   <div class="table-wrap" id="tablewrap" style="display:none"></div>
@@ -357,7 +357,9 @@ document.getElementById("sort").onchange=e=>{ LS("sort",e.target.value); render(
 document.getElementById("density").oninput=e=>{
   const v=+e.target.value; LS("density",v);
   document.documentElement.style.setProperty("--cols", v);
-  document.documentElement.style.setProperty("--scale", (1.25 - v*0.08).toFixed(2));
+  // shrink cards as columns grow, clamped so text stays readable at 6–8 cols
+  document.documentElement.style.setProperty("--scale", Math.max(0.7, 1.25 - v*0.08).toFixed(2));
+  document.getElementById("colcount").textContent = v;
 };
 document.getElementById("refreshBtn").onclick=async()=>{
   const b=document.getElementById("refreshBtn"); b.disabled=true; b.textContent="⟳ pulling…";

← 179ec37 auto-save: 2026-07-23T11:20:37 (1 files) — data/journalists.  ·  back to Sdcc Journalists Viewer  ·  journalists viewer: raise column max 8→12 for ultrawide moni 1ab3a67 →