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

Hub monitor: OKX left column with dual inner cards when options enabled.

Browse Source 
Use a stats bar plus left OKX / right Binance+Gate split layout with equal-height inner perpetual and options cards and no in-card scrolling.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-07 13:33:13 +08:00
parent 5e66600727
commit dda022d3c3
3 changed files with 216 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+117
View File
@@ -1164,6 +1164,123 @@ html[data-theme="light"] .host-metric-bar {
grid-template-columns: 1fr;
}
.grid-monitor.grid-monitor-options-split {
display: flex;
flex-direction: column;
gap: 16px;
}
.grid-monitor.grid-monitor-options-split .monitor-stats-card {
width: 100%;
}
.grid-monitor.grid-monitor-options-split .monitor-stats-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.monitor-split-body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
min-height: 0;
}
.monitor-split-left,
.monitor-split-right {
min-width: 0;
min-height: 0;
}
.monitor-split-left > .card,
.monitor-split-right > .card {
height: 100%;
}
.monitor-split-right {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 16px;
}
.card-monitor-okx-split,
.card-monitor-split-side {
display: flex;
flex-direction: column;
overflow: visible;
}
.card-monitor-okx-split .card-body,
.card-monitor-split-side .card-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: visible;
min-height: 0;
}
.hub-inner-cards {
flex: 1;
display: grid;
grid-template-rows: 1fr 1fr;
gap: 12px;
min-height: 0;
}
.hub-inner-card {
display: flex;
flex-direction: column;
min-height: 0;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: color-mix(in srgb, var(--inset-surface) 92%, transparent);
overflow: visible;
}
.hub-inner-card-head {
flex: 0 0 auto;
padding: 8px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--text);
border-bottom: 1px solid var(--border-soft);
}
.hub-inner-card-options .hub-inner-card-head {
color: var(--accent);
}
.hub-inner-card-body {
flex: 1;
padding: 10px 12px;
overflow: visible;
min-height: 0;
}
.grid-monitor-options-split .hub-options-table-wrap,
.grid-monitor-options-split .pos-table-wrap,
.grid-monitor-options-split .table-scroll {
overflow: visible;
max-height: none;
}
@media (max-width: 1100px) {
.grid-monitor.grid-monitor-options-split .monitor-stats-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.monitor-split-body {
grid-template-columns: 1fr;
}
.monitor-split-right {
grid-template-rows: auto auto;
}
}
.monitor-stats-card .card-head {
padding-bottom: 0;
}