매매 시그널 화면 추가 수정
This commit is contained in:
Macbook
+74
-25
@@ -9811,9 +9811,9 @@ html.theme-blue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: clamp(4px, 1.2cqi, 10px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
gap: clamp(3px, 1cqh, 10px);
|
||||
overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.rsp-trade-card-body .top-field {
|
||||
margin-bottom: 0;
|
||||
@@ -9912,12 +9912,35 @@ html.theme-blue {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 360px) {
|
||||
@container trade-card (max-height: 520px) {
|
||||
.rsp-trade-card-body .top-order-kind {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 3px;
|
||||
}
|
||||
.rsp-trade-card-body .top-kind-btn {
|
||||
flex: 1 1 calc(33% - 4px);
|
||||
min-width: 0;
|
||||
padding: 3px 2px;
|
||||
font-size: clamp(8px, 1.5cqh, 10px);
|
||||
}
|
||||
.rsp-trade-card-body .top-kind-btn--wide {
|
||||
flex: 1 1 calc(50% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 440px) {
|
||||
.rsp-trade-card-body .top-panel {
|
||||
gap: 2px;
|
||||
}
|
||||
.rsp-trade-card-body .top-panel-fields {
|
||||
gap: 2px;
|
||||
}
|
||||
.rsp-trade-card-body .top-price-qty-block {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
column-gap: 6px;
|
||||
row-gap: 4px;
|
||||
align-content: start;
|
||||
}
|
||||
.rsp-trade-card-body .top-price-qty-block .top-field--price {
|
||||
grid-column: 1;
|
||||
@@ -9932,14 +9955,58 @@ html.theme-blue {
|
||||
grid-row: 2;
|
||||
margin-top: 0;
|
||||
}
|
||||
.rsp-trade-card-body .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);
|
||||
}
|
||||
.rsp-trade-card-body .top-pct-row--block .top-pct-btn--direct {
|
||||
flex: 1 1 calc(33% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
@container trade-card (max-height: 340px) {
|
||||
.rsp-trade-card-body .top-paper-hint,
|
||||
.rsp-trade-card-body .top-meta {
|
||||
display: none;
|
||||
}
|
||||
.rsp-trade-card-body .top-label-help {
|
||||
display: none;
|
||||
}
|
||||
.rsp-trade-card-body .top-panel--buy .top-field:has(.top-symbol-field) {
|
||||
display: none;
|
||||
}
|
||||
.rsp-trade-card-body .top-reset {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.rsp-trade-card-body .top-submit {
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 820px) {
|
||||
.rsp-trade-stack {
|
||||
gap: 6px;
|
||||
padding: 6px 8px 4px;
|
||||
}
|
||||
.rsp-trade-card-title {
|
||||
padding: 4px 10px 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 780px) {
|
||||
@supports not (container-type: size) {
|
||||
.rsp-trade-card-body .top-panel-fields {
|
||||
overflow: hidden;
|
||||
}
|
||||
.rsp-trade-card-body .top-price-qty-block {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
column-gap: 6px;
|
||||
row-gap: 4px;
|
||||
}
|
||||
.rsp-trade-card-body .top-price-qty-block .top-field--price {
|
||||
@@ -11467,28 +11534,10 @@ html.theme-light .tam-disclaimer { color: #90a4ae; }
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 매매 시그널 알림 우측: 좁은 카드에서도 주문 비율·총액이 겹치지 않도록 */
|
||||
.tnl-page--with-right .ptd-split-panel--right .ptd-order-card > .top-panel {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-panel-fields {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* 매매 시그널 알림 우측 — 가상매매·실시간 차트와 동일 compact (paperDashboard.css) */
|
||||
.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-actions {
|
||||
margin-top: auto;
|
||||
}
|
||||
@container trade-card (max-height: 400px) {
|
||||
.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-meta {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
.tnl-row--selected {
|
||||
border-color: var(--accent, #7aa2f7);
|
||||
box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.35);
|
||||
|
||||
@@ -37,6 +37,8 @@ const TradeNotificationHScrollPane: React.FC<TradeNotificationHScrollPaneProps>
|
||||
const syncScrollState = useCallback(() => {
|
||||
const el = viewportRef.current;
|
||||
if (!el) return;
|
||||
const pageWidth = Math.max(160, el.clientWidth - 20);
|
||||
el.style.setProperty('--tnl-hscroll-page-width', `${pageWidth}px`);
|
||||
const max = Math.max(0, el.scrollWidth - el.clientWidth);
|
||||
const overflow = max > 2;
|
||||
setCanScroll(overflow);
|
||||
@@ -61,7 +63,8 @@ const TradeNotificationHScrollPane: React.FC<TradeNotificationHScrollPaneProps>
|
||||
const scrollByStep = useCallback((dir: -1 | 1) => {
|
||||
const el = viewportRef.current;
|
||||
if (!el) return;
|
||||
const step = Math.max(120, Math.round(el.clientWidth * SCROLL_STEP_RATIO));
|
||||
const pageWidth = Math.max(120, el.clientWidth - 20);
|
||||
const step = Math.max(120, Math.round(pageWidth * SCROLL_STEP_RATIO));
|
||||
el.scrollBy({ left: dir * step, behavior: 'smooth' });
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* 매매 시그널 알림 목록 행 — 좌: 요약 카드(고정) · 우: 캔들+지표 카드(가로 스크롤)
|
||||
* 매매 시그널 알림 목록 행 — 4칸이 목록 너비를 꽉 채움, 보조지표 2개↑ 시 우측 슬롯만 스크롤
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { Theme } from '../../types';
|
||||
@@ -174,28 +174,10 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
]);
|
||||
const receiving = useLiveReceiveFlash(receiveSignal, liveReceiveEnabled);
|
||||
|
||||
/** 차트 영역 카드 수 — 알림상세(1) : 차트카드(N) 동일 비율 배분용 */
|
||||
const chartCardCount = useMemo(() => {
|
||||
if (!isListLayout) return 0;
|
||||
if (chartExpanded) return 1;
|
||||
let n = 1;
|
||||
if (signalActive) n += 1;
|
||||
n += indicatorCards.length;
|
||||
if (item.strategyId != null && indicatorCards.length === 0 && chartActive) n += 1;
|
||||
return n;
|
||||
}, [
|
||||
isListLayout,
|
||||
chartExpanded,
|
||||
signalActive,
|
||||
indicatorCards.length,
|
||||
item.strategyId,
|
||||
chartActive,
|
||||
]);
|
||||
|
||||
const rowGalleryStyle = useMemo(
|
||||
() => ({ '--tnl-chart-card-count': String(chartCardCount) }) as React.CSSProperties,
|
||||
[chartCardCount],
|
||||
);
|
||||
const indicatorChartCount = indicatorCards.length;
|
||||
/** 보조지표 2개 이상이면 첫 1개만 보이고 나머지는 좌우 스크롤 */
|
||||
const indicatorScrollNeeded = indicatorChartCount >= 2;
|
||||
const indicatorPlaceholder = item.strategyId != null && indicatorChartCount === 0 && chartActive;
|
||||
|
||||
const handleRowClick = useCallback((e: React.MouseEvent) => {
|
||||
const t = e.target as HTMLElement;
|
||||
@@ -324,7 +306,6 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
>
|
||||
<div
|
||||
className={['tnl-row-gallery', chartExpanded ? 'tnl-row-gallery--chart-expanded' : ''].filter(Boolean).join(' ')}
|
||||
style={rowGalleryStyle}
|
||||
>
|
||||
<TradeNotificationHScrollPane
|
||||
className="tnl-row-gallery-detail"
|
||||
@@ -333,11 +314,11 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
{summaryCard}
|
||||
</TradeNotificationHScrollPane>
|
||||
|
||||
<TradeNotificationHScrollPane
|
||||
className={['tnl-row-gallery-charts', chartExpanded ? 'tnl-row-gallery-charts--expanded' : ''].filter(Boolean).join(' ')}
|
||||
label={chartExpanded ? '차트 전체보기' : '신호·캔들·지표'}
|
||||
>
|
||||
{chartExpanded ? (
|
||||
{chartExpanded ? (
|
||||
<TradeNotificationHScrollPane
|
||||
className="tnl-row-gallery-indicators tnl-row-gallery-indicators--expanded"
|
||||
label="차트 전체보기"
|
||||
>
|
||||
<div className="tnl-charts-expanded-inner">
|
||||
{expandedChartKey === 'candle' && (
|
||||
<TradeSignalChartCard
|
||||
@@ -370,9 +351,14 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="tnl-charts-track">
|
||||
{signalActive && (
|
||||
</TradeNotificationHScrollPane>
|
||||
) : (
|
||||
<>
|
||||
{signalActive && (
|
||||
<TradeNotificationHScrollPane
|
||||
className="tnl-row-gallery-signal"
|
||||
label="신호 일치율"
|
||||
>
|
||||
<TradeNotificationSignalCard
|
||||
market={item.market}
|
||||
strategyId={item.strategyId}
|
||||
@@ -388,8 +374,10 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
signalLoading={signalLoading}
|
||||
onExpandCharts={() => setExpandedChartKey('candle')}
|
||||
/>
|
||||
)}
|
||||
</TradeNotificationHScrollPane>
|
||||
)}
|
||||
|
||||
<div className="tnl-row-gallery-candle" aria-label="캔들 차트">
|
||||
<TradeSignalChartCard
|
||||
label="캔들"
|
||||
meta={candleKo}
|
||||
@@ -403,32 +391,42 @@ const TradeNotificationListRow: React.FC<Props> = ({
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
|
||||
{indicatorCards.map(card => (
|
||||
<TradeSignalChartCard
|
||||
key={card.id}
|
||||
label={card.label}
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={card.config}
|
||||
enabled={chartActive}
|
||||
expanded={false}
|
||||
onExpand={() => setExpandedChartKey(card.id)}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
))}
|
||||
|
||||
{item.strategyId != null && indicatorCards.length === 0 && chartActive && (
|
||||
<section className="tnl-chart-card tnl-chart-card--placeholder">
|
||||
<p className="tnl-muted">전략 지표 로딩 중…</p>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TradeNotificationHScrollPane>
|
||||
|
||||
<TradeNotificationHScrollPane
|
||||
className={[
|
||||
'tnl-row-gallery-indicators',
|
||||
indicatorScrollNeeded ? 'tnl-row-gallery-indicators--scroll' : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
label="보조지표"
|
||||
>
|
||||
<div className="tnl-charts-track tnl-charts-track--indicators-only">
|
||||
{indicatorCards.map(card => (
|
||||
<TradeSignalChartCard
|
||||
key={card.id}
|
||||
label={card.label}
|
||||
meta={candleKo}
|
||||
market={item.market}
|
||||
timeframe={chartTf}
|
||||
theme={theme}
|
||||
indicators={card.config}
|
||||
enabled={chartActive}
|
||||
expanded={false}
|
||||
onExpand={() => setExpandedChartKey(card.id)}
|
||||
onRestore={() => setExpandedChartKey(null)}
|
||||
onRealtimeActivity={chartActive ? bumpChartActivity : undefined}
|
||||
/>
|
||||
))}
|
||||
|
||||
{indicatorPlaceholder && (
|
||||
<section className="tnl-chart-card tnl-chart-card--placeholder">
|
||||
<p className="tnl-muted">전략 지표 로딩 중…</p>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</TradeNotificationHScrollPane>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -54,8 +54,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 목록 한 줄 = 알림상세 · 신호일치율 · 캔들 · 보조지표(1칸) — 가로 100% 꽉 참 */
|
||||
.tnl-row-gallery {
|
||||
--tnl-summary-card-width: 320px;
|
||||
--tnl-signal-slot-width: 300px;
|
||||
--tnl-chart-card-width: 280px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
@@ -67,28 +70,66 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 좌측 알림 요약 카드 — 고정 너비(모든 행 동일) · 우측은 차트 영역이 나머지 공간 사용 */
|
||||
.tnl-row-gallery-detail {
|
||||
flex: 0 0 var(--tnl-summary-card-width);
|
||||
width: var(--tnl-summary-card-width);
|
||||
min-width: var(--tnl-summary-card-width);
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
flex: 1.15 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts {
|
||||
.tnl-row-gallery-signal {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-candle {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--se-border, var(--border));
|
||||
background: color-mix(in srgb, var(--bg) 40%, var(--bg2));
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-candle > .tnl-chart-card {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tnl-row-gallery > .tnl-hscroll-pane,
|
||||
.tnl-row-gallery > .tnl-row-gallery-candle {
|
||||
height: 300px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.tnl-row-gallery .tnl-chart-card {
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-detail {
|
||||
flex: 0 0 var(--tnl-summary-card-width);
|
||||
width: var(--tnl-summary-card-width);
|
||||
min-width: var(--tnl-summary-card-width);
|
||||
flex: 0 0 min(28%, var(--tnl-summary-card-width));
|
||||
width: min(28%, var(--tnl-summary-card-width));
|
||||
min-width: min(240px, var(--tnl-summary-card-width));
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
}
|
||||
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-charts {
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-indicators {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -139,12 +180,39 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__content {
|
||||
.tnl-row-gallery-signal .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-signal .tnl-hscroll-pane__content {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-hscroll-pane__viewport {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-hscroll-pane__content {
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-hscroll-pane__content {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--expanded .tnl-hscroll-pane__content {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__viewport {
|
||||
.tnl-row-gallery-indicators--expanded .tnl-hscroll-pane__viewport {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -217,12 +285,12 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 신호상세 — 가상매매 vtd-card 슬롯 (차트보다 좁게 · 나머지는 캔들·지표) */
|
||||
/* 신호상세 — 갤러리 행에서는 슬롯 너비 100% */
|
||||
.tnl-signal-slot {
|
||||
flex: 1.05 1 272px;
|
||||
width: auto;
|
||||
min-width: min(100%, 272px);
|
||||
max-width: 34%;
|
||||
flex: 0 0 var(--tnl-signal-slot-width);
|
||||
width: var(--tnl-signal-slot-width);
|
||||
min-width: var(--tnl-signal-slot-width);
|
||||
max-width: var(--tnl-signal-slot-width);
|
||||
height: 280px;
|
||||
max-height: 280px;
|
||||
display: flex;
|
||||
@@ -231,6 +299,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-signal .tnl-signal-slot {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.tnl-signal-slot .tnl-signal-summary--embedded-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -323,12 +400,6 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-signal-slot {
|
||||
flex: 1.05 1 272px;
|
||||
min-width: min(100%, 272px);
|
||||
max-width: 34%;
|
||||
}
|
||||
|
||||
/* 가상매매 투자대상 카드(vtd)와 동일한 3단 구성 */
|
||||
.tnl-summary-card {
|
||||
flex: 1 1 auto;
|
||||
@@ -605,11 +676,6 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts--expanded .tnl-hscroll-pane__content {
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tnl-charts-expanded-inner .tnl-chart-card--expanded {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
@@ -629,22 +695,56 @@
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-chart-card {
|
||||
flex: 1.12 1 0;
|
||||
width: 0;
|
||||
flex: 0 0 var(--tnl-chart-card-width);
|
||||
width: var(--tnl-chart-card-width);
|
||||
min-width: var(--tnl-chart-card-width);
|
||||
max-width: var(--tnl-chart-card-width);
|
||||
}
|
||||
|
||||
/* 보조지표 1개 — 슬롯 너비 100% 채움 */
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only > .tnl-chart-card,
|
||||
.tnl-row-gallery-indicators:not(.tnl-row-gallery-indicators--scroll) .tnl-charts-track--indicators-only > .tnl-chart-card--placeholder {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* 보조지표 2개↑ — 우측 슬롯 안에서만 스크롤, 페이지당 1장 = 슬롯 너비 */
|
||||
.tnl-row-gallery-indicators--scroll .tnl-charts-track--indicators-only {
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-indicators--scroll .tnl-charts-track--indicators-only > .tnl-chart-card {
|
||||
flex: 0 0 var(--tnl-hscroll-page-width, 240px);
|
||||
width: var(--tnl-hscroll-page-width, 240px);
|
||||
min-width: var(--tnl-hscroll-page-width, 240px);
|
||||
max-width: var(--tnl-hscroll-page-width, 240px);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tnl-charts-track--indicators-only:not(:has(.tnl-chart-card)) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-chart-card {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
flex: 0 0 var(--tnl-chart-card-width);
|
||||
width: var(--tnl-chart-card-width);
|
||||
min-width: var(--tnl-chart-card-width);
|
||||
height: 280px;
|
||||
max-height: 280px;
|
||||
display: flex;
|
||||
@@ -1076,12 +1176,14 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-width: var(--tnl-summary-card-width);
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts,
|
||||
.tnl-row-gallery--chart-expanded .tnl-row-gallery-charts {
|
||||
.tnl-row-gallery-detail,
|
||||
.tnl-row-gallery-signal,
|
||||
.tnl-row-gallery-candle,
|
||||
.tnl-row-gallery-indicators {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tnl-hscroll-pane {
|
||||
@@ -1089,10 +1191,6 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.tnl-row-gallery-charts .tnl-hscroll-pane__viewport {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tnl-summary-card {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@@ -1100,16 +1198,16 @@ ul.tnl-list.tnl-list--grid {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.tnl-charts-track {
|
||||
min-width: max-content;
|
||||
width: max-content;
|
||||
.tnl-row-gallery-signal .tnl-signal-slot,
|
||||
.tnl-charts-track > .tnl-chart-card {
|
||||
flex: 0 0 min(var(--tnl-chart-card-width), 88vw);
|
||||
width: min(var(--tnl-chart-card-width), 88vw);
|
||||
min-width: min(var(--tnl-chart-card-width), 88vw);
|
||||
}
|
||||
|
||||
.tnl-charts-track > .tnl-chart-card,
|
||||
.tnl-charts-track > .tnl-signal-slot {
|
||||
flex: 0 0 min(300px, 88vw);
|
||||
width: min(300px, 88vw);
|
||||
min-width: min(300px, 88vw);
|
||||
max-width: none;
|
||||
.tnl-row-gallery-signal .tnl-signal-slot {
|
||||
flex: 0 0 min(var(--tnl-signal-slot-width), 88vw);
|
||||
width: min(var(--tnl-signal-slot-width), 88vw);
|
||||
min-width: min(var(--tnl-signal-slot-width), 88vw);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user