dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add phone-only hub shell with four bottom tabs.

Browse Source 
Keep desktop/tablet top nav unchanged; at max-width 720px use monitor/market/calculator/AI plus a More sheet for secondary pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-15 22:40:50 +08:00
parent 0939274113
commit bfb5e22be9
4 changed files with 405 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.js
+112 -32
View File
@@ -51,24 +51,69 @@
function syncNavVisibility(data) {
const d = (data && data.display) || {};
const navFunds = document.getElementById("nav-funds");
const navDash = document.getElementById("nav-dashboard");
const navPlan = document.getElementById("nav-plan");
const navArchive = document.getElementById("nav-archive");
const navAi = document.getElementById("nav-ai");
const navCalc = document.getElementById("nav-calculator");
const navStrategy = document.getElementById("nav-strategy");
const navHelp = document.getElementById("nav-help");
const navLogs = document.getElementById("nav-logs");
if (navFunds) navFunds.classList.toggle("nav-hidden", d.show_nav_funds === false);
if (navDash) navDash.classList.toggle("nav-hidden", d.show_nav_dashboard === false);
if (navPlan) navPlan.classList.toggle("nav-hidden", d.show_nav_plan === false);
if (navArchive) navArchive.classList.toggle("nav-hidden", d.show_nav_archive === false);
if (navAi) navAi.classList.toggle("nav-hidden", d.show_nav_ai === false);
if (navCalc) navCalc.classList.toggle("nav-hidden", d.show_nav_calculator === false);
if (navStrategy) navStrategy.classList.toggle("nav-hidden", d.show_nav_strategy === false);
if (navHelp) navHelp.classList.toggle("nav-hidden", d.show_nav_help === false);
if (navLogs) navLogs.classList.toggle("nav-hidden", d.show_nav_logs === false);
const pairs = [
["nav-funds", "m-nav-funds", d.show_nav_funds === false],
["nav-dashboard", "m-nav-dashboard", d.show_nav_dashboard === false],
["nav-plan", "m-nav-plan", d.show_nav_plan === false],
["nav-archive", "m-nav-archive", d.show_nav_archive === false],
["nav-ai", "m-tab-ai", d.show_nav_ai === false],
["nav-calculator", "m-tab-calculator", d.show_nav_calculator === false],
["nav-strategy", "m-nav-strategy", d.show_nav_strategy === false],
["nav-help", "m-nav-help", d.show_nav_help === false],
["nav-logs", "m-nav-logs", d.show_nav_logs === false],
];
pairs.forEach(([desktopId, mobileId, hide]) => {
const a = document.getElementById(desktopId);
const b = document.getElementById(mobileId);
if (a) a.classList.toggle("nav-hidden", hide);
if (b) b.classList.toggle("nav-hidden", hide);
});
}
const HUB_PHONE_PRIMARY = { monitor: 1, market: 1, calculator: 1, ai: 1 };
function syncHubPhoneShellClass() {
document.body.classList.toggle("hub-phone", isMobileLayout());
}
function closeHubMobileMore() {
document.body.classList.remove("hub-mobile-more-open");
const more = document.getElementById("hub-mobile-more");
const btn = document.getElementById("m-tab-more");
if (more) more.setAttribute("aria-hidden", "true");
if (btn) btn.setAttribute("aria-expanded", "false");
syncHubMobileTabActive(currentPage());
}
function openHubMobileMore() {
if (!isMobileLayout()) return;
document.body.classList.add("hub-mobile-more-open");
const more = document.getElementById("hub-mobile-more");
const btn = document.getElementById("m-tab-more");
if (more) more.setAttribute("aria-hidden", "false");
if (btn) btn.setAttribute("aria-expanded", "true");
syncHubMobileTabActive(currentPage());
}
function toggleHubMobileMore() {
if (document.body.classList.contains("hub-mobile-more-open")) closeHubMobileMore();
else openHubMobileMore();
}
function syncHubMobileTabActive(page) {
const primary = !!HUB_PHONE_PRIMARY[page];
const moreOpen = document.body.classList.contains("hub-mobile-more-open");
document.querySelectorAll(".hub-mobile-tabbar .hub-m-tab").forEach((el) => {
const tab = el.getAttribute("data-hub-tab") || "";
let on = false;
if (tab === "more") on = moreOpen || !primary;
else on = !moreOpen && tab === page;
el.classList.toggle("active", on);
});
document.querySelectorAll(".hub-mobile-more-nav a").forEach((a) => {
const href = (a.getAttribute("href") || "").split("?")[0];
a.classList.toggle("active", href === "/" + page);
});
}
function pageNavAllowed(page) {
@@ -1260,6 +1305,9 @@
document.body.classList.toggle("hub-page-ai", page === "ai");
document.body.classList.toggle("hub-page-funds", page === "funds");
document.body.classList.toggle("hub-page-dashboard", page === "dashboard");
syncHubPhoneShellClass();
if (HUB_PHONE_PRIMARY[page]) closeHubMobileMore();
syncHubMobileTabActive(page);
syncHubAiMobileViewport();
if (page === "monitor") startMonitorPoll();
else stopMonitorPoll();
@@ -1876,19 +1924,61 @@
syncHubAiMobileViewport();
}
function initHubMobileChrome() {
const moreBtn = document.getElementById("m-tab-more");
const backdrop = document.getElementById("hub-mobile-more-backdrop");
const closeBtn = document.getElementById("hub-mobile-more-close");
if (moreBtn) {
moreBtn.addEventListener("click", (ev) => {
ev.preventDefault();
toggleHubMobileMore();
});
}
if (backdrop) backdrop.addEventListener("click", closeHubMobileMore);
if (closeBtn) closeBtn.addEventListener("click", closeHubMobileMore);
document.addEventListener("keydown", (ev) => {
if (ev.key === "Escape" && document.body.classList.contains("hub-mobile-more-open")) {
closeHubMobileMore();
}
});
syncHubPhoneShellClass();
}
function bindHubSpaNavLinks(selector) {
document.querySelectorAll(selector).forEach((a) => {
a.addEventListener("click", (ev) => {
const href = a.getAttribute("href");
if (!href || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;
ev.preventDefault();
closeHubMobileMore();
const path = href.split("?")[0];
if (path === window.location.pathname) {
setActiveNav();
return;
}
history.pushState({}, "", href);
setActiveNav();
});
});
}
function initMobileLayout() {
initAiMobileTabs();
initHubAiMobileViewport();
initHubMobileChrome();
let resizeTimer = null;
let wasMobile = isMobileLayout();
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const nowMobile = isMobileLayout();
syncHubPhoneShellClass();
if (!nowMobile) closeHubMobileMore();
if (lastMonitorRows.length && nowMobile !== wasMobile) {
wasMobile = nowMobile;
renderMonitorGrid(lastMonitorRows);
updateMonitorAlertSummary(lastMonitorRows);
syncHubMobileTabActive(currentPage());
return;
}
wasMobile = nowMobile;
@@ -1901,6 +1991,7 @@
});
updateMonitorAlertSummary(lastMonitorRows);
}
syncHubMobileTabActive(currentPage());
}, 120);
});
}
@@ -5601,20 +5692,9 @@
}
function initShellNav() {
document.querySelectorAll(".top-nav a[href^='/']").forEach((a) => {
a.addEventListener("click", (ev) => {
const href = a.getAttribute("href");
if (!href || ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey) return;
ev.preventDefault();
const path = href.split("?")[0];
if (path === window.location.pathname) {
setActiveNav();
return;
}
history.pushState({}, "", href);
setActiveNav();
});
});
bindHubSpaNavLinks(".top-nav a[href^='/']");
bindHubSpaNavLinks(".hub-mobile-tabbar a.hub-m-tab[href^='/']");
bindHubSpaNavLinks(".hub-mobile-more-nav a[href^='/']");
window.addEventListener("popstate", setActiveNav);
}