모바일 화면이다보니까 아무래도 노출되는 부분에 제약이 많습니다.

pc의 달력부분의 노출을 그대로 할려면 css 작업을 해야되는데요

달력부분만 pc랑 동일하게 보여지면 되는건가요?

 

네..달력 부분이 PC랑 동일하게 나오면 됩니다.

다른 펜션 템플릿도

모바일쪽 달력은 PC와 유사하게 고객에게 익숙한 예약화면이 보여지면 좋을것 같습니다.

기본템플릿을 변경을 하기는 어려울듯 합니다.

설정부분에 대해서 설명을 드릴테니 업체쪽의 요구사항이 발생할때 직접 수정처리를 해주시면 될 듯 합니다. 

 

[디자인관리 > 고급 디자인 관리 > CSS 파일관리] 에서 다음 두 파일을 수정합니다.

 

 

 

1. layout_tablet (태블릿 화면)

- 빨간색 소스를 복사합니다.

- (작업후 layout_tablet의 빨간색 소스는 삭제하셔도 됩니다.)

 

/* 예약하기 - 실시간예약 */
.ReserveRoom {
    padding:30px 1em;
    > .body {padding:1em;}
    .tabNavigation {border-bottom-color:#ccc;}
    .step1 {
        .selectMonth {
            a {
                width:20px; height:20px;
                &.prev {background-position:-20px -120px;}
                &.next {background-position:-20px -140px;}
            }
            strong {font-size:24px;}
        }
        .pc_calList {
            display:table; width:100%; *display:block;
            th, td {border:1px solid #ccc;}
            thead {
                th {background-color:whitesmoke; padding:.8em; border-bottom:none; font-size:13px; color:#333;}
            }
            tbody {
                td {padding:.8em .8em .5em; font-size:13px; width:14.2%; height:100px; vertical-align:top;}
            }
            .hgroup {
                margin-bottom:.5em;
                strong {font-size:18px; color:#333; font-weight:bold;}
                span {font-size:12px;}
            }
            .subject {color:#333; font-weight:bold; text-align:center; padding:.5em 0;}
            .rooms {
                @extend %ul;
                li {margin:.3em 0;}
                .title {font-weight:bold;}
                p {margin:.2em 0; font-size:12px;}
                a {color:#666;}
                .state {padding:.3em .4em .2em; font-size:11px;}
            }
            thead .sun, tbody .sun .hgroup strong {color:red;}
            thead .sat, tbody .sat .hgroup strong {color:blue;}
            .today {background-color:#dffaff;}
        }
        .mo_calList {display:none;}
    }
}

 

 

 

2. layout_mobile (모바일, 메뉴색상)

- 복사된 빨간색 소스를 아래와 같은 위치에 붙여 넣습니다.

- 파란색 소스를 추가합니다.

 

 

/* 예약하기 - 실시간예약 */
.ReserveRoom {
    padding:0;
    select {font-size:13px; border:1px solid #aaa;}
    .step1 {
        overflow-x:scroll;
        .selectMonth {
            margin:1.5em 0; text-align:center;
            a {
                @extend %dib;
                vertical-align:middle; width:20px; height:20px;
                &.prev {background-position:0 -120px;}
                &.next {background-position:0 -140px;}
            }
            strong {font-family:Arial; font-size:18px; font-weight:normal; vertical-align:middle; color:#333; letter-spacing:.05em}
        }
        .info {
            margin:1em 0; font-size:13px;
            dd {margin:.3em 0 0; font-weight:bold; color:#0a4ec5;}
        }
        .pc_calList {display:none;}
        .mo_calList {
            margin: 15px 0;
            table {text-align:center;}
            th, td {border:1px solid #ccc;}
            thead {
                th {
                    color:#333; font-size:13px; padding: 0 .6em; height: 32px;
                    background-color:whitesmoke; border-bottom:none;
                }
            }
            tbody {
                th, td {padding:.4em; font-size:13px;}
                th {
                    color:#333; font-family:Arial; background: white;
                    padding-left: 10px; padding-right: 10px;
                }
            }
        }
        .guide {
            margin:1em 0; text-align:right;
            font-size:13px; color:#666;
            span {padding:0 .3em;}
            b {vertical-align: middle;}
            i {margin-right:4px;}
        }
        .state {
            @extend %dib;
            padding:.4em .5em .35em; vertical-align:middle;
            color:#fff; font-size:12px; font-weight:bold; text-decoration:none; font-style:normal;
            border-radius:.2em;
            &.type1 {background-color:#00a8e1;}
            &.type2 {background-color:#ff7000;}
            &.type3 {background-color:#979797;}
        }
        .today {background:#dffaff !important;}
        .pc_calList {
            display:table; width:100%; min-width:640px; *display:block;
            th, td {border:1px solid #ccc;}
            thead {
                th {background-color:whitesmoke; padding:.8em; border-bottom:none; font-size:13px; color:#333;}
            }
            tbody {
                td {padding:.8em .8em .5em; font-size:13px; width:14.2%; height:100px; vertical-align:top;}
            }
            .hgroup {
                margin-bottom:.5em;
                strong {font-size:18px; color:#333; font-weight:bold;}
                span {font-size:12px;}
            }
            .subject {color:#333; font-weight:bold; text-align:center; padding:.5em 0;}
            .rooms {
                @extend %ul;
                li {margin:.3em 0;}
                .title {font-weight:bold;}
                p {margin:.2em 0; font-size:12px;}
                a {color:#666;}
                .state {padding:.3em .4em .2em; font-size:11px;}
            }
            thead .sun, tbody .sun .hgroup strong {color:red;}
            thead .sat, tbody .sat .hgroup strong {color:blue;}
            .today {background-color:#dffaff;}
        }
        .mo_calList {display:none;}
    }
    .step2 {
        fieldset {
            margin:2em 0; padding:0; border:none;
            legend {font-size:16px; color:#111; font-weight:bold; padding:0 0 .3em .3em;}
            > table {
                button {
                    margin:-3px 0;
                    &.on {font-weight:bold; text-decoration:underline; color:#000; border-color:#999;}
                }
            }
        }

 

 

 

 

 

 

 

# 설명

 

빨간색

- pc용 달력부분을 mobile에서도 동일하게 출력되도록 소스를 추가하였습니다.

 

파란색

- 가로 스크롤 부분을 추가하였습니다.

 

 

!! 달력부분만 스크롤 되게 하려면 추가적인 페이지 수정이 필요해서,

   간단히 수정가능한 형태로 작업되었습니다.