bf4000c4ae
tkqc 5개 페이지 인라인 JS/CSS를 외부 파일로 추출 (HTML 82% 감소) tkuser index.html을 CSS 1개 + JS 10개 모듈로 분리 (3283→1155줄) - 공통 유틸 추출: issue-helpers, photo-modal, toast - 공통 CSS 확장: tkqc-common.css (모바일 반응형 포함) - 모바일 하단 네비게이션 추가 (mobile-bottom-nav.js) - nginx: JS/CSS 1시간 캐싱 + gzip 압축 활성화 - Tailwind CDN preload, 캐시버스터 통일 (?v=20260213) - 카메라 capture="environment" 추가 - tkuser Dockerfile에 static/ 디렉토리 복사 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
124 lines
2.4 KiB
CSS
124 lines
2.4 KiB
CSS
/* issues-management.css — 관리함 페이지 전용 스타일 */
|
|
|
|
/* 액션 버튼 */
|
|
.action-btn {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 모달 블러 */
|
|
.modal {
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
/* 이슈 테이블 컬럼 헤더 */
|
|
.issue-table th {
|
|
background-color: #f9fafb;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.issue-table tbody tr:hover {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
/* 컬럼별 너비 조정 */
|
|
.col-no { min-width: 60px; }
|
|
.col-project { min-width: 120px; }
|
|
.col-content { min-width: 250px; max-width: 300px; }
|
|
.col-cause { min-width: 100px; }
|
|
.col-solution { min-width: 200px; max-width: 250px; }
|
|
.col-department { min-width: 100px; }
|
|
.col-person { min-width: 120px; }
|
|
.col-date { min-width: 120px; }
|
|
.col-confirmer { min-width: 120px; }
|
|
.col-comment { min-width: 200px; max-width: 250px; }
|
|
.col-status { min-width: 100px; }
|
|
.col-photos { min-width: 150px; }
|
|
.col-completion { min-width: 80px; }
|
|
.col-actions { min-width: 120px; }
|
|
|
|
/* 이슈 사진 */
|
|
.issue-photo {
|
|
width: 60px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
margin: 2px;
|
|
}
|
|
|
|
.photo-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* 편집 가능한 필드 스타일 */
|
|
.editable-field {
|
|
min-width: 100%;
|
|
padding: 4px 8px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.editable-field:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 1px #3b82f6;
|
|
}
|
|
|
|
.text-wrap {
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 4px 8px;
|
|
font-size: 0.75rem;
|
|
border-radius: 4px;
|
|
margin: 2px;
|
|
white-space: nowrap;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
/* 관리함 전용 collapse-content (max-height 기반 트랜지션) */
|
|
.collapse-content {
|
|
max-height: 1000px;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
|
|
.collapse-content.collapsed {
|
|
max-height: 0;
|
|
}
|
|
|
|
/* 관리함 전용 이슈 카드 오버라이드 */
|
|
.issue-card label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.issue-card input:focus,
|
|
.issue-card select:focus,
|
|
.issue-card textarea:focus {
|
|
transform: scale(1.01);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.issue-card .bg-gray-50 {
|
|
border-left: 4px solid #e5e7eb;
|
|
}
|
|
|
|
/* 카드 내 아이콘 스타일 */
|
|
.issue-card i {
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|