feat(system3): TKQC 모바일 전용 페이지 구현 및 데스크탑 관리함 반응형 개선
- 모바일 전용 페이지 신규: /m/dashboard, /m/inbox, /m/management - 공통 모바일 CSS/JS: m-common.css, m-common.js (바텀시트, 바텀네비, 터치 최적화) - nginx.conf에 /m/ location 블록 추가 - 데스크탑 HTML에 모바일 뷰포트 리다이렉트 추가 (<=768px) - 데스크탑 관리함 카드 헤더 반응형 레이아웃 (flex-wrap, 1280px 브레이크포인트) - collapse-content overflow:hidden → overflow:visible 수정 (내용 잘림 해결) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -91,13 +91,14 @@
|
||||
|
||||
/* 관리함 전용 collapse-content (max-height 기반 트랜지션) */
|
||||
.collapse-content {
|
||||
max-height: 1000px;
|
||||
overflow: hidden;
|
||||
max-height: 5000px;
|
||||
overflow: visible;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.collapse-content.collapsed {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 관리함 전용 이슈 카드 오버라이드 */
|
||||
@@ -121,3 +122,62 @@
|
||||
width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== 카드 헤더 반응형 ===== */
|
||||
.issue-card-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.issue-card-header .header-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.issue-card-header .header-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.issue-card-header .header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.issue-card-header .header-actions button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 중간 화면에서 버튼 줄바꿈 */
|
||||
@media (max-width: 1280px) {
|
||||
.issue-card-header .header-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.issue-card-header .header-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* 완료됨 카드 3열 → 좁은 화면에서 적응 */
|
||||
@media (max-width: 1280px) and (min-width: 769px) {
|
||||
.completed-card-grid {
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (min-width: 769px) {
|
||||
.completed-card-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user