← back to Rentv 2026
rentv front page: drawer groups collapse on load — click a title to expand (accordion, both hamburgers, covers async Regions group)
faad4bab2883cde051628e6adca3a6c03ab6557a · 2026-08-06 10:36:10 -0700 · steve@designerwallcoverings.com
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit faad4bab2883cde051628e6adca3a6c03ab6557a
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date: Thu Aug 6 10:36:10 2026 -0700
rentv front page: drawer groups collapse on load — click a title to expand (accordion, both hamburgers, covers async Regions group)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/index.html | 29 +++++++++++++++++++++++------
1 file changed, 23 insertions(+), 6 deletions(-)
diff --git a/public/index.html b/public/index.html
index ca5466b4..62466efd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,7 +30,16 @@
.snap{padding:12px 18px;border-bottom:1px solid #1c232b;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.snap .m{background:#11161c;border:1px solid #1c232b;border-radius:8px;padding:8px 10px}
.snap .m .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#7b848d}.snap .m .v{font-size:15px;font-weight:800;margin-top:2px}.snap .m .v.up{color:#37d67a}.snap .m .v.dn{color:#ff6b6b}
- .grp{padding:14px 18px 4px}.grp .gt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6b747d;margin-bottom:6px}
+ /* Collapsible group ("module"): the .gt title is a click header; the <nav> after it
+ is the panel. Default = COLLAPSED (all modules closed on load) via sibling adjacency,
+ so even the Regions group rentv-nav.js injects async starts closed with no JS timing. */
+ .grp{padding:14px 18px 4px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
+ .grp .gt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6b747d;margin-bottom:0}
+ .grp:hover .gt{color:#aeb6bd}
+ .grp::after{content:'▸';color:#6b747d;font-size:12px;line-height:1;transition:transform .18s;flex:none}
+ .grp.open::after{transform:rotate(90deg)}
+ .drawer .grp + nav{display:none}
+ .drawer .grp.open + nav{display:block}
.drawer nav a{display:block;padding:9px 18px;color:#dbe1e7;font-size:14.5px;border-left:3px solid transparent}
.drawer nav a:hover{background:#141a21;border-left-color:var(--red);color:#fff}
.drawer nav a.active{background:#141a21;border-left-color:var(--red);color:#fff;font-weight:700}
@@ -53,7 +62,7 @@
.wrap{max-width:1240px;margin:0 auto;padding:0 22px;width:100%}
.hero{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:34px;align-items:center;padding:28px 0}
.lead{padding-right:34px;border-right:1px solid #e2ded9}
- .lead .im{display:block;height:380px;border-radius:6px;margin-bottom:16px;background:#12161a center/cover;box-shadow:inset 0 -90px 70px -50px rgba(0,0,0,.35)}
+ .lead .im{display:block;height:380px;border-radius:6px;margin-bottom:16px;background:linear-gradient(135deg,#1f2a37,#c8102e) center/cover;box-shadow:inset 0 -90px 70px -50px rgba(0,0,0,.35)}
.lead .tag{color:var(--red);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lead h1{font-family:'Playfair Display',serif;font-size:clamp(44px,3.9vw,62px);line-height:1.08;margin:9px 0 12px;font-weight:700;letter-spacing:-.01em}
.lead .byl{color:#6b7178;font-size:13px}
@@ -61,7 +70,7 @@
.aside{display:flex;flex-direction:column;gap:0}
.aside a{display:grid;grid-template-columns:80px 1fr;gap:13px;border-bottom:1px solid #e8e4e0;padding:13px 0}
.aside a:first-child{padding-top:0}
- .aside .im{height:58px;border-radius:5px;background:#12161a center/cover;display:block}
+ .aside .im{height:58px;border-radius:5px;background:linear-gradient(135deg,#1f2a37,#c8102e) center/cover;display:block}
.aside .tag{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.aside h4{font:600 14px/1.32 'Inter';margin-top:3px}
.breaking{background:#0b0e12;color:#fff;border-top:3px solid var(--red)}
.breaking .in{max-width:1240px;margin:0 auto;display:flex;align-items:stretch;height:52px}
@@ -85,7 +94,7 @@
.sec{padding:34px 0}
h2.rule{font-size:13px;text-transform:uppercase;letter-spacing:.09em;border-top:2px solid var(--ink);padding-top:10px;margin-bottom:16px;font-weight:800}
.river{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
- .river .im{height:130px;border-radius:5px;background:#12161a center/cover;display:block;margin-bottom:8px}
+ .river .im{height:130px;border-radius:5px;background:linear-gradient(135deg,#1f2a37,#c8102e) center/cover;display:block;margin-bottom:8px}
.river .tag{font-size:10px;font-weight:800;text-transform:uppercase}.river h4{font:600 15px/1.25 'Inter';margin-top:3px}
.cta{background:var(--red);color:#fff;border-radius:10px;padding:26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center;margin:26px 0 40px}
.cta h3{font-family:'Playfair Display',serif;font-size:23px}
@@ -262,6 +271,12 @@ $('burgerR').onclick=()=>openDrawer('drawerR'); // upper-RIGHT ham → Sections
$('dclose').onclick=closeDrawer;$('dcloseR').onclick=closeDrawer;$('scrim').onclick=closeDrawer;
$('user').onclick=()=>openDrawer('drawerR');
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeDrawer();});
+// Accordion: every group ("module") in both drawers starts COLLAPSED (CSS default);
+// clicking its title toggles it. Delegated on each .drawer so the Regions group that
+// rentv-nav.js injects after load is clickable too, with no extra wiring.
+['drawer','drawerR'].forEach(id=>{const dr=$(id);if(!dr)return;dr.addEventListener('click',e=>{
+ const g=e.target.closest('.grp'); if(g&&dr.contains(g)) g.classList.toggle('open');
+});});
async function jget(url){try{const r=await fetch(url,{credentials:'same-origin'});if(!r.ok)return null;return await r.json();}catch(e){return null;}}
let ALL=[];
// Canonical section labels — the drawer/footer link to /sales, /development, … which the
@@ -296,8 +311,10 @@ async function load(){
return;
}
// lead with the top story that HAS an image (never a blank-image placeholder); keep the rest in order
- const li=view.findIndex(x=>x&&x.image); const lead=li>=0?view[li]:view[0];
- const rest=view.filter((_,i)=>i!==(li>=0?li:0));
+ // Always feature the LATEST article in the hero — the newest wire story (news is newest-first),
+ // not a published Original or the first-item-that-happens-to-have-an-image.
+ const lead = (!CAT && news[0]) ? news[0] : view[0];
+ const rest = view.filter(x=>x!==lead);
const l=lead;
$('lead').innerHTML=`<div class="im"${bg(l)}></div><span class="tag">${l.cat?catChip(l.cat):'RENTV'}${l.orig?'<span class="chipo">Original</span>':''}</span><h1>${esc(l.title)}</h1><div class="byl">${l.orig?'By '+esc(l.author||'RENTV Staff')+' · RENTV Original':'By RENTV Staff · live from rentv.com'}</div>`;
$('lead').style.cursor='pointer';$('lead').onclick=()=>location.href=LK(l);
← cd119d7c fix(topic-hubs): word-boundary hub-keyword matching so a mid
·
back to Rentv 2026
·
rentv front page: fold Market Snapshot stats strip into a co 48c93722 →