Refine process cost navigation and unify section layouts
This commit is contained in:
b17301
+106
-38
@@ -71,10 +71,11 @@
|
||||
}
|
||||
|
||||
.metric-note {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: 14px 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
font-size: 14px;
|
||||
@@ -85,13 +86,12 @@
|
||||
}
|
||||
|
||||
.chart-stage {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 249, 0.98)),
|
||||
radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 34%);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: 16px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
@@ -189,7 +189,20 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
min-height: var(--toolbar-row-height);
|
||||
margin-bottom: 12px;
|
||||
padding: 0 0 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.toolbar-head h3,
|
||||
.toolbar-head h4 {
|
||||
margin: 0;
|
||||
height: var(--toolbar-row-height);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toolbar-title-group {
|
||||
@@ -210,6 +223,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: var(--toolbar-row-height);
|
||||
}
|
||||
|
||||
.project-quick-link-bar {
|
||||
@@ -300,9 +314,10 @@
|
||||
|
||||
.project-search-controls {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 170px 210px;
|
||||
grid-template-columns: minmax(0, 1fr) 180px 236px;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
min-height: var(--toolbar-row-height);
|
||||
}
|
||||
|
||||
.project-search-field {
|
||||
@@ -312,6 +327,16 @@
|
||||
z-index: 180;
|
||||
}
|
||||
|
||||
.project-search-field > input,
|
||||
.project-search-controls .field > select,
|
||||
.uncontracted-toolbar .field > select {
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.project-search-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -452,10 +477,11 @@
|
||||
}
|
||||
|
||||
.analysis-stat {
|
||||
border: 1px solid #dfe6ee;
|
||||
border-radius: 14px;
|
||||
background: rgba(255,255,255,0.94);
|
||||
padding: 14px 16px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 0 0 12px;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
}
|
||||
@@ -471,14 +497,21 @@
|
||||
}
|
||||
|
||||
.analysis-panel {
|
||||
background: rgba(255,255,255,0.98);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 18px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: 18px 0 0;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.analysis-panel:empty {
|
||||
display: none;
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.analysis-panel h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -1016,7 +1049,7 @@
|
||||
}
|
||||
|
||||
#projectUncontractedDashboard {
|
||||
padding: 20px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1034,13 +1067,29 @@
|
||||
z-index: 1;
|
||||
content-visibility: visible;
|
||||
contain: none;
|
||||
margin-top: 12px;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.uncontracted-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 180px) auto;
|
||||
grid-template-columns: 180px 180px 44px;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
min-height: var(--toolbar-row-height);
|
||||
width: 428px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.uncontracted-dashboard .toolbar-head {
|
||||
margin-bottom: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.uncontracted-dashboard .toolbar-head h3 {
|
||||
height: var(--toolbar-row-height);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uncontracted-summary-grid {
|
||||
@@ -1050,10 +1099,11 @@
|
||||
}
|
||||
|
||||
.uncontracted-stat {
|
||||
border: 1px solid #dfe6ee;
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
background: #fbfcfd;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(217, 221, 227, 0.9);
|
||||
border-radius: 0;
|
||||
padding: 0 0 12px;
|
||||
background: transparent;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
text-align: left;
|
||||
@@ -1067,14 +1117,14 @@
|
||||
|
||||
.uncontracted-stat.is-clickable {
|
||||
cursor: pointer;
|
||||
transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
|
||||
transition: color 0.16s ease, border-color 0.16s ease;
|
||||
}
|
||||
|
||||
.uncontracted-stat.is-clickable:hover,
|
||||
.uncontracted-stat.is-clickable.is-active {
|
||||
border-color: #c8d7e5;
|
||||
box-shadow: 0 12px 22px rgba(22, 33, 50, 0.08);
|
||||
transform: translateY(-1px);
|
||||
border-color: #111827;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.uncontracted-stat span {
|
||||
@@ -1131,6 +1181,15 @@
|
||||
|
||||
.uncontracted-dashboard-grid .detail-block {
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-radius: 0;
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.uncontracted-dashboard-grid .detail-block h4 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.compact-table {
|
||||
@@ -1152,7 +1211,15 @@
|
||||
.compact-table th {
|
||||
font-size: 11px;
|
||||
color: #547085;
|
||||
background: #f5f8fb;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.compact-table td {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.compact-table tbody tr:nth-child(even) td {
|
||||
background: #fcfdff;
|
||||
}
|
||||
|
||||
.compact-table td:last-child,
|
||||
@@ -2199,7 +2266,7 @@
|
||||
|
||||
.metric-grid .stat-card {
|
||||
min-height: 78px;
|
||||
padding: 11px 12px 10px;
|
||||
padding: 0 8px 10px 0;
|
||||
}
|
||||
|
||||
.metric-grid .stat-card .value {
|
||||
@@ -2412,7 +2479,7 @@
|
||||
<div class="field">
|
||||
<select id="projectCostYearFilter" aria-label="연도 필터">
|
||||
<option value="">전체 연도</option>
|
||||
{% for year in project_year_options %}
|
||||
{% for year in project_year_options|sort(reverse=True) %}
|
||||
<option value="{{ year }}">{{ year }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@@ -6339,8 +6406,9 @@
|
||||
function renderUncontractedDashboard() {
|
||||
const data = buildUncontractedDashboardData();
|
||||
const allYears = getUncontractedYearRange().allYears;
|
||||
const startOptions = allYears.map((year) => `<option value="${year}"${Number(year) === Number(data.startYear) ? " selected" : ""}>${year}</option>`).join("");
|
||||
const endOptions = allYears.map((year) => `<option value="${year}"${Number(year) === Number(data.endYear) ? " selected" : ""}>${year}</option>`).join("");
|
||||
const orderedYears = [...allYears].sort((a, b) => Number(b) - Number(a));
|
||||
const startOptions = orderedYears.map((year) => `<option value="${year}"${Number(year) === Number(data.startYear) ? " selected" : ""}>${year}</option>`).join("");
|
||||
const endOptions = orderedYears.map((year) => `<option value="${year}"${Number(year) === Number(data.endYear) ? " selected" : ""}>${year}</option>`).join("");
|
||||
const detailExpenseTotal = (data.detailRows || []).reduce((sum, row) => sum + Number(row.expense_amount || 0), 0);
|
||||
const detailRevenueTotal = (data.detailRows || []).reduce((sum, row) => sum + Number(row.revenue_amount || 0), 0);
|
||||
latestExcludedDetailRows = data.excludedDetailRows || [];
|
||||
|
||||
Reference in New Issue
Block a user