Commit 62e29b90 authored by 전성희's avatar 전성희

[STYLE] 검색 섹션 반응형 적용

parent fa102c17
......@@ -93,16 +93,14 @@
clipped-left
>
<v-row no-gutters align="center">
<span style="cursor:pointer;" class="pa-2">
<img @click="$router.push('/')" src="/logo_v2/01.png" cover height="28"/>
</span>
<v-spacer/>
<div class="search-container" v-show="showSearch">
<v-text-field
v-show="showSearch"
v-model="keyword"
:maxlength="50"
solo
......@@ -114,14 +112,12 @@
label="검색"
/>
<v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
<div v-show="showSearch" class="search-result">
<v-list v-if="searchedList.length > 0">
<v-list-item
v-for="(item, index) in searchedList"
:key="index"
@click="openGuide(item)"
@click="openGuide(item), showSearch = false"
class="pt-2"
dense
>
......@@ -131,6 +127,9 @@
</v-list>
<span v-else>Search Result</span>
</div>
</div>
<v-icon @click="showSearch = !showSearch" class="header-icon">{{showSearch ? 'mdi-close' : 'mdi-magnify'}}</v-icon>
<!-- <v-btn @click="$store.state.editMode = !$store.state.editMode" elevation="0">편집</v-btn> -->
<v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
......@@ -463,11 +462,12 @@ export default{
return this.$store.state.guideNavigator
},
clickOutsideEvent(e){
const searchContainer = document.querySelector('.search-container')
const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result')
const searchBtn = document.querySelector('.header-icon')
const isClickInside = [searchInput, searchResult, searchBtn].some(item =>
const isClickInside = [searchContainer, searchInput, searchResult, searchBtn].some(item =>
item.contains(e.target)
)
......@@ -502,10 +502,12 @@ export default{
showSearch(val){
if(val){
this.$nextTick(()=>{
document.getElementsByTagName('html')[0].classList.add('search-on')
document.querySelector('.search-input input').focus()
window.addEventListener('click', this.clickOutsideEvent);
})
} else {
document.getElementsByTagName('html')[0].classList.remove('search-on')
window.removeEventListener('click', this.clickOutsideEvent);
}
}
......@@ -514,21 +516,32 @@ export default{
</script>
<style lang="scss">
.search-input {
html.search-on {
@media screen and (max-width: 600px) {
overflow: hidden !important;
.topBtn {
display: none;
}
}
}
.search-container {
.search-input {
border:1px solid #eee;
border-radius: 28px 28px 0 0;
max-width:240px;
}
}
.search-result {
.search-result {
width: 240px;
height: 300px;
padding: 10px;
background-color: white;
z-index: 9;
position: absolute;
right: 48px;
top: 52px;
top: 48px;
right: 96px;
border: 1px solid rgb(238, 238, 238);
border-top: none;
border-radius: 0 0 28px 28px;
......@@ -552,11 +565,47 @@ export default{
line-height: 250px;
opacity: 0.75;
}
}
}
@media screen and (max-width: 1263px) {
@media screen and (min-width: 1264px) {
.search-result {
right: 96px;
right: 48px;
}
}
@media screen and (min-width: 960px) {
.search-result {
top: 52px;
}
}
@media screen and (max-width: 600px) {
position: absolute;
top: 54px;
left: 0;
background: white;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
z-index: 9;
.search-input {
height: 40px;
max-height: 40px;
margin-top: 20% !important;
border-radius: 28px;
}
.search-result {
position: static;
border: none;
width: 300px;
margin-top: 20px;
height: 400px;
}
}
}
</style>
\ No newline at end of file
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