b24014/ITAM-test
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 자산 상세 정보 레이아웃 최적화 및 스타일 표준화

Browse Source 
- 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈
This commit is contained in:
이태훈
2026-06-11 10:37:33 +09:00
parent 207acbdecb
commit 95fbd3f606
2 changed files with 65 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/styles/dashboard.css
View File

@@ -321,9 +321,60 @@
cursor: pointer;
}
.empty-state {
padding: 4rem 2rem;
text-align: center;
color: var(--text-muted);
font-size: 0.8125rem;
/* --- Asset Detail Sidebar (LocationView) --- */
.asset-detail-sidebar {
padding-top: 1rem;
background: var(--white);
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;
}

17
src/views/LocationView.ts
View File

@@ -176,21 +176,22 @@ export async function renderLocationView(container: HTMLElement) {
const renderAssetDetail = (asset: any) => {
const title = container.querySelector('#loc-list-title')!;
const tableContainer = container.querySelector('#loc-asset-table-container')!;
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>
<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>
</div>
`;
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
<div class="detail-section" style="margin-bottom: 20px; padding: 0 1rem;">
<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 style="display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px;">
<div class="detail-section">
<div class="detail-section-title">${title}</div>
<div class="detail-grid">
${fields.map(f => `
<div style="font-size: 12px; color: var(--text-muted);">${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-label">${f.label}</div>
<div class="detail-value">${f.value || '-'}</div>
`).join('')}
</div>
</div>
@@ -224,7 +225,7 @@ export async function renderLocationView(container: HTMLElement) {
].join('');
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}
</div>
`;