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

Split OKX monitor into perp and options cards.

Browse Source 
Align four exchange cards in a 2x2 grid so 1080p layout stays balanced.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-16 13:47:21 +08:00
parent bde8c517e0
commit 018b4d5601
4 changed files with 98 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/app.css
+29 -35
View File
@@ -1275,31 +1275,25 @@ html[data-theme="light"] .host-metric-bar {
.monitor-split-right {
min-width: 0;
min-height: 0;
}
.monitor-split-left > .card {
height: 100%;
}
.monitor-split-right {
display: grid;
/* 无持仓时勿 1fr 均分拉高,按内容收紧;有仓时自然增高 */
grid-template-rows: auto auto;
align-content: start;
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
overflow: auto;
align-content: stretch;
overflow: hidden;
}
.monitor-split-left > .card,
.monitor-split-right > .card {
height: auto;
height: 100%;
min-height: 0;
overflow: hidden;
}
.card-monitor-okx-split,
.card-monitor-split-side {
display: flex;
flex-direction: column;
overflow: visible;
overflow: hidden;
}
.card-monitor-okx-split .card-body,
@@ -1307,7 +1301,7 @@ html[data-theme="light"] .host-metric-bar {
flex: 1;
display: flex;
flex-direction: column;
overflow: visible;
overflow: auto;
min-height: 0;
}
@@ -1374,6 +1368,7 @@ html[data-theme="light"] .host-metric-bar {
grid-template-columns: 1fr;
}
.monitor-split-left,
.monitor-split-right {
grid-template-rows: auto auto;
}
@@ -9898,15 +9893,18 @@ html[data-theme="light"] .hub-logs-card-hint {
height: auto;
}
body.hub-page-monitor:not(.hub-phone) .monitor-split-left,
body.hub-page-monitor:not(.hub-phone) .monitor-split-right {
gap: 8px;
grid-template-rows: auto auto;
align-content: start;
overflow: auto;
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
align-content: stretch;
overflow: hidden;
}
body.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card,
body.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
height: auto;
height: 100%;
min-height: 0;
}
body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split,
@@ -9922,7 +9920,7 @@ html[data-theme="light"] .hub-logs-card-hint {
body.hub-page-monitor:not(.hub-phone) .card-monitor-okx-split .card-body,
body.hub-page-monitor:not(.hub-phone) .card-monitor-split-side .card-body {
padding: 8px 10px;
overflow: hidden;
overflow: auto;
}
body.hub-page-monitor:not(.hub-phone) .hub-inner-cards {
@@ -10208,38 +10206,34 @@ body.hub-tablet.hub-page-monitor:not(.hub-phone) .grid-monitor-options-split .mo
align-items: stretch;
}
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card {
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left > .card,
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
height: 100%;
min-height: 0;
}
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
height: auto;
min-height: 0;
}
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left,
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
grid-template-rows: auto auto;
align-content: start;
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
align-content: stretch;
gap: 6px;
min-height: 0;
overflow: auto;
overflow: hidden;
}
/* 竖屏(<960)叠成 OKX 上 + Gate/币安并排 */
/* 竖屏(<960)叠成 OKX 两卡在上 + Gate/币安并排 */
@media (max-width: 960px) {
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-body {
grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr);
}
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
align-content: stretch;
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-left {
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right > .card {
height: 100%;
body.hub-tablet.hub-page-monitor:not(.hub-phone) .monitor-split-right {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
}