aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

가상매매 화면 멀티 레이아웃 수정

Browse Source
This commit is contained in:
Macbook
2026-05-30 04:03:51 +09:00
parent 961609242c
commit 33c2d4b337
12 changed files with 476 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/tradeNotificationList.css
+13 -12
View File
@@ -56,9 +56,9 @@
/* 목록 한 줄 = 알림상세 · 신호일치율 · 캔들 · 보조지표(1칸) — 가로 100% 꽉 참 */
.tnl-row-gallery {
--tnl-summary-card-width: 288px;
--tnl-signal-slot-width: 308px;
--tnl-chart-card-width: 294px;
--tnl-summary-card-width: 260px;
--tnl-signal-slot-width: 280px;
--tnl-chart-card-width: 312px;
display: flex;
flex-direction: row;
align-items: stretch;
@@ -71,17 +71,17 @@
}
.tnl-row-gallery-detail {
flex: 1 1 0;
flex: 0.88 1 0;
min-width: 0;
}
.tnl-row-gallery-signal {
flex: 1.05 1 0;
flex: 0.92 1 0;
min-width: 0;
}
.tnl-row-gallery-candle {
flex: 1.05 1 0;
flex: 1.12 1 0;
min-width: 0;
height: 300px;
max-height: 300px;
@@ -107,7 +107,7 @@
}
.tnl-row-gallery-indicators {
flex: 1.05 1 0;
flex: 1.12 1 0;
min-width: 0;
}
@@ -123,9 +123,9 @@
}
.tnl-row-gallery--chart-expanded .tnl-row-gallery-detail {
flex: 0 0 min(26%, var(--tnl-summary-card-width));
width: min(26%, var(--tnl-summary-card-width));
min-width: min(220px, var(--tnl-summary-card-width));
flex: 0 0 min(24%, var(--tnl-summary-card-width));
width: min(24%, var(--tnl-summary-card-width));
min-width: min(200px, var(--tnl-summary-card-width));
max-width: var(--tnl-summary-card-width);
}
@@ -591,6 +591,7 @@
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
padding-bottom: 6px;
}
.tnl-summary-info-row {
@@ -629,7 +630,7 @@
gap: 12px;
flex-shrink: 0;
width: 100%;
padding-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
@@ -1213,7 +1214,7 @@ ul.tnl-list.tnl-list--grid {
}
.tnl-row-gallery {
--tnl-summary-card-width: min(100%, 288px);
--tnl-summary-card-width: min(100%, 260px);
}
.tnl-row-gallery-detail,
frontend/src/styles/virtualTradingDashboard.css
+134 -1
View File
@@ -971,6 +971,129 @@
padding: 0 4px;
}
/* 그리드 n×n 배치 선택 (가상매매 헤더) */
.vtd-grid-layout-picker {
position: relative;
flex-shrink: 0;
}
.vtd-grid-layout-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--se-border, var(--border));
border-radius: 8px;
background: var(--bg2, var(--se-panel-card-bg));
color: var(--text2);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vtd-grid-layout-trigger:hover:not(:disabled) {
border-color: var(--accent, #3f7ef5);
color: var(--accent, #3f7ef5);
background: color-mix(in srgb, var(--accent, #3f7ef5) 10%, var(--bg2));
}
.vtd-grid-layout-trigger--open {
border-color: var(--accent, #3f7ef5);
color: var(--accent, #3f7ef5);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #3f7ef5) 35%, transparent);
}
.vtd-grid-layout-trigger--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.vtd-grid-layout-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 120;
width: min(320px, calc(100vw - 48px));
max-height: min(420px, 70vh);
overflow-y: auto;
padding: 10px 12px 12px;
border-radius: 10px;
border: 1px solid var(--se-border, var(--border));
background: var(--bg2, #1a1f2e);
box-shadow:
0 12px 32px color-mix(in srgb, var(--bg) 55%, transparent),
0 0 0 1px color-mix(in srgb, var(--text3) 12%, transparent);
}
.vtd-grid-layout-popover--align-left {
left: 0;
right: auto;
}
.vtd-grid-layout-popover-title {
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
color: var(--text3);
letter-spacing: 0.04em;
}
.vtd-grid-layout-group {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.vtd-grid-layout-group:first-of-type {
border-top: none;
padding-top: 0;
}
.vtd-grid-layout-group-lbl {
flex: 0 0 14px;
font-size: 11px;
font-weight: 600;
color: var(--text3);
text-align: center;
}
.vtd-grid-layout-group-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
}
.vtd-grid-preset-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 32px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--text2);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.vtd-grid-preset-btn:hover {
background: color-mix(in srgb, var(--accent, #3f7ef5) 10%, transparent);
color: var(--text);
}
.vtd-grid-preset-btn--on {
border-color: var(--accent, #3f7ef5);
background: color-mix(in srgb, var(--accent, #3f7ef5) 14%, transparent);
color: var(--accent, #3f7ef5);
}
.vtd-grid-head-divider {
width: 1px;
height: 22px;
@@ -1063,6 +1186,11 @@
align-items: start;
}
/* 헤더에서 선택한 n×n 열 수 고정 배치 */
.vtd-grid--layout-preset {
grid-template-columns: repeat(var(--vtd-grid-cols, 2), minmax(0, 1fr)) !important;
}
/* 상세보기 — 행 높이 통일·카드 stretch */
.vtd-grid--detail {
grid-auto-rows: minmax(520px, auto);
@@ -1086,6 +1214,10 @@
.vtd-grid {
grid-template-columns: minmax(0, 1fr);
}
.vtd-grid--layout-preset {
grid-template-columns: minmax(0, 1fr) !important;
}
}
.vtd-card {
@@ -1378,7 +1510,8 @@
background: var(--se-center-bg);
}
.vtd-card-chart-canvas .chart-hover-toolbar {
.vtd-card-chart-canvas .chart-hover-toolbar,
.vtd-card-chart-canvas .candle-pane-controls {
display: none !important;
}