djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일 - 문의사항 등록 디자인 적용

Browse Source
This commit is contained in:
현성필
2025-12-12 15:47:59 +09:00
parent b5670aab62
commit ee4404003a
7 changed files with 246 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+108 -15
View File
@@ -12864,9 +12864,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-notice-list {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-notice-list:hover {
@@ -13282,6 +13285,14 @@ input[type=checkbox]:checked + .custom-checkbox {
border-radius: 12px;
}
}
@media (max-width: 768px) {
.inquiry-content-body {
background: transparent;
border-radius: 0;
padding: 0;
min-height: auto;
}
}
.inquiry-content-body p {
margin-bottom: 16px;
}
@@ -13371,18 +13382,29 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.inquiry-detail-actions {
flex-direction: column-reverse;
gap: 24px;
flex-direction: row;
justify-content: center;
gap: 8px;
}
}
.inquiry-detail-actions .actions-left {
display: flex;
gap: 16px;
}
@media (max-width: 1024px) {
.inquiry-detail-actions .actions-left {
gap: 8px;
}
}
.inquiry-detail-actions .actions-right {
display: flex;
gap: 16px;
}
@media (max-width: 1024px) {
.inquiry-detail-actions .actions-right {
gap: 8px;
}
}
.btn-inquiry-list {
display: flex;
@@ -13402,9 +13424,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-list {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-list:hover {
@@ -13432,9 +13457,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-edit {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-edit:hover {
@@ -13462,9 +13490,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 1024px) {
.btn-inquiry-delete {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
}
.btn-inquiry-delete:hover {
@@ -13590,6 +13621,68 @@ input[type=checkbox]:checked + .custom-checkbox {
color: #1A1A2E;
}
@media (max-width: 768px) {
.inquiry-form-container {
padding: 24px 16px;
}
.inquiry-form-container .register-title-bar {
background: transparent;
padding: 16px 0;
margin-bottom: 0;
}
.inquiry-form-container .register-form-container {
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.inquiry-form-container .form-row {
padding: 16px 0;
}
.inquiry-form-container .form-actions, .inquiry-form-container .form-actions-center {
display: flex;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
padding: 32px 0 0;
margin-top: 16px;
}
.inquiry-form-container .form-actions .btn, .inquiry-form-container .form-actions-center .btn {
width: auto !important;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
}
.inquiry-form-container .form-actions .btn-secondary, .inquiry-form-container .form-actions-center .btn-secondary {
background: #E5E7EB;
color: #5F666C;
border: none;
}
.inquiry-form-container .form-actions .btn-secondary:hover, .inquiry-form-container .form-actions-center .btn-secondary:hover {
background: rgb(214.5869565217, 217.6956521739, 223.9130434783);
}
.inquiry-form-container .form-actions .btn-primary, .inquiry-form-container .form-actions-center .btn-primary {
background: #0049b4;
color: #FFFFFF;
border: none;
}
.inquiry-form-container .form-actions .btn-primary:hover, .inquiry-form-container .form-actions-center .btn-primary:hover {
background: rgb(0, 62.6583333333, 154.5);
}
.inquiry-form-container .file-upload-inline .file-input-display {
min-height: 50px;
padding: 0 16px;
}
.inquiry-form-container .file-upload-inline .btn-file-attach {
height: 50px;
font-size: 15px;
}
}
.inquiry-page {
min-height: calc(100vh - 140px);
background: #F8FAFC;
@@ -14049,7 +14142,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.inquiry-detail-actions {
flex-direction: column;
flex-direction: row;
align-items: stretch;
}
}
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/pages/_inquiry.scss
+1 -1
View File
@@ -504,7 +504,7 @@
flex-wrap: wrap;
@media (max-width: $breakpoint-sm) {
flex-direction: column;
flex-direction: row;
align-items: stretch;
}
src/main/resources/static/sass/pages/_notice.scss
+126 -14
View File
@@ -246,9 +246,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -709,6 +712,14 @@
border-radius: 12px;
}
// 모바일에서 flat 스타일
@media (max-width: $breakpoint-sm) {
background: transparent;
border-radius: 0;
padding: 0;
min-height: auto;
}
p {
margin-bottom: $spacing-md;
@@ -800,18 +811,27 @@
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
flex-direction: column-reverse;
gap: $spacing-lg;
flex-direction: row;
justify-content: center;
gap: $spacing-sm;
}
.actions-left {
display: flex;
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
gap: $spacing-sm;
}
}
.actions-right {
display: flex;
gap: $spacing-md;
@media (max-width: $breakpoint-md) {
gap: $spacing-sm;
}
}
}
@@ -833,9 +853,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 160px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -864,9 +887,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -895,9 +921,12 @@
transition: $transition-base;
@media (max-width: $breakpoint-md) {
width: 100px;
height: 50px;
font-size: 16px;
width: auto;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
}
&:hover {
@@ -1041,3 +1070,86 @@
color: $text-dark;
}
}
// -----------------------------------------------------------------------------
// Inquiry Form Page - Mobile Flat Design
// -----------------------------------------------------------------------------
.inquiry-form-container {
@media (max-width: $breakpoint-sm) {
padding: $spacing-lg $spacing-md;
// Title Bar - Flat 디자인
.register-title-bar {
background: transparent;
padding: $spacing-md 0;
margin-bottom: 0;
}
// Form container - Flat 디자인 (그림자, 테두리 제거)
.register-form-container {
box-shadow: none !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
// Form Row - 모바일 레이아웃
.form-row {
padding: $spacing-md 0;
}
// Form actions - mainInquiryDetail.html 버튼 스타일 참고
.form-actions {
display: flex;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: $spacing-sm !important;
padding: $spacing-xl 0 0;
margin-top: $spacing-md;
.btn {
width: auto !important;
min-width: 80px;
padding: 0 16px;
height: 44px;
font-size: 15px;
border-radius: 8px;
flex: 0 0 auto;
}
.btn-secondary {
background: #E5E7EB;
color: #5F666C;
border: none;
&:hover {
background: darken(#E5E7EB, 5%);
}
}
.btn-primary {
background: #0049b4;
color: $white;
border: none;
&:hover {
background: darken(#0049b4, 5%);
}
}
}
// File upload - 모바일 조정 (form-input과 동일한 높이 유지)
.file-upload-inline {
.file-input-display {
min-height: 50px;
padding: 0 $spacing-md;
}
.btn-file-attach {
height: 50px;
font-size: 15px;
}
}
}
}