[object Object]

← back to Rentv

la-commercial: wire every datum to deeper data per the all-data-points-href rule — marquee assets + recent-activity rows now drill to their LA County Assessor parcel record (by AIN, the cited source); firm cards drill into the CRE Directory filtered to that firm (internal, no external firm link-out). Hover affordances + ↗ on external source links

c98cd5961195264c6ffaf7a949b3dee1e0011640 · 2026-08-05 17:07:22 -0700 · Steve

Files touched

Diff

commit c98cd5961195264c6ffaf7a949b3dee1e0011640
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Aug 5 17:07:22 2026 -0700

    la-commercial: wire every datum to deeper data per the all-data-points-href rule — marquee assets + recent-activity rows now drill to their LA County Assessor parcel record (by AIN, the cited source); firm cards drill into the CRE Directory filtered to that firm (internal, no external firm link-out). Hover affordances + ↗ on external source links
---
 public/la-commercial.html | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/public/la-commercial.html b/public/la-commercial.html
index 6a411df5..b5e3ef17 100644
--- a/public/la-commercial.html
+++ b/public/la-commercial.html
@@ -33,7 +33,8 @@
   section{margin:26px 0}
   h2.sec{font-size:14px;text-transform:uppercase;letter-spacing:.08em;border-top:3px solid var(--ink);padding-top:10px;margin-bottom:14px}
   .assets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
-  .asset{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px}
+  .asset{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:block;transition:border-color .15s,box-shadow .15s}
+  .asset:hover{border-color:var(--red);box-shadow:0 4px 16px rgba(0,0,0,.06)}
   .asset .tag{font-size:11px;color:var(--red);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
   .asset .v{font-family:var(--serif);font-size:26px;font-weight:700;margin:4px 0 2px}
   .asset .a{font-size:14px;font-weight:600}
@@ -43,9 +44,12 @@
   th{background:var(--wash);text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--sub)}
   td.n{font-weight:600} td.v{font-family:var(--serif);font-weight:700}
   .firms{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
-  .firm{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px}
+  .firm{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;display:block;transition:border-color .15s}
+  .firm:hover{border-color:var(--red)}
   .firm .fn{font-size:14px;font-weight:700;line-height:1.25} .firm .fa{font-size:13px;color:var(--red);font-weight:700;margin-top:6px}
   .note{font-size:12px;color:var(--sub);margin-top:8px}
+  .ext::after{content:" ↗";font-size:.82em;color:var(--sub);font-weight:400}
+  td.n a{color:inherit} td.n a:hover{color:var(--red);text-decoration:underline}
   footer{background:var(--ink);color:#8b939b;margin-top:40px;padding:26px 0;font-size:12px}
   footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
   @media(max-width:860px){.assets,.firms{grid-template-columns:1fr 1fr}}
@@ -79,18 +83,22 @@
 <script>
 const $=s=>document.querySelector(s), usd=n=>n==null?'—':'$'+Number(n).toLocaleString();
 function dstr(d){return d?new Date(d).toLocaleDateString(undefined,{year:'numeric',month:'short',day:'numeric'}):'—';}
+// Every datum drills to its source (Steve's rule): assets/records → the LA County Assessor
+// parcel record (the cited source, keyed by AIN); firms → our CRE Directory filtered to that firm.
+const AIN=a=>'https://portal.assessor.lacounty.gov/parceldetail/'+encodeURIComponent(a);
+const attr=s=>String(s==null?'':s).replace(/"/g,'&quot;');
 (async()=>{
   const d=await (await fetch('/api/la-commercial')).json();
   $('#fresh').textContent=d.fetched_at?('Data as of '+new Date(d.fetched_at).toLocaleString()):'';
-  $('#marquee').innerHTML=(d.marquee||[]).slice(0,9).map(r=>`<div class="asset">
+  $('#marquee').innerHTML=(d.marquee||[]).slice(0,9).map(r=>`<a class="asset${r.ain?' ext':''}"${r.ain?` href="${AIN(r.ain)}" target="_blank" rel="noopener" title="LA County Assessor parcel ${attr(r.ain)}"`:''}>
     <div class="tag">${r.type_label||''}</div>
     <div class="v">${usd(r.assessed_total)}</div>
     <div class="a">${r.address||'—'}${r.city?', '+r.city:''}</div>
-    ${r.brief?`<div class="brief">${r.brief}</div>`:''}</div>`).join('');
+    ${r.brief?`<div class="brief">${r.brief}</div>`:''}</a>`).join('');
   $('#recent').innerHTML='<table><thead><tr><th>Recorded</th><th>Address</th><th>Type</th><th>Assessed</th></tr></thead><tbody>'+
-    (d.recent||[]).map(r=>`<tr><td>${dstr(r.recording_date)}</td><td class="n">${r.address||'—'}${r.city?', '+r.city:''}</td><td>${r.type_label||''}</td><td class="v">${usd(r.assessed_total)}</td></tr>`).join('')+'</tbody></table>';
-  $('#firms').innerHTML=(d.firms||[]).slice(0,12).map(f=>`<div class="firm">
-    <div class="fn">${f.name}</div><div class="fa">${(f.agent_count||0).toLocaleString()} agents</div></div>`).join('');
+    (d.recent||[]).map(r=>{const lbl=r.address?`${r.address}${r.city?', '+r.city:''}`:(r.ain?`Parcel ${r.ain}`:'—');const cell=r.ain?`<a class="ext" href="${AIN(r.ain)}" target="_blank" rel="noopener" title="LA County Assessor parcel ${attr(r.ain)}">${lbl}</a>`:lbl;return `<tr><td>${dstr(r.recording_date)}</td><td class="n">${cell}</td><td>${r.type_label||''}</td><td class="v">${usd(r.assessed_total)}</td></tr>`;}).join('')+'</tbody></table>';
+  $('#firms').innerHTML=(d.firms||[]).slice(0,12).map(f=>`<a class="firm" href="/directory?tab=firms&q=${encodeURIComponent(f.name||'')}" title="See ${attr(f.name)} in the CRE Directory">
+    <div class="fn">${f.name}</div><div class="fa">${(f.agent_count||0).toLocaleString()} agents</div></a>`).join('');
 })();
 </script>
 </body>

← b69f5973 blog density: Cody gate — hide the density slider on phones  ·  back to Rentv  ·  la-commercial: Cody gate — add esc() and escape all API-data 4b0dfdfe →