hyungi/TK-BOM-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔄 테이블 헤더 고정 해제 및 가로 스크롤 개선
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Details

Browse Source 
- 모든 카테고리 헤더의 position: sticky 제거
- 헤더와 본문이 함께 좌우로 스크롤되도록 변경
- 더 나은 UX: 전체 테이블을 좌우로 자유롭게 이동 가능
- 컬럼 너비 최적화 (타입, 재질 등 컬럼 크기 조정)
This commit is contained in:
Hyungi Ahn
2025-10-13 15:04:43 +09:00
parent 573f145f50
commit 2ea7f2879f
1 changed files with 8 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/pages/NewMaterialsPage.css
View File

@@ -312,9 +312,6 @@
text-transform: uppercase;
letter-spacing: 0.5px;
align-items: center;
position: sticky;
top: 0;
z-index: 10;
}
.detailed-grid-header > div {
@@ -346,10 +343,6 @@
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px !important;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
.detailed-grid-header.pipe-header > div,
@@ -382,10 +375,6 @@
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 120px 200px 100px;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
.detailed-grid-header.special-header > div,
@@ -410,10 +399,6 @@
grid-template-columns: 60px 90px 130px 80px 100px 250px 120px 200px 100px;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
/* BOLT 전용 행 - 9개 컬럼 */
@@ -460,10 +445,6 @@
grid-template-columns: 60px 90px 130px 80px 200px 120px 200px 100px;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
/* U-BOLT 전용 행 - 8개 컬럼 */
@@ -512,10 +493,6 @@
grid-template-columns: 60px 90px 150px 80px 100px 200px 120px 200px 100px;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
/* SUPPORT 전용 행 - 9개 컬럼 */
@@ -557,13 +534,9 @@
/* 플랜지 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.flange-header {
grid-template-columns: 60px 90px 150px 80px 100px 100px 250px 120px 200px 100px;
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
padding: 12px 0;
margin: 0 24px;
position: sticky;
top: 0;
z-index: 10;
background: #f9fafb;
}
.detailed-grid-header.flange-header > div,
@@ -578,7 +551,7 @@
/* 플랜지 전용 행 - 10개 컬럼 */
.detailed-material-row.flange-row {
grid-template-columns: 60px 90px 150px 80px 100px 100px 250px 120px 200px 100px;
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 200px 100px;
padding: 8px 0;
margin: 0 24px;
}
@@ -593,7 +566,7 @@
/* 피팅 전용 헤더 - 10개 컬럼 */
.detailed-grid-header.fitting-header {
grid-template-columns: 60px 90px 200px 80px 80px 100px 250px 120px 200px 100px;
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
padding: 12px 0;
margin: 0 24px;
}
@@ -610,7 +583,7 @@
/* 피팅 전용 행 - 10개 컬럼 */
.detailed-material-row.fitting-row {
grid-template-columns: 60px 90px 200px 80px 80px 100px 250px 120px 200px 100px;
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 200px 100px;
padding: 8px 0;
margin: 0 24px;
}
@@ -625,7 +598,7 @@
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-grid-header.valve-header {
grid-template-columns: 60px 200px 120px 80px 80px 250px 120px 200px 100px;
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
padding: 12px 0;
margin: 0 24px;
}
@@ -642,7 +615,7 @@
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
.detailed-material-row.valve-row {
grid-template-columns: 60px 200px 120px 80px 80px 250px 120px 200px 100px;
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 200px 100px;
padding: 8px 0;
margin: 0 24px;
}
@@ -657,7 +630,7 @@
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-grid-header.gasket-header {
grid-template-columns: 60px 90px 120px 80px 80px 120px 250px 80px 120px 200px 100px;
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
padding: 12px 0;
margin: 0 24px;
}
@@ -674,7 +647,7 @@
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
.detailed-material-row.gasket-row {
grid-template-columns: 60px 90px 120px 80px 80px 120px 250px 80px 120px 200px 100px;
grid-template-columns: 60px 90px 100px 80px 80px 120px 200px 80px 100px 200px 100px;
padding: 8px 0;
margin: 0 24px;
}