Skip to content

vridge-docs
vridge-docs
Commit 62e29b90 authored by 전성희's avatar 전성희
Browse files
Options

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

parent fa102c17
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 68 deletions
docs-front/layouts/default.vue
View file @ 62e29b90
...@@ -93,45 +93,44 @@ ...@@ -93,45 +93,44 @@
clipped-left clipped-left
> >
<v-row no-gutters align="center"> <v-row no-gutters align="center">
<span style="cursor:pointer;" class="pa-2"> <span style="cursor:pointer;" class="pa-2">
<img @click="$router.push('/')" src="/logo_v2/01.png" cover height="28"/> <img @click="$router.push('/')" src="/logo_v2/01.png" cover height="28"/>
</span> </span>
<v-spacer/> <v-spacer/>
<v-text-field <div class="search-container" v-show="showSearch">
v-show="showSearch" <v-text-field
v-model="keyword" v-model="keyword"
:maxlength="50" :maxlength="50"
solo solo
dense dense
single-line single-line
rounded rounded
class="ma-2 search-input" class="ma-2 search-input"
hide-details hide-details
label="검색" 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">
<div v-show="showSearch" class="search-result"> <v-list-item
<v-list v-if="searchedList.length > 0"> v-for="(item, index) in searchedList"
<v-list-item :key="index"
v-for="(item, index) in searchedList" @click="openGuide(item), showSearch = false"
:key="index" class="pt-2"
@click="openGuide(item)" dense
class="pt-2" >
dense <span class="path">{{item.path.substring(0, item.path.length-1)}}</span>
> <span v-html="paintColor(item.title)"></span>
<span class="path">{{item.path.substring(0, item.path.length-1)}}</span> </v-list-item>
<span v-html="paintColor(item.title)"></span> </v-list>
</v-list-item> <span v-else>Search Result</span>
</v-list> </div>
<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-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" /> <v-app-bar-nav-icon class="mobile-show" v-if="!drawer" @click.stop="drawer = !drawer" />
...@@ -463,11 +462,12 @@ export default{ ...@@ -463,11 +462,12 @@ export default{
return this.$store.state.guideNavigator return this.$store.state.guideNavigator
}, },
clickOutsideEvent(e){ clickOutsideEvent(e){
const searchContainer = document.querySelector('.search-container')
const searchInput = document.querySelector('.search-input') const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result') const searchResult = document.querySelector('.search-result')
const searchBtn = document.querySelector('.header-icon') 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) item.contains(e.target)
) )
...@@ -502,10 +502,12 @@ export default{ ...@@ -502,10 +502,12 @@ export default{
showSearch(val){ showSearch(val){
if(val){ if(val){
this.$nextTick(()=>{ this.$nextTick(()=>{
document.getElementsByTagName('html')[0].classList.add('search-on')
document.querySelector('.search-input input').focus() document.querySelector('.search-input input').focus()
window.addEventListener('click', this.clickOutsideEvent); window.addEventListener('click', this.clickOutsideEvent);
}) })
} else { } else {
document.getElementsByTagName('html')[0].classList.remove('search-on')
window.removeEventListener('click', this.clickOutsideEvent); window.removeEventListener('click', this.clickOutsideEvent);
} }
} }
...@@ -514,49 +516,96 @@ export default{ ...@@ -514,49 +516,96 @@ export default{
</script> </script>
<style lang="scss"> <style lang="scss">
.search-input { html.search-on {
border:1px solid #eee; @media screen and (max-width: 600px) {
border-radius: 28px 28px 0 0; overflow: hidden !important;
max-width:240px;
.topBtn {
display: none;
}
}
} }
.search-result { .search-container {
width: 240px; .search-input {
height: 300px; border:1px solid #eee;
padding: 10px; border-radius: 28px 28px 0 0;
background-color: white; max-width:240px;
z-index: 9; }
position: absolute;
right: 48px;
top: 52px;
border: 1px solid rgb(238, 238, 238);
border-top: none;
border-radius: 0 0 28px 28px;
overflow: auto;
.v-list { .search-result {
.path { width: 240px;
position: absolute; height: 300px;
top: 4px; padding: 10px;
font-size: 0.8rem; background-color: white;
width: 90%; z-index: 9;
overflow: hidden; position: absolute;
text-overflow: ellipsis; top: 48px;
right: 96px;
border: 1px solid rgb(238, 238, 238);
border-top: none;
border-radius: 0 0 28px 28px;
overflow: auto;
.v-list {
.path {
position: absolute;
top: 4px;
font-size: 0.8rem;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
}
> span {
display: inline-block;
text-align: center;
width: 100%;
line-height: 250px;
opacity: 0.75;
} }
} }
> span {
display: inline-block; @media screen and (min-width: 1264px) {
text-align: center; .search-result {
width: 100%; right: 48px;
line-height: 250px; }
opacity: 0.75;
} }
}
@media screen and (max-width: 1263px) { @media screen and (min-width: 960px) {
.search-result { .search-result {
right: 96px; 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> </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