← back to Rentv 2026
News map: collapse ALL controls into one LEFT hamburger; strip the busy top bar
0044e5f8a108abc337380ccb7fef613c6ec3e0d9 · 2026-08-06 09:58:56 -0700 · Steve Abrams
Steve: 'do not show tabs across screen.. busy.. horrible. put into its own collapsed
hamburger on left.' Removed the wide filter/tab row entirely; the top is now just a slim
wordmark + story count. One hamburger (upper-LEFT) opens a left drawer holding the legend,
all map filters (Show/Type/Years/Near me/Reset), and all nav (Explore + Regions/Sections).
Map now starts at ~64px (was 310). Near me / Reset auto-close the drawer.
TK-10284
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 0044e5f8a108abc337380ccb7fef613c6ec3e0d9
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 6 09:58:56 2026 -0700
News map: collapse ALL controls into one LEFT hamburger; strip the busy top bar
Steve: 'do not show tabs across screen.. busy.. horrible. put into its own collapsed
hamburger on left.' Removed the wide filter/tab row entirely; the top is now just a slim
wordmark + story count. One hamburger (upper-LEFT) opens a left drawer holding the legend,
all map filters (Show/Type/Years/Near me/Reset), and all nav (Explore + Regions/Sections).
Map now starts at ~64px (was 310). Near me / Reset auto-close the drawer.
TK-10284
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/map.html | 72 ++++++++++++++++++++++++++++++---------------------------
1 file changed, 38 insertions(+), 34 deletions(-)
diff --git a/public/map.html b/public/map.html
index b7761419..69296c1d 100644
--- a/public/map.html
+++ b/public/map.html
@@ -81,34 +81,59 @@ aside .ah{padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;f
.stage{position:relative}.bar h1{font-size:15px}}
/* ── Hamburger + drawer: all the nav tabs collapse in here so the map gets the screen ── */
.rentvtabs{display:none!important} /* injected region/section strip → moved into the drawer */
-.mast{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 54px}
-.ham{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:#fff;border:1.5px solid var(--line);border-radius:9px;font-size:17px;line-height:1;padding:8px 11px;cursor:pointer;color:var(--ink)}
+/* Minimal top bar: hamburger LEFT, wordmark, story count. Everything else lives in the drawer. */
+.mast{position:relative;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 58px}
+.mast .logo{font-size:26px}
+.cntpill{margin-left:auto;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
+.ham{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:#fff;border:1.5px solid var(--line);border-radius:9px;font-size:17px;line-height:1;padding:8px 11px;cursor:pointer;color:var(--ink);z-index:5}
.ham:hover{border-color:var(--red);color:var(--red)}
.drawer{position:fixed;inset:0;z-index:4000;display:none}
.drawer.open{display:block}
.drawer .bd{position:absolute;inset:0;background:rgba(0,0,0,.45)}
-.drawer .pl{position:absolute;top:0;right:0;width:min(88vw,320px);height:100%;background:#fff;overflow:auto;padding:18px 16px 44px;box-shadow:-10px 0 44px rgba(0,0,0,.32)}
+.drawer .pl{position:absolute;top:0;left:0;width:min(86vw,300px);height:100%;background:#fff;overflow:auto;padding:18px 16px 44px;box-shadow:10px 0 44px rgba(0,0,0,.32)}
.drawer .pl h3{font-family:'Playfair Display',serif;font-size:19px;margin:0 0 2px}
.drawer .x{position:absolute;top:12px;right:14px;font-size:24px;background:none;border:0;cursor:pointer;color:var(--sub);line-height:1}
-.drawer .gt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin:18px 0 5px}
+.drawer .gt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--sub);margin:16px 0 6px}
+.drawer .legend{display:flex;gap:16px;font-size:12px;color:var(--sub);margin:2px 0 4px}
+.drawer .fl{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);margin:11px 0 0}
+.drawer .fl select{display:block;width:100%;margin-top:5px;font:600 14px 'Inter';padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
+.drawer .fl select:focus{outline:0;border-color:var(--red)}
+.drawer .yrs{display:flex;gap:8px;align-items:center}.drawer .yrs .fl{flex:1;margin-top:0}
+.drawer .btn{width:100%;margin-top:12px;font:800 12px 'Inter';letter-spacing:.04em;text-transform:uppercase;padding:11px 14px;border:0;border-radius:9px;background:var(--red);color:#fff;cursor:pointer}
+.drawer .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.drawer a{display:block;padding:9px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14.5px;white-space:normal}
.drawer a:hover{color:var(--red)}
.drawer .clone{display:flex;flex-wrap:wrap;gap:2px 4px}
.drawer .clone a{border:0;display:inline-block;padding:5px 8px;font-size:12.5px;background:var(--wash);border-radius:6px;font-weight:600}
.drawer .clone .rt-k,.drawer .clone .rt-div{display:none}
-/* compact single-row filter bar (scrolls sideways instead of stacking) */
-.bar .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:10px 14px}
-.bar .wrap::-webkit-scrollbar{display:none}
-.bar h1{flex:0 0 auto}
-@media(max-width:760px){.legend{display:none}.mast{padding:8px 50px}.mast .logo{font-size:24px}.util{display:none}}
+@media(max-width:760px){.mast{padding:8px 12px 8px 54px}.mast .logo{font-size:22px}.util{display:none}}
</style></head><body>
-<div class="util"><div class="wrap"><a href="/">RENTV.com · Commercial Real Estate News</a><a href="/">← Front page</a></div></div>
-<header class="mast"><a class="logo" href="/">REN<span>TV</span>.com<small>News Map</small></a><button class="ham" id="ham" aria-label="Open menu" aria-expanded="false">☰</button></header>
+<header class="mast">
+ <button class="ham" id="ham" aria-label="Open menu" aria-expanded="false">☰</button>
+ <a class="logo" href="/">REN<span>TV</span>.com<small>News Map</small></a>
+ <span class="cntpill" id="cnt"></span>
+</header>
<div class="drawer" id="drawer" aria-hidden="true">
<div class="bd" id="drawerBd"></div>
<div class="pl">
<button class="x" id="drawerX" aria-label="Close menu">×</button>
<h3>REN<span style="color:var(--red)">TV</span>.com</h3>
+ <span class="legend"><span><span class="dot g"></span>Last 3 months</span><span><span class="dot r"></span>Older</span></span>
+ <div class="gt">Map filters</div>
+ <label class="fl">Show
+ <select id="fresh">
+ <option value="all">All stories</option>
+ <option value="new">New only (green)</option>
+ <option value="old">Older only (red)</option>
+ </select>
+ </label>
+ <label class="fl">Type
+ <select id="txn"><option value="">All</option></select>
+ </label>
+ <div class="gt" style="margin-bottom:4px">Years</div>
+ <div class="yrs"><label class="fl" style="margin:0">From<select id="yfrom" title="From year"></select></label><label class="fl" style="margin:0">To<select id="yto" title="To year"></select></label></div>
+ <button class="btn" id="near">📍 Near me</button>
+ <button class="btn ghost" id="reset">Reset view</button>
<div class="gt">Explore</div>
<a href="/">Front page</a>
<a href="/map">🗺 News Map</a>
@@ -124,28 +149,6 @@ aside .ah{padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;f
<div id="drawerNav"></div>
</div>
</div>
-<div class="bar"><div class="wrap">
- <h1>News Around You <span class="n" id="cnt"></span></h1>
- <span class="legend"><span><span class="dot g"></span>Last 3 months</span><span><span class="dot r"></span>Older</span></span>
- <label>Show
- <select id="fresh">
- <option value="all">All stories</option>
- <option value="new">New only (green)</option>
- <option value="old">Older only (red)</option>
- </select>
- </label>
- <label>Type
- <select id="txn"><option value="">All</option></select>
- </label>
- <label>Years
- <select id="yfrom" title="From year"></select>
- </label>
- <label style="margin-left:-8px">–
- <select id="yto" title="To year"></select>
- </label>
- <button class="btn" id="near">📍 Near me</button>
- <button class="btn ghost" id="reset">Reset view</button>
-</div></div>
<div class="stage">
<div id="map"></div>
<aside>
@@ -319,13 +322,14 @@ map.on('moveend',function(){ if(!meLatLng) refreshList(); });
// controls
$('fresh').onchange=function(e){fFresh=e.target.value;buildMarkers();};
$('txn').onchange=function(e){fTxn=e.target.value;buildMarkers();};
-$('reset').onclick=function(){ meLatLng=null; if(meMarker){map.removeLayer(meMarker);meMarker=null;}
+$('reset').onclick=function(){ closeDrawer(); meLatLng=null; if(meMarker){map.removeLayer(meMarker);meMarker=null;}
fFresh='all';$('fresh').value='all'; fTxn='';$('txn').value='';
if($('yfrom').options.length){fYFrom=parseInt($('yfrom').options[$('yfrom').options.length-1].value,10);$('yfrom').value=fYFrom;
fYTo=parseInt($('yto').options[0].value,10);$('yto').value=fYTo;}
map.setView([37.5,-119],5); buildMarkers(); };
$('near').onclick=function(){
if(!navigator.geolocation){alert('Location isn’t available in this browser.');return;}
+ closeDrawer();
$('near').textContent='📍 Locating…';
navigator.geolocation.getCurrentPosition(function(pos){
meLatLng=[pos.coords.latitude,pos.coords.longitude];
← f47b2a57 harden(dealdesk): Cody gate — coveredBy matches the needle s
·
back to Rentv 2026
·
PR intel (b2 complete): tenant isolation via Postgres RLS ea0ef6cd →