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-29 01:32:18 +09:00
parent 19ae5f5fae
commit 094a285363
5 changed files with 407 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/paperDashboard.css
+123 -17
View File
@@ -121,6 +121,8 @@
border-radius: 10px;
background: color-mix(in srgb, var(--se-bg-elevated, var(--bg2)) 88%, transparent);
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--se-text, var(--text)) 4%, transparent);
container-type: size;
container-name: split-trade-card;
}
.ptd-split-card-head {
flex-shrink: 0;
@@ -270,6 +272,12 @@
padding: 4px 8px 6px;
}
.ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) {
overflow: hidden;
overflow-y: hidden;
padding: 3px 6px 4px;
}
.ptd-split-panel--right .ptd-split-card-body > .ptd-order-card,
.ptd-split-panel--right .ptd-split-card-body > .top-panel {
flex: 1 1 0;
@@ -298,9 +306,9 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: clamp(4px, 1.2cqh, 10px);
overflow-y: auto;
overflow-x: hidden;
gap: clamp(3px, 1cqh, 10px);
overflow: hidden;
overflow-y: hidden;
}
.ptd-split-panel--right .ptd-order-card .top-paper-hint {
@@ -683,33 +691,131 @@
}
}
@container trade-card (max-height: 360px) {
.ptd-split-panel--right .ptd-order-card > .top-panel {
gap: 3px;
/* ── 우측 매수·매도 카드: 낮은 높이에서 카드 내 스크롤 없이 압축 레이아웃 ── */
@container trade-card (max-height: 520px) {
.ptd-split-panel--right .ptd-order-card .top-order-kind {
flex-wrap: wrap;
row-gap: 3px;
}
.ptd-order-card .top-price-qty-block {
.ptd-split-panel--right .ptd-order-card .top-kind-btn {
flex: 1 1 calc(33% - 4px);
min-width: 0;
padding: 3px 2px;
font-size: clamp(8px, 1.5cqh, 10px);
}
.ptd-split-panel--right .ptd-order-card .top-kind-btn--wide {
flex: 1 1 calc(50% - 4px);
}
}
@container trade-card (max-height: 440px) {
.ptd-split-panel--right .ptd-order-card > .top-panel {
gap: 2px;
}
.ptd-split-panel--right .ptd-order-card .top-panel-fields {
gap: 2px;
}
.ptd-order-card .top-price-qty-block,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 8px;
row-gap: 6px;
column-gap: 6px;
row-gap: 4px;
align-content: start;
}
.ptd-order-card .top-price-qty-block .top-field--price { grid-column: 1; grid-row: 1; }
.ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; }
.ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.ptd-order-card .top-price-qty-block .top-field--price,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--price {
grid-column: 1;
grid-row: 1;
}
.ptd-order-card .top-price-qty-block .top-field--qty,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty {
grid-column: 2;
grid-row: 1;
}
.ptd-order-card .top-price-qty-block .top-pct-row--block,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 0;
}
.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn {
flex: 1 1 calc(25% - 3px);
min-width: 0;
padding: 2px 1px;
font-size: clamp(8px, 1.4cqh, 9px);
}
.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn--direct {
flex: 1 1 calc(33% - 3px);
}
}
@container trade-card (max-height: 340px) {
.ptd-split-panel--right .ptd-order-card .top-paper-hint,
.ptd-split-panel--right .ptd-order-card .top-meta {
display: none;
}
.ptd-split-panel--right .ptd-order-card .top-label-help {
display: none;
}
.ptd-split-panel--right .ptd-order-card .top-panel--buy .top-field:has(.top-symbol-field) {
display: none;
}
.ptd-split-panel--right .ptd-order-card .top-reset {
padding: 4px 8px;
font-size: 11px;
}
.ptd-split-panel--right .ptd-order-card .top-submit {
padding: 5px 8px;
font-size: 12px;
}
}
@container split-trade-card (max-height: 200px) {
.ptd-split-panel--right .ptd-split-card-head {
padding: 3px 8px;
font-size: 10px;
}
}
@media (max-height: 820px) {
.ptd-split-panel--right .ptd-split-card-head {
padding: 4px 8px;
font-size: 10px;
}
.ptd-split-panel--right .ptd-split-card-body:has(.ptd-order-card) {
padding: 2px 5px 3px;
}
}
@media (max-height: 780px) {
@supports not (container-type: size) {
.ptd-order-card .top-price-qty-block {
.ptd-order-card .top-price-qty-block,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 8px;
column-gap: 6px;
row-gap: 4px;
}
.ptd-order-card .top-price-qty-block .top-field--price { grid-column: 1; grid-row: 1; }
.ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; }
.ptd-order-card .top-price-qty-block .top-pct-row--block { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
.ptd-order-card .top-price-qty-block .top-field--price,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--price {
grid-column: 1;
grid-row: 1;
}
.ptd-order-card .top-price-qty-block .top-field--qty,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field--qty {
grid-column: 2;
grid-row: 1;
}
.ptd-order-card .top-price-qty-block .top-pct-row--block,
.ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 0;
}
.ptd-split-panel--right .ptd-order-card .top-panel-fields {
overflow: hidden;
}
}
}