Commit d9892858 authored by shj's avatar shj

[ADD] 가이드 페이지네이션 개선, 반응형 적용

parent 465eea8a
......@@ -9,22 +9,19 @@
font-weight: 400;
}
.guide-wrap-container{
height: 100%;
padding-right: 240px;
}
.guide-wrap {
min-height: 90vh !important;
height: 100%;
max-width: 1280px !important;
margin:0 auto;
margin-top:36px;
margin-bottom: 36px;
padding : 36px;
background-color: #fff !important;
position: relative;
.guide-wrap-header{
position: absolute;
top:0;
left:0;
width:100%;
min-height:120px;
padding:36px;
......@@ -46,7 +43,8 @@
}
.guide-content{
margin-top:130px;
margin-top: 30px;
margin-bottom: 60px;
width:100% !important;
h2{
......@@ -56,16 +54,16 @@
padding-bottom:12px;
margin-top:48px;
margin-bottom:24px;
&:nth-child(1) {
margin-top: 20px;
}
}
img{
max-width: 100% !important;
display: block;
margin:0 auto !important;
}
> div{
width:100%;
......@@ -78,7 +76,22 @@
}
}
.pagination {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin-bottom: 20px;
hr {
min-width: 100%;
}
button {
width: 45%;
max-width: 300px;
}
}
}
@media screen and (max-width: 1080px){
......
......@@ -45,7 +45,7 @@
</span>
</v-row>
<v-row class="guide-content pb-16" no-gutters>
<v-row class="guide-content pb-4" no-gutters>
<v-skeleton-loader
elevation="0"
class="my-4"
......@@ -78,58 +78,67 @@
</vridge-dialog>
</div> -->
<div v-if="!loading && guide && guide.content" v-html="$md.render(guide.content)" style="padding-bottom:200px;"></div>
<div v-if="!loading && guide && guide.content" v-html="$md.render(guide.content)"></div>
</v-row>
<v-divider class="my-8"/>
<v-row no-gutters align="center">
<v-btn class="primary--text" :ripple="false" height="64" text outlined @click="openGuide(guide.prevGuide)" v-if="guide !== null && guide.prevGuide">
<v-row no-gutters align="center">
<v-col class="mr-8">
<v-row v-if="!loading" no-gutters class="px-6 pagination">
<v-divider class="my-3"/>
<v-btn
v-if="guide !== null"
:disabled="!guide.prevIndex"
class="primary--text"
:style="guide.prevIndex ? '' : 'border: none;'"
:ripple="false"
height="64"
text
outlined
@click="openGuide(guide.prevIndex)"
>
<v-row v-if="guide.prevIndex" no-gutters align="center">
<v-col cols="2" sm="1">
<v-icon left>mdi-chevron-left</v-icon>
</v-col>
<v-col align="end" justify="end">
<span class="grey--text">이전 페이지</span> <br/>
<span style="font-size:1.1rem;font-weight:bold;">
{{guide.prevGuide.title}}
<v-col cols="10" sm="11" align="end">
<span :style="`color: ${$vuetify.breakpoint.xsOnly ? '#1976d2' : 'grey'}`">이전 페이지</span>
<span class="d-none d-sm-flex flex-column" style="font-size:1.1rem; font-weight:bold;">
{{guide.prevIndex.title}}
</span>
</v-col>
</v-row>
<v-row v-else no-gutters align="center">
</v-row>
</v-btn>
<v-skeleton-loader
v-else-if="guide === null"
elevation="0"
type="button"
></v-skeleton-loader>
<v-spacer/>
<v-btn class="primary--text" :ripple="false" height="64" text outlined @click="openGuide(guide.nextGuide)" v-if="guide !== null && guide.nextGuide">
<v-row no-gutters align="center">
<v-col align="start" justify="start">
<span class="grey--text">다음 페이지</span> <br/>
<span style="font-size:1.1rem;font-weight:bold;">
{{ guide.nextGuide.title}}
<v-btn
v-if="guide !== null"
:disabled="!guide.nextIndex"
:style="guide.nextIndex ? '' : 'border: none;'"
class="primary--text"
:ripple="false"
height="64"
text
outlined
@click="openGuide(guide.nextIndex)"
>
<v-row v-if="guide.nextIndex" no-gutters align="center">
<v-col cols="10" sm="11" align="start">
<span :style="`color: ${$vuetify.breakpoint.xsOnly ? '#1976d2' : 'grey'}`">다음 페이지</span>
<span class="d-none d-sm-flex flex-column" style="font-size:1.1rem;font-weight:bold;">
{{ guide.nextIndex.title}}
</span>
</v-col>
<v-col class="ml-8">
<v-col cols="2" sm="1">
<v-icon right>mdi-chevron-right</v-icon>
</v-col>
</v-row>
<v-row v-else no-gutters align="center">
</v-row>
</v-btn>
<v-skeleton-loader
v-else-if="guide === null"
elevation="0"
type="button"
></v-skeleton-loader>
</v-row>
</v-container>
</div>
</template>
<script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment