fix: 자산 상세 정보 레이아웃 최적화 및 스타일 표준화
- 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈
This commit is contained in:
@@ -321,9 +321,60 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state {
|
/* --- Asset Detail Sidebar (LocationView) --- */
|
||||||
padding: 4rem 2rem;
|
.asset-detail-sidebar {
|
||||||
text-align: center;
|
padding-top: 1rem;
|
||||||
color: var(--text-muted);
|
background: var(--white);
|
||||||
font-size: 0.8125rem;
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-color);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
padding-bottom: 6px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
|
||||||
|
gap: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-main);
|
||||||
|
font-weight: 500;
|
||||||
|
word-break: break-all;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-header-title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -176,21 +176,22 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
const renderAssetDetail = (asset: any) => {
|
const renderAssetDetail = (asset: any) => {
|
||||||
const title = container.querySelector('#loc-list-title')!;
|
const title = container.querySelector('#loc-list-title')!;
|
||||||
const tableContainer = container.querySelector('#loc-asset-table-container')!;
|
const tableContainer = container.querySelector('#loc-asset-table-container')!;
|
||||||
|
|
||||||
title.innerHTML = `
|
title.innerHTML = `
|
||||||
<div style="display: flex; align-items: center; gap: 8px; width: 100%;">
|
<div class="detail-header-actions">
|
||||||
<button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
|
<button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
|
||||||
<span style="flex: 1;">📍 자산 상세 정보</span>
|
<span class="detail-header-title">자산 상세 정보</span>
|
||||||
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
|
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
|
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
|
||||||
<div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;">
|
<div class="detail-section">
|
||||||
<div style="font-size: 12px; font-weight: 700; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 10px;">${title}</div>
|
<div class="detail-section-title">${title}</div>
|
||||||
<div style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;">
|
<div class="detail-grid">
|
||||||
${fields.map(f => `
|
${fields.map(f => `
|
||||||
<div style="font-size: 12px; color: var(--text-muted);">${f.label}</div>
|
<div class="detail-label">${f.label}</div>
|
||||||
<div style="font-size: 12px; color: var(--text-main); font-weight: 500; word-break: break-all;">${f.value || '-'}</div>
|
<div class="detail-value">${f.value || '-'}</div>
|
||||||
`).join('')}
|
`).join('')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -224,7 +225,7 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
].join('');
|
].join('');
|
||||||
|
|
||||||
tableContainer.innerHTML = `
|
tableContainer.innerHTML = `
|
||||||
<div class="asset-detail-sidebar" style="padding-top: 1rem; background: #fff; max-height: 100%; overflow-y: auto;">
|
<div class="asset-detail-sidebar">
|
||||||
${sectionsHTML}
|
${sectionsHTML}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user