ui: show Top20 rank sheet below toolbar instead of over chart
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -2628,9 +2628,6 @@ body.login-page {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
z-index: 60;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.market-field {
|
||||
@@ -2931,16 +2928,11 @@ body.login-page {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.market-field-symbol {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.market-field-symbol .market-symbol-wrap {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.market-field-symbol .market-symbol-wrap > input {
|
||||
@@ -2948,53 +2940,43 @@ body.login-page {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.market-vol-rank {
|
||||
position: relative;
|
||||
.market-vol-rank-btn {
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.market-toolbar:has(.market-vol-rank[open]) {
|
||||
z-index: 1300;
|
||||
}
|
||||
|
||||
.market-vol-rank > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
min-height: 34px;
|
||||
padding: 0 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 6px;
|
||||
background: var(--inset-surface);
|
||||
color: var(--accent);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.market-vol-rank > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.market-vol-rank[open] > summary {
|
||||
.market-vol-rank-btn:hover {
|
||||
border-color: rgba(0, 255, 157, 0.35);
|
||||
background: rgba(0, 255, 157, 0.08);
|
||||
}
|
||||
|
||||
.market-vol-rank-panel {
|
||||
position: fixed;
|
||||
z-index: 1310;
|
||||
width: min(320px, 72vw);
|
||||
max-height: min(420px, 70vh);
|
||||
overflow: auto;
|
||||
.market-vol-rank-btn.is-active {
|
||||
border-color: rgba(0, 255, 157, 0.45);
|
||||
background: rgba(0, 255, 157, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.market-vol-rank-sheet {
|
||||
margin: -6px 0 12px;
|
||||
padding: 10px 12px 8px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
background: var(--panel-bg, #1a1f2e);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
|
||||
padding: 8px 0 6px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--glow);
|
||||
}
|
||||
|
||||
.market-vol-rank-sheet.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.market-vol-rank-meta {
|
||||
@@ -3008,6 +2990,11 @@ body.login-page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
gap: 2px 12px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.market-vol-rank-item {
|
||||
|
||||
@@ -91,9 +91,8 @@
|
||||
const elSymbol = document.getElementById("market-symbol");
|
||||
const elVolRankMeta = document.getElementById("market-vol-rank-meta");
|
||||
const elVolRankList = document.getElementById("market-vol-rank-list");
|
||||
const elVolRankDetails = document.getElementById("market-vol-rank");
|
||||
const elVolRankPanel =
|
||||
elVolRankDetails && elVolRankDetails.querySelector(".market-vol-rank-panel");
|
||||
const elVolRankBtn = document.getElementById("market-vol-rank-btn");
|
||||
const elVolRankSheet = document.getElementById("market-vol-rank-sheet");
|
||||
const elTf = document.getElementById("market-timeframe");
|
||||
const elRefresh = document.getElementById("market-refresh");
|
||||
const elStatus = document.getElementById("market-status");
|
||||
@@ -2618,30 +2617,31 @@
|
||||
void postChartUnwatch();
|
||||
}
|
||||
|
||||
function positionVolRankPanel() {
|
||||
if (!elVolRankDetails || !elVolRankPanel || !elVolRankDetails.open) return;
|
||||
const summary = elVolRankDetails.querySelector("summary");
|
||||
if (!summary) return;
|
||||
const rect = summary.getBoundingClientRect();
|
||||
const panelW = elVolRankPanel.offsetWidth || 300;
|
||||
let left = rect.right - panelW;
|
||||
left = Math.max(8, Math.min(left, window.innerWidth - panelW - 8));
|
||||
const top = rect.bottom + 4;
|
||||
const maxH = Math.min(420, window.innerHeight - top - 12);
|
||||
elVolRankPanel.style.left = left + "px";
|
||||
elVolRankPanel.style.top = top + "px";
|
||||
elVolRankPanel.style.maxHeight = Math.max(180, maxH) + "px";
|
||||
function setVolRankSheetOpen(open) {
|
||||
const on = !!open;
|
||||
if (elVolRankSheet) {
|
||||
elVolRankSheet.classList.toggle("hidden", !on);
|
||||
elVolRankSheet.setAttribute("aria-hidden", on ? "false" : "true");
|
||||
}
|
||||
if (elVolRankBtn) {
|
||||
elVolRankBtn.classList.toggle("is-active", on);
|
||||
elVolRankBtn.setAttribute("aria-expanded", on ? "true" : "false");
|
||||
}
|
||||
if (on) void loadVolumeRank();
|
||||
}
|
||||
|
||||
function bindVolRankPanel() {
|
||||
if (!elVolRankDetails) return;
|
||||
elVolRankDetails.addEventListener("toggle", function () {
|
||||
if (elVolRankDetails.open) {
|
||||
requestAnimationFrame(positionVolRankPanel);
|
||||
}
|
||||
if (!elVolRankBtn) return;
|
||||
elVolRankBtn.addEventListener("click", function () {
|
||||
const open = elVolRankSheet && elVolRankSheet.classList.contains("hidden");
|
||||
setVolRankSheetOpen(open);
|
||||
});
|
||||
document.addEventListener("pointerdown", function (ev) {
|
||||
if (!elVolRankSheet || elVolRankSheet.classList.contains("hidden")) return;
|
||||
const t = ev.target;
|
||||
if (elVolRankSheet.contains(t) || (elVolRankBtn && elVolRankBtn.contains(t))) return;
|
||||
setVolRankSheetOpen(false);
|
||||
});
|
||||
window.addEventListener("resize", positionVolRankPanel);
|
||||
window.addEventListener("scroll", positionVolRankPanel, true);
|
||||
}
|
||||
|
||||
function renderVolumeRank(data) {
|
||||
@@ -2696,15 +2696,12 @@
|
||||
btn.addEventListener("click", function () {
|
||||
if (!elSymbol || !row.symbol) return;
|
||||
elSymbol.value = row.symbol;
|
||||
if (elVolRankDetails) elVolRankDetails.open = false;
|
||||
setVolRankSheetOpen(false);
|
||||
loadChart(false);
|
||||
});
|
||||
li.appendChild(btn);
|
||||
elVolRankList.appendChild(li);
|
||||
});
|
||||
if (elVolRankDetails && elVolRankDetails.open) {
|
||||
requestAnimationFrame(positionVolRankPanel);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVolumeRank(forceRefresh) {
|
||||
@@ -2745,7 +2742,6 @@
|
||||
readQuery();
|
||||
applyDefaults();
|
||||
updateExchangeDisplay();
|
||||
void loadVolumeRank();
|
||||
}
|
||||
|
||||
async function loadChart(force, options) {
|
||||
@@ -2886,7 +2882,9 @@
|
||||
updateExchangeDisplay();
|
||||
syncFsToolbarFromMain();
|
||||
lastViewKey = "";
|
||||
void loadVolumeRank();
|
||||
if (elVolRankSheet && !elVolRankSheet.classList.contains("hidden")) {
|
||||
void loadVolumeRank();
|
||||
}
|
||||
loadChart(false);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
|
||||
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank-v3" />
|
||||
<link rel="stylesheet" href="/assets/app.css?v=20260608-market-vol-rank-v4" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-bg" aria-hidden="true"></div>
|
||||
@@ -84,13 +84,16 @@
|
||||
<span>币种</span>
|
||||
<div class="market-symbol-wrap">
|
||||
<input id="market-symbol" type="text" value="BTC/USDT" placeholder="BTC/USDT" autocomplete="off" />
|
||||
<details id="market-vol-rank" class="market-vol-rank">
|
||||
<summary title="昨日成交额 Top20（每早8点更新）">Top20</summary>
|
||||
<div class="market-vol-rank-panel">
|
||||
<div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
|
||||
<ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
|
||||
</div>
|
||||
</details>
|
||||
<button
|
||||
type="button"
|
||||
id="market-vol-rank-btn"
|
||||
class="market-vol-rank-btn"
|
||||
title="昨日成交额 Top20（每早8点更新）"
|
||||
aria-expanded="false"
|
||||
aria-controls="market-vol-rank-sheet"
|
||||
>
|
||||
Top20
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
<label class="market-field">
|
||||
@@ -112,6 +115,10 @@
|
||||
<span id="market-bar-countdown" class="toolbar-meta market-countdown"></span>
|
||||
<span id="market-updated" class="toolbar-meta"></span>
|
||||
</div>
|
||||
<div id="market-vol-rank-sheet" class="market-vol-rank-sheet hidden" aria-hidden="true">
|
||||
<div id="market-vol-rank-meta" class="market-vol-rank-meta">加载中…</div>
|
||||
<ol id="market-vol-rank-list" class="market-vol-rank-list"></ol>
|
||||
</div>
|
||||
<p id="market-status" class="market-status"></p>
|
||||
<div id="market-chart-wrap" class="market-chart-wrap">
|
||||
<div class="market-ohlcv-bar" aria-label="K线详情">
|
||||
@@ -395,7 +402,7 @@
|
||||
<div id="toast"></div>
|
||||
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
|
||||
<script src="/assets/chart_draw.js?v=20260608-market-vol-rank"></script>
|
||||
<script src="/assets/chart.js?v=20260608-market-vol-rank-v3"></script>
|
||||
<script src="/assets/chart.js?v=20260608-market-vol-rank-v4"></script>
|
||||
<script src="/assets/archive.js?v=20260607-hub-archive-v6"></script>
|
||||
<script src="/assets/ai_review_render.js?v=2"></script>
|
||||
<script src="/assets/app.js?v=20260607-hub-archive-v1"></script>
|
||||
|
||||
Reference in New Issue
Block a user