fix(ui): theme-card reads for new sources + padding/undefined-css-var fixes
- define missing design tokens (--card/--foreground/--accent/--font/--text-2) that theme/modal components referenced but :root never declared (they rendered transparent/wrong color) - zero section-panel padding so .signal-header is the single top-spacing source (was double 22px+22px on theme/lineage/health/sim/backtest panels) - theme cards now surface the new source reads (banks rate, retail sales YoY, nonbank household debt, property prices, telecom business confidence)
This commit is contained in:
Kunthawat Greethong
1
frontend/dist/assets/index-CUx7tUuk.css
vendored
Normal file
1
frontend/dist/assets/index-CUx7tUuk.css
vendored
Normal file
File diff suppressed because one or more lines are too long
18
frontend/dist/assets/index-Ca0nIUj6.js
vendored
18
frontend/dist/assets/index-Ca0nIUj6.js
vendored
File diff suppressed because one or more lines are too long
1
frontend/dist/assets/index-Dv48rkXC.css
vendored
1
frontend/dist/assets/index-Dv48rkXC.css
vendored
File diff suppressed because one or more lines are too long
18
frontend/dist/assets/index-eGeNIixN.js
vendored
Normal file
18
frontend/dist/assets/index-eGeNIixN.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
frontend/dist/index.html
vendored
4
frontend/dist/index.html
vendored
@@ -5,8 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#0b1018" />
|
||||
<title>SET50 Signal Lab</title>
|
||||
<script type="module" crossorigin src="/assets/index-Ca0nIUj6.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-Dv48rkXC.css">
|
||||
<script type="module" crossorigin src="/assets/index-eGeNIixN.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-CUx7tUuk.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -572,6 +572,15 @@ onMounted(async () => { await loadDashboard(); await Promise.all([loadBacktestRu
|
||||
<div v-else-if="theme.id === 'auto_credit' && theme.read.auto_npl_pct != null" class="theme-read-value">NPL {{ formatNumber(theme.read.auto_npl_pct) }}%</div>
|
||||
<div v-else-if="theme.id === 'refining_energy' && (theme.read.quarterly || theme.read.net_profit)" class="theme-read-value">กำไรสุทธิ TOP (รายไตรมาส)</div>
|
||||
<div v-else-if="theme.id === 'tourism'" class="theme-read-value">signal tourism {{ theme.surprise != null ? formatNumber(theme.surprise,2) : '—' }}σ</div>
|
||||
<div v-else-if="theme.id === 'banks' && theme.read.interest_rate_pct != null" class="theme-read-value">ดอกเบี้ย {{ formatNumber(theme.read.interest_rate_pct) }}%</div>
|
||||
<div v-else-if="theme.id === 'banks' && theme.read.bank_npl_pct != null" class="theme-read-value">NPL ภาคการเงิน {{ formatNumber(theme.read.bank_npl_pct) }}%</div>
|
||||
<div v-else-if="(theme.id === 'retail' || theme.id === 'consumer_staples') && theme.read.retail_sales_yoy != null" class="theme-read-value">ยอดขายปลีก {{ formatNumber(theme.read.retail_sales_yoy) }}% YoY</div>
|
||||
<div v-else-if="(theme.id === 'retail' || theme.id === 'consumer_staples') && theme.read.consumer_confidence != null" class="theme-read-value">เชื่อมั่นผู้บริโภค {{ formatNumber(theme.read.consumer_confidence, 1) }}</div>
|
||||
<div v-else-if="theme.id === 'nonbank_finance' && theme.read.consumer_credit != null" class="theme-read-value">สินเชื่อผู้บริโภค {{ formatNumber(theme.read.consumer_credit / 1e6, 2) }} ล้านลบ.</div>
|
||||
<div v-else-if="theme.id === 'nonbank_finance' && theme.read.household_debt_gdp != null" class="theme-read-value">หนี้ครัวเรือน {{ formatNumber(theme.read.household_debt_gdp) }}% GDP</div>
|
||||
<div v-else-if="theme.id === 'property' && theme.read.property_prices_yoy != null" class="theme-read-value">ราคาอสังหา {{ formatNumber(theme.read.property_prices_yoy) }}% YoY</div>
|
||||
<div v-else-if="theme.id === 'telecom_it' && theme.read.business_confidence != null" class="theme-read-value">เชื่อมั่นธุรกิจ {{ formatNumber(theme.read.business_confidence, 1) }}</div>
|
||||
<div v-else-if="theme.id === 'healthcare' && theme.read.consumption_yoy != null" class="theme-read-value">บริโภค {{ formatNumber(theme.read.consumption_yoy) }}% YoY</div>
|
||||
</div>
|
||||
<div v-if="theme.narrative" class="theme-narrative">{{ theme.narrative }}</div>
|
||||
</article>
|
||||
|
||||
@@ -21,6 +21,18 @@
|
||||
--amber-soft: rgba(230, 185, 108, 0.12);
|
||||
--red: #ef8b8b;
|
||||
--red-soft: rgba(239, 139, 139, 0.12);
|
||||
/* aliases the theme/macro/sources/modal components reference — these were
|
||||
written against a design-system variable set that was never declared, so
|
||||
every var() below fell back to invalid and those elements lost their
|
||||
intended background/color. Map them onto the real palette here. */
|
||||
--card: #151f2d; /* card background = panel-soft */
|
||||
--foreground: #edf2f7; /* primary text = --text */
|
||||
--text-2: #a9b2c2; /* secondary text */
|
||||
--font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--accent: #4da3ff; /* blue accent (distinct from mint) */
|
||||
--accent-soft: rgba(77, 163, 255, 0.12);
|
||||
--danger: #ef8b8b; /* = --red */
|
||||
--line-weak: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -116,6 +128,13 @@ tbody tr:hover { background: rgba(255,255,255,.025); }
|
||||
.reason-code { display: inline-block; margin: 2px 3px 2px 0; padding: 4px 5px; border: 1px solid var(--line-bright); border-radius: 4px; color: var(--faint); font: 9px 'DM Mono', monospace; }
|
||||
|
||||
/* ---- Theme panel (multi-theme) ---- */
|
||||
/* These sections are `class="panel X-panel"` with an inner `.panel-header
|
||||
signal-header`. `.panel` applies 22px padding; `.signal-header` applies its
|
||||
own 22px + bottom border. Without padding:0 the header ends up inset 44px
|
||||
while the body stays at 22px -> header misaligned from content. Zero the
|
||||
panel padding and let the header carry the spacing (matches .stock-panel). */
|
||||
.theme-panel, .lineage-panel, .health-panel, .sim-panel, .backtest-panel,
|
||||
.research-panel { padding: 0; overflow: hidden; }
|
||||
.theme-panel { margin-top: 18px; }
|
||||
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
.theme-card { border: 1px solid var(--line-bright); border-radius: 10px; padding: 14px; background: var(--card); }
|
||||
@@ -307,7 +326,12 @@ input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(82,214,189,.
|
||||
.topbar { display: block; padding-bottom: 25px; }
|
||||
.topbar-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; text-align: left; }
|
||||
.hero-grid, .bottom-grid { grid-template-columns: 1fr; }
|
||||
.panel { padding: 18px; }
|
||||
/* .panel's default 18px must NOT re-pad the section panels (theme/stock/
|
||||
lineage/health/sim/backtest/research) — those keep padding:0 so their
|
||||
.signal-header stays the single source of top spacing; otherwise the
|
||||
header (#1a7f) would sit inset 18px further than the body. */
|
||||
.panel:not(.theme-panel):not(.stock-panel):not(.lineage-panel):not(.health-panel):not(.sim-panel):not(.backtest-panel):not(.research-panel):not(.signal-panel) { padding: 18px; }
|
||||
.signal-header { padding: 18px; }
|
||||
.research-grid { grid-template-columns: 1fr; gap: 18px; }
|
||||
.research-results { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user