From 3ed6c73b4cbaed7db066aecfcaa61ba30025ea05 Mon Sep 17 00:00:00 2001 From: Admin Date: Tue, 29 Sep 2026 21:06:53 +0000 Subject: [PATCH] Deploy improved mobile newsroom navigation --- src/web.ts | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/web.ts b/src/web.ts index f683cec..20b603c 100644 --- a/src/web.ts +++ b/src/web.ts @@ -95,12 +95,14 @@ body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple- a{color:inherit} button,input,select{font:inherit} .topbar{position:sticky;top:0;z-index:50;background:rgba(17,24,39,.97);backdrop-filter:blur(10px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)} -.topbar-inner{max-width:1320px;margin:auto;padding:0 22px;min-height:58px;display:flex;align-items:center;gap:24px} +.topbar-inner{max-width:1320px;margin:auto;padding:0 22px;min-height:58px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:760;letter-spacing:-.01em;white-space:nowrap} .brand-mark{width:31px;height:31px;border-radius:9px;background:linear-gradient(145deg,#fff,#cbd5e1);color:#111827;display:grid;place-items:center;font-weight:850;font-size:.85rem} -.nav{display:flex;gap:5px;overflow:auto;scrollbar-width:none} +.nav-shell{position:relative;min-width:0} +.nav{display:flex;gap:5px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:4px 30px 4px 0} .nav::-webkit-scrollbar{display:none} -.nav a{padding:7px 10px;border-radius:8px;text-decoration:none;color:#b9c3d1;font-size:.87rem;font-weight:620;white-space:nowrap} +.nav a{padding:7px 10px;border-radius:8px;text-decoration:none;color:#b9c3d1;font-size:.87rem;font-weight:620;white-space:nowrap;scroll-snap-align:start} +.nav-scroll-cue{display:none;pointer-events:none} .nav a:hover{background:rgba(255,255,255,.06);color:#fff}.nav a.active{background:var(--nav-soft);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)} .userbox{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0} .avatar{width:32px;height:32px;border-radius:50%;background:#374151;display:grid;place-items:center;font-size:.74rem;font-weight:750} @@ -227,13 +229,13 @@ button,input,select{font:inherit} .weight{font-weight:800;font-variant-numeric:tabular-nums} .weightbar{height:6px;background:#eef1f5;border-radius:999px;overflow:hidden;margin-top:5px}.weightbar>span{display:block;height:100%;background:#2762d2;border-radius:999px} @media(max-width:980px){.attention-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.trust-form{grid-template-columns:1fr 1fr}.trust-row{grid-template-columns:1fr auto}.trust-row .optional-col{display:none}.grid-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}.thread-hero{grid-template-columns:1fr}} -@media(max-width:700px){.attention-grid,.trust-summary{grid-template-columns:1fr 1fr}.thread-jumps{top:60px;overflow:auto;flex-wrap:nowrap}.thread-jumps a{white-space:nowrap}.trust-form{grid-template-columns:1fr}.topbar-inner{padding:0 14px;gap:13px}.brand span:last-child{display:none}.user-name,.signout{display:none}.page{padding:20px 14px 40px}.page-head{display:block}.page-head>.actions{margin-top:14px}.grid-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.list-row{grid-template-columns:1fr}.right-meta{text-align:left}.graph-toolbar{align-items:flex-start;flex-direction:column}.graph-scroll{display:none}.mobile-only{display:block}.assertion-grid,.evidence-grid{grid-template-columns:1fr}.relationship{grid-template-columns:1fr}.relationship-mid{text-align:left}} +@media(max-width:700px){.attention-grid,.trust-summary{grid-template-columns:1fr 1fr}.thread-jumps{top:60px;overflow:auto;flex-wrap:nowrap}.thread-jumps a{white-space:nowrap}.trust-form{grid-template-columns:1fr}.topbar-inner{padding:0 12px;gap:9px;grid-template-columns:auto minmax(0,1fr) auto}.brand span:last-child{display:none}.user-name,.signout,.avatar{display:none}.userbox{gap:0}.nav{gap:3px;padding-right:32px}.nav a{padding:7px 9px}.nav-scroll-cue{display:grid;place-items:center;position:absolute;right:0;top:0;bottom:0;width:32px;color:#dce5ef;font-size:1.15rem;font-weight:800;background:linear-gradient(90deg,rgba(17,24,39,0),rgba(17,24,39,.97) 52%);opacity:1;transition:opacity .15s ease}.nav-shell.at-end .nav-scroll-cue{opacity:0}.page{padding:20px 14px 40px}.page-head{display:block}.page-head>.actions{margin-top:14px}.grid-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.list-row{grid-template-columns:1fr}.right-meta{text-align:left}.graph-toolbar{align-items:flex-start;flex-direction:column}.graph-scroll{display:none}.mobile-only{display:block}.assertion-grid,.evidence-grid{grid-template-columns:1fr}.relationship{grid-template-columns:1fr}.relationship-mid{text-align:left}}
MIMedia Intelligence - +
live
${esc(initials(args.identity))}
${esc(args.identity)}${esc(args.role ?? "viewer")}
Sign out
${args.body}
@@ -252,6 +254,19 @@ function setLiveState(label,reconnecting){ var el=document.getElementById("live-state"); if(!el)return; el.textContent=label; el.classList.toggle("reconnecting",Boolean(reconnecting)); } +function updateNavScrollCue(){ + var nav=document.getElementById("primary-nav"); + var shell=document.getElementById("nav-shell"); + if(!nav||!shell)return; + var atEnd=nav.scrollLeft+nav.clientWidth>=nav.scrollWidth-3; + shell.classList.toggle("at-end",atEnd); +} +(function setupMobileNav(){ + var nav=document.getElementById("primary-nav"); if(!nav)return; + nav.addEventListener("scroll",updateNavScrollCue,{passive:true}); + window.addEventListener("resize",updateNavScrollCue); + requestAnimationFrame(updateNavScrollCue); +})(); function setUnreadCount(delta){ var el=document.getElementById("unread-message-count"); if(!el)return; var current=Number((el.textContent||"0").replace(/[^0-9]/g,""))||0;