ac/android_cast
1
0
Fork 0
mirror of git://f0xx.org/android_cast synced 2026-07-29 03:38:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Hub nav: Short links with descriptions, drag shell, zoom-safe layout.

Browse Source 
Add URL shortener to the hub left shell with label and description when expanded; share nav_shell.js (click + horizontal drag on handle) across hub and crashes console; widen open nav to 240px; fix viewport overflow when browser zoom changes.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Anton Afanasyeu
2026-06-12 21:10:55 +02:00
parent 539341d8f1
commit a8ef161e75
11 changed files with 260 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/app_hub/assets/hub-landing.js
View File

@@ -116,13 +116,7 @@
}
function bindLeftNav() {
var pane = document.getElementById('landing-nav-pane');
var handle = document.getElementById('landing-nav-handle');
if (handle && pane) {
handle.addEventListener('click', function () {
pane.classList.toggle('open');
});
}
/* nav_shell.js handles #landing-nav-pane / #landing-nav-handle */
}
function initFromUrl() {

8
examples/app_hub/assets/i18n/hub-en.json
View File

@@ -16,6 +16,14 @@
"nav.graphs": "Graphs",
"nav.remote": "Remote access",
"nav.short_links": "Short links",
"nav.short_links_desc": "Mint bearer tokens and shorten URLs for s.f0xx.org.",
"nav.console_desc": "Crash triage home and workspace cards.",
"nav.git_desc": "Browse repos, branches, and tags.",
"nav.issues_desc": "Browse and triage crash reports.",
"nav.tickets_desc": "Roadmap tasks, QA items, and tags.",
"nav.graphs_desc": "Sessions, crashes, and device activity.",
"nav.remote_desc": "WireGuard sessions and device reachability.",
"nav.builder_desc": "Docker CI for APK baking and OTA artifacts.",
"nav.builder": "Builder",
"nav.toggle": "Navigation",
"nav.security": "Security",

8
examples/app_hub/assets/i18n/hub-ru.json
View File

@@ -16,6 +16,14 @@
"nav.graphs": "Графики",
"nav.remote": "Удалённый доступ",
"nav.short_links": "Короткие ссылки",
"nav.short_links_desc": "Токены и сокращение URL для s.f0xx.org.",
"nav.console_desc": "Главная консоли и карточки разделов.",
"nav.git_desc": "Репозитории, ветки и теги.",
"nav.issues_desc": "Просмотр и разбор отчётов о сбоях.",
"nav.tickets_desc": "Задачи roadmap, QA и теги.",
"nav.graphs_desc": "Сессии, сбои и активность устройств.",
"nav.remote_desc": "Сессии WireGuard и доступ к устройствам.",
"nav.builder_desc": "Docker CI для сборки APK и OTA.",
"nav.builder": "Сборщик",
"nav.toggle": "Навигация",
"nav.security": "Безопасность",

33
examples/app_hub/hub-landing.css
View File

@@ -5,12 +5,19 @@
--landing-footer-h: 40px;
--landing-left-w: 56px;
--landing-rail-w: 44px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
max-width: 100%;
overflow-x: clip;
overflow-y: auto;
}
/* (1) Top header */
.landing-top {
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
@@ -145,11 +152,11 @@
/* Frame: (2) left + (3) body + space for (4) rail */
.landing-frame {
position: fixed;
top: var(--landing-header-h);
left: 0;
right: 0;
bottom: var(--landing-footer-h);
position: relative;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-height: calc(100dvh - var(--landing-header-h) - var(--landing-footer-h));
display: flex;
z-index: 5;
pointer-events: none;
@@ -162,8 +169,9 @@
flex-direction: column;
flex: 0 0 var(--landing-left-w);
width: var(--landing-left-w);
height: 100%;
max-height: 100%;
align-self: stretch;
min-height: 100%;
max-height: none;
overflow: hidden;
z-index: 3;
pointer-events: auto;
@@ -180,15 +188,16 @@
border-top: 1px solid var(--border);
}
.landing-left.nav-pane.open {
width: 200px;
flex-basis: 200px;
width: 240px;
flex-basis: 240px;
}
/* (3) Body — full viewport pages, scroll snap */
.landing-scroll {
flex: 1;
min-width: 0;
height: 100%;
align-self: stretch;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;

19
examples/app_hub/index.php
View File

@@ -38,7 +38,7 @@ function hub_h(string $s): string {
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
<link rel="stylesheet" href="hub.css?v=20260610overlay">
<link rel="stylesheet" href="hub-logo-layers.css?v=20260610overlay">
<link rel="stylesheet" href="hub-landing.css?v=20260610overlay">
<link rel="stylesheet" href="hub-landing.css?v=20260612nav">
<script type="importmap">
{
"imports": {
@@ -46,6 +46,7 @@ function hub_h(string $s): string {
}
}
</script>
<script src="/app/androidcast_project/crashes/assets/js/nav_shell.js" defer></script>
<script src="assets/hub-i18n.js" defer></script>
<script src="assets/hub-landing.js" defer></script>
<script src="assets/analytics.config.js"></script>
@@ -137,14 +138,14 @@ function hub_h(string $s): string {
<span class="nav-icon nav-icon--menu" aria-hidden="true"></span>
</button>
<ul class="nav-list">
<li><a href="crashes/?view=home" class="nav-link"><span class="nav-icon nav-icon--home"></span><span class="nav-label" data-i18n="nav.console">Console</span></a></li>
<li><a href="git/" class="nav-link"><span class="nav-icon nav-icon--git"></span><span class="nav-label" data-i18n="nav.git">Git</span></a></li>
<li><a href="crashes/?view=reports" class="nav-link"><span class="nav-icon nav-icon--reports"></span><span class="nav-label" data-i18n="nav.issues">Issues</span></a></li>
<li><a href="crashes/?view=tickets" class="nav-link"><span class="nav-icon nav-icon--tickets"></span><span class="nav-label" data-i18n="nav.tickets">Tickets</span></a></li>
<li><a href="graphs/" class="nav-link"><span class="nav-icon nav-icon--graphs"></span><span class="nav-label" data-i18n="nav.graphs">Graphs</span></a></li>
<li><a href="crashes/?view=remote_access" class="nav-link"><span class="nav-icon nav-icon--remote"></span><span class="nav-label" data-i18n="nav.remote">Remote access</span></a></li>
<li><a href="crashes/?view=short_links" class="nav-link"><span class="nav-icon nav-icon--link"></span><span class="nav-label" data-i18n="nav.short_links">Short links</span></a></li>
<li><a href="build/" class="nav-link"><span class="nav-icon nav-icon--builder"></span><span class="nav-label" data-i18n="nav.builder">Builder</span></a></li>
<li><a href="crashes/?view=home" class="nav-link" data-i18n-title="nav.console" title="Console"><span class="nav-icon nav-icon--home"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.console">Console</span><span class="nav-desc" data-i18n="nav.console_desc">Crash triage home and workspace cards.</span></span></a></li>
<li><a href="git/" class="nav-link" data-i18n-title="nav.git" title="Git"><span class="nav-icon nav-icon--git"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.git">Git</span><span class="nav-desc" data-i18n="nav.git_desc">Browse repos, branches, and tags.</span></span></a></li>
<li><a href="crashes/?view=reports" class="nav-link" data-i18n-title="nav.issues" title="Issues"><span class="nav-icon nav-icon--reports"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.issues">Issues</span><span class="nav-desc" data-i18n="nav.issues_desc">Browse and triage crash reports.</span></span></a></li>
<li><a href="crashes/?view=tickets" class="nav-link" data-i18n-title="nav.tickets" title="Tickets"><span class="nav-icon nav-icon--tickets"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.tickets">Tickets</span><span class="nav-desc" data-i18n="nav.tickets_desc">Roadmap tasks, QA items, and tags.</span></span></a></li>
<li><a href="graphs/" class="nav-link" data-i18n-title="nav.graphs" title="Graphs"><span class="nav-icon nav-icon--graphs"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.graphs">Graphs</span><span class="nav-desc" data-i18n="nav.graphs_desc">Sessions, crashes, and device activity.</span></span></a></li>
<li><a href="crashes/?view=remote_access" class="nav-link" data-i18n-title="nav.remote" title="Remote access"><span class="nav-icon nav-icon--remote"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.remote">Remote access</span><span class="nav-desc" data-i18n="nav.remote_desc">WireGuard sessions and device reachability.</span></span></a></li>
<li><a href="crashes/?view=short_links" class="nav-link" data-i18n-title="nav.short_links" title="Short links"><span class="nav-icon nav-icon--link"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.short_links">Short links</span><span class="nav-desc" data-i18n="nav.short_links_desc">Mint bearer tokens and shorten URLs for s.f0xx.org.</span></span></a></li>
<li><a href="build/" class="nav-link" data-i18n-title="nav.builder" title="Builder"><span class="nav-icon nav-icon--builder"></span><span class="nav-text"><span class="nav-label" data-i18n="nav.builder">Builder</span><span class="nav-desc" data-i18n="nav.builder_desc">Docker CI for APK baking and OTA artifacts.</span></span></a></li>
</ul>
<div class="nav-user">
<?php if ($hubUsername !== ''): ?>

86
examples/crash_reporter/backend/public/assets/css/app.css
View File

@@ -27,6 +27,11 @@
--row-open: rgba(37, 99, 235, .06);
}
* { box-sizing: border-box; }
html {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
[hidden] {
display: none !important;
pointer-events: none !important;
@@ -47,23 +52,28 @@ body {
background: var(--bg);
color: var(--text);
min-height: 100vh;
min-height: 100dvh;
width: 100%;
max-width: 100%;
overflow-x: clip;
}
body:has(.shell) {
display: block;
overflow: hidden;
height: 100vh;
height: 100dvh;
overflow-x: clip;
overflow-y: auto;
height: auto;
min-height: 100vh;
min-height: 100dvh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.shell {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: var(--footer-h, 40px);
min-height: 0;
position: relative;
width: 100%;
max-width: 100%;
min-height: calc(100dvh - var(--footer-h, 40px));
min-height: calc(100vh - var(--footer-h, 40px));
overflow: hidden;
z-index: 1;
}
@@ -93,7 +103,7 @@ a:hover { text-decoration: underline; }
display: flex;
flex-direction: column;
}
.nav-pane.open { width: 200px; }
.nav-pane.open { width: 240px; }
.nav-handle {
position: absolute;
top: 8px;
@@ -147,17 +157,40 @@ a:hover { text-decoration: underline; }
}
.nav-pane.open .nav-link {
width: 100%;
height: auto;
min-height: 40px;
margin: 0;
padding: 0 12px;
padding: 8px 12px;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.nav-pane.open .nav-link > .nav-icon {
flex-shrink: 0;
margin-top: 2px;
}
.nav-link.active,
.nav-link:hover {
background: rgba(61, 139, 253, .22);
color: var(--accent);
text-decoration: none;
}
.nav-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
opacity: 0;
max-width: 0;
overflow: hidden;
transition: opacity .18s ease, max-width .22s ease;
}
.nav-pane.open .nav-text {
opacity: 1;
max-width: 11rem;
transition-delay: .06s;
}
.nav-label {
flex: 0 1 auto;
min-width: 0;
@@ -166,23 +199,50 @@ a:hover { text-decoration: underline; }
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-desc {
display: none;
font-size: 11px;
font-weight: 400;
line-height: 1.25;
color: var(--muted);
white-space: normal;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.nav-pane.open .nav-desc {
display: -webkit-box;
}
.nav-link > .nav-label {
opacity: 0;
max-width: 0;
transition: opacity .18s ease, max-width .22s ease;
}
.nav-pane.open .nav-label {
.nav-pane.open .nav-link > .nav-label {
opacity: 1;
max-width: 9rem;
transition-delay: .06s;
}
.nav-text .nav-label {
opacity: 1;
max-width: none;
transition: none;
}
.nav-handle.is-dragging {
cursor: grabbing;
}
@media (prefers-reduced-motion: reduce) {
.nav-pane,
.nav-link,
.nav-label,
.nav-text,
.locale-code {
transition: none;
}
.nav-pane.open .nav-label,
.nav-pane.open .nav-link > .nav-label,
.nav-pane.open .nav-text,
.nav-pane.open .locale-code {
transition-delay: 0s;
}

11
examples/crash_reporter/backend/public/assets/i18n/en.json
View File

@@ -5,6 +5,17 @@
"nav.tickets": "Tickets",
"nav.logout": "Logout",
"nav.toggle": "Navigation",
"nav.home_desc": "Console home and workspace cards.",
"nav.reports_desc": "Browse and triage crash reports.",
"nav.tickets_desc": "Roadmap tasks, QA items, and tags.",
"nav.graphs": "Graphs",
"nav.graphs_desc": "Sessions, crashes, and device activity.",
"nav.remote": "Remote access",
"nav.remote_desc": "WireGuard sessions and device reachability.",
"nav.access": "Access",
"nav.access_desc": "Roles, privilege sets, and operators.",
"nav.builder": "Builder",
"nav.builder_desc": "Docker CI for APK baking and OTA artifacts.",
"theme.label": "Theme",
"theme.dark": "Dark",
"theme.light": "Light",

11
examples/crash_reporter/backend/public/assets/i18n/ru.json
View File

@@ -15,6 +15,17 @@
"ticket.detail_title": "Задача",
"nav.logout": "Выход",
"nav.toggle": "Навигация",
"nav.home_desc": "Главная консоли и карточки разделов.",
"nav.reports_desc": "Просмотр и разбор отчётов о сбоях.",
"nav.tickets_desc": "Задачи roadmap, QA и теги.",
"nav.graphs": "Графики",
"nav.graphs_desc": "Сессии, сбои и активность устройств.",
"nav.remote": "Удалённый доступ",
"nav.remote_desc": "Сессии WireGuard и доступ к устройствам.",
"nav.access": "Доступ",
"nav.access_desc": "Роли, наборы привилегий и операторы.",
"nav.builder": "Сборщик",
"nav.builder_desc": "Docker CI для сборки APK и OTA.",
"theme.label": "Тема",
"theme.dark": "Тёмная",
"theme.light": "Светлая",

9
examples/crash_reporter/backend/public/assets/js/app.js
View File

@@ -119,14 +119,7 @@
}
function initNav() {
const nav = document.getElementById('nav-pane');
const handle = document.getElementById('nav-handle');
if (!nav || !handle) return;
handle.addEventListener('click', () => {
const open = nav.classList.toggle('open');
handle.setAttribute('aria-expanded', open ? 'true' : 'false');
});
handle.setAttribute('aria-expanded', nav.classList.contains('open') ? 'true' : 'false');
/* nav_shell.js handles toggle + drag on #nav-pane / #nav-handle */
}
function markReportViewed(id) {

83
examples/crash_reporter/backend/public/assets/js/nav_shell.js Normal file
View File

@@ -0,0 +1,83 @@
/**
* Collapsible left nav: click toggle + horizontal drag on handle (open on drag right).
*/
(function () {
'use strict';
var DRAG_THRESHOLD_PX = 20;
function setOpen(nav, handle, open) {
nav.classList.toggle('open', open);
if (handle) {
handle.setAttribute('aria-expanded', open ? 'true' : 'false');
}
}
function bindNavShell(paneId, handleId) {
var nav = document.getElementById(paneId);
var handle = document.getElementById(handleId);
if (!nav || !handle) return;
setOpen(nav, handle, nav.classList.contains('open'));
var drag = null;
var suppressClick = false;
handle.addEventListener('click', function (ev) {
if (suppressClick) {
suppressClick = false;
ev.preventDefault();
return;
}
setOpen(nav, handle, !nav.classList.contains('open'));
});
handle.addEventListener('pointerdown', function (ev) {
if (ev.button !== 0) return;
drag = { x: ev.clientX, moved: false };
handle.setPointerCapture(ev.pointerId);
handle.classList.add('is-dragging');
ev.preventDefault();
});
handle.addEventListener('pointermove', function (ev) {
if (!drag || !handle.hasPointerCapture(ev.pointerId)) return;
var dx = ev.clientX - drag.x;
if (Math.abs(dx) < 4) return;
drag.moved = true;
if (dx > DRAG_THRESHOLD_PX) {
setOpen(nav, handle, true);
drag.x = ev.clientX;
} else if (dx < -DRAG_THRESHOLD_PX) {
setOpen(nav, handle, false);
drag.x = ev.clientX;
}
});
function endDrag(ev) {
if (!drag) return;
if (drag.moved) suppressClick = true;
drag = null;
handle.classList.remove('is-dragging');
if (handle.hasPointerCapture(ev.pointerId)) {
handle.releasePointerCapture(ev.pointerId);
}
}
handle.addEventListener('pointerup', endDrag);
handle.addEventListener('pointercancel', endDrag);
}
window.initNavShell = bindNavShell;
function autoInit() {
bindNavShell('nav-pane', 'nav-handle');
bindNavShell('landing-nav-pane', 'landing-nav-handle');
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', autoInit);
} else {
autoInit();
}
})();

35
examples/crash_reporter/backend/views/layout.php
View File

@@ -26,6 +26,7 @@
})();
</script>
<link rel="stylesheet" href="<?= h(Auth::basePath()) ?>/assets/css/app.css">
<script src="<?= h(Auth::basePath()) ?>/assets/js/nav_shell.js" defer></script>
<script src="<?= h(Auth::basePath()) ?>/assets/js/i18n.js" defer></script>
<script src="<?= h(Auth::basePath()) ?>/assets/js/app.js" defer></script>
<script src="<?= h(Auth::basePath()) ?>/assets/js/ticket_create.js" defer></script>
@@ -70,7 +71,10 @@
aria-label="Home"
title="Home">
<span class="nav-icon nav-icon--home" aria-hidden="true"></span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.home">Home</span>
<span class="nav-desc" data-i18n="nav.home_desc">Console home and workspace cards.</span>
</span>
</a>
</li>
<li>
@@ -80,7 +84,10 @@
aria-label="Reports"
title="Reports">
<span class="nav-icon nav-icon--reports" aria-hidden="true"></span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.reports">Reports</span>
<span class="nav-desc" data-i18n="nav.reports_desc">Browse and triage crash reports.</span>
</span>
</a>
</li>
<li>
@@ -90,7 +97,10 @@
aria-label="Tickets"
title="Tickets">
<span class="nav-icon nav-icon--tickets" aria-hidden="true"></span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.tickets">Tickets</span>
<span class="nav-desc" data-i18n="nav.tickets_desc">Roadmap tasks, QA items, and tags.</span>
</span>
</a>
</li>
<li>
@@ -99,7 +109,10 @@
aria-label="Graphs"
title="Graphs">
<span class="nav-icon nav-icon--graphs" aria-hidden="true"></span>
<span class="nav-label">Graphs</span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.graphs">Graphs</span>
<span class="nav-desc" data-i18n="nav.graphs_desc">Sessions, crashes, and device activity.</span>
</span>
</a>
</li>
<?php if (Rbac::can('remote_access_view')): ?>
@@ -109,7 +122,10 @@
aria-label="Remote access"
title="Remote access">
<span class="nav-icon nav-icon--remote" aria-hidden="true"></span>
<span class="nav-label">Remote access</span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.remote">Remote access</span>
<span class="nav-desc" data-i18n="nav.remote_desc">WireGuard sessions and device reachability.</span>
</span>
</a>
</li>
<?php endif; ?>
@@ -120,7 +136,10 @@
aria-label="Short links"
title="Short links">
<span class="nav-icon nav-icon--link" aria-hidden="true"></span>
<span class="nav-label">Short links</span>
<span class="nav-text">
<span class="nav-label" data-i18n="home.card_short_links">Short links</span>
<span class="nav-desc" data-i18n="home.card_short_links_desc">Mint bearer tokens and shorten URLs for s.f0xx.org.</span>
</span>
</a>
</li>
<?php endif; ?>
@@ -131,7 +150,10 @@
aria-label="Access control"
title="Access control">
<span class="nav-icon nav-icon--tickets" aria-hidden="true"></span>
<span class="nav-label">Access</span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.access">Access</span>
<span class="nav-desc" data-i18n="nav.access_desc">Roles, privilege sets, and operators.</span>
</span>
</a>
</li>
<?php endif; ?>
@@ -141,7 +163,10 @@
aria-label="Builder"
title="Builder">
<span class="nav-icon nav-icon--builder" aria-hidden="true"></span>
<span class="nav-label">Builder</span>
<span class="nav-text">
<span class="nav-label" data-i18n="nav.builder">Builder</span>
<span class="nav-desc" data-i18n="nav.builder_desc">Docker CI for APK baking and OTA artifacts.</span>
</span>
</a>
</li>
</ul>