Admin/media-intelligence-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy improved mobile newsroom navigation

Browse Source
This commit is contained in:
Admin 2026-09-29 21:06:53 +00:00
parent 7bcdb02bba
commit 3ed6c73b4c
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/web.ts
View File

@ -95,12 +95,14 @@ body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-
a{color:inherit} a{color:inherit}
button,input,select{font: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{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{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} .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::-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)} .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} .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} .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} .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} .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: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}}
</style> </style>
</head> </head>
<body data-media-role="${esc(args.role ?? "viewer")}"> <body data-media-role="${esc(args.role ?? "viewer")}">
<div class="topbar"><div class="topbar-inner"> <div class="topbar"><div class="topbar-inner">
<a class="brand" href="/"><span class="brand-mark">MI</span><span>Media Intelligence</span></a> <a class="brand" href="/"><span class="brand-mark">MI</span><span>Media Intelligence</span></a>
<nav class="nav">${nav.map(([key, href, label]) => `<a href="${href}" class="${args.active === key ? "active" : ""}">${label}</a>`).join("")}</nav> <div class="nav-shell" id="nav-shell"><nav class="nav" id="primary-nav" aria-label="Primary">${nav.map(([key, href, label]) => `<a href="${href}" class="${args.active === key ? "active" : ""}">${label}</a>`).join("")}</nav><span class="nav-scroll-cue" aria-hidden="true">›</span></div>
<div class="userbox"><span id="live-state" class="live-pill">live</span><div class="avatar">${esc(initials(args.identity))}</div><div><div class="user-name">${esc(args.identity)}<span class="role-pill">${esc(args.role ?? "viewer")}</span></div><a class="signout" href="/auth/logout">Sign out</a></div></div> <div class="userbox"><span id="live-state" class="live-pill">live</span><div class="avatar">${esc(initials(args.identity))}</div><div><div class="user-name">${esc(args.identity)}<span class="role-pill">${esc(args.role ?? "viewer")}</span></div><a class="signout" href="/auth/logout">Sign out</a></div></div>
</div></div> </div></div>
<main class="page">${args.body}</main> <main class="page">${args.body}</main>
@ -252,6 +254,19 @@ function setLiveState(label,reconnecting){
var el=document.getElementById("live-state"); if(!el)return; var el=document.getElementById("live-state"); if(!el)return;
el.textContent=label; el.classList.toggle("reconnecting",Boolean(reconnecting)); 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){ function setUnreadCount(delta){
var el=document.getElementById("unread-message-count"); if(!el)return; var el=document.getElementById("unread-message-count"); if(!el)return;
var current=Number((el.textContent||"0").replace(/[^0-9]/g,""))||0; var current=Number((el.textContent||"0").replace(/[^0-9]/g,""))||0;