Adding better search.
This commit is contained in:
parent
0c992f27b5
commit
8e415d8d36
|
|
@ -61,8 +61,8 @@ function fillFarmaciaGuardia() {
|
|||
}
|
||||
|
||||
function addListenersSearch() {
|
||||
const searchInPage = document.querySelector('div.search-in-page')
|
||||
if (searchMobile !== null) {
|
||||
console.log('hola')
|
||||
const searchIcon = searchMobile.querySelector('a.search-icon')
|
||||
searchIcon.addEventListener('click', (e) => {
|
||||
const searchOverlay = document.querySelector('div.search-overlay');
|
||||
|
|
@ -74,6 +74,14 @@ function addListenersSearch() {
|
|||
|
||||
})
|
||||
fakeSearchInput.addEventListener('keyup', (e) => {
|
||||
if (searchInPage === null) {
|
||||
return;
|
||||
}
|
||||
if (fakeSearchInput.value === "") {
|
||||
searchInPage.classList.remove('active')
|
||||
} else {
|
||||
searchInPage.classList.add('active')
|
||||
}
|
||||
if (e.keyCode !== 13) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -85,9 +93,10 @@ function addListenersSearch() {
|
|||
return true;
|
||||
});
|
||||
}
|
||||
const nextResult = searchMobile.querySelector('a.down');
|
||||
const prevResult = searchMobile.querySelector('a.up');
|
||||
const nextResult = searchInPage.querySelector('a.down');
|
||||
const prevResult = searchInPage.querySelector('a.up');
|
||||
if (nextResult !== null && prevResult !== null) {
|
||||
console.log('hola')
|
||||
nextResult.addEventListener('click', () => {
|
||||
searchInWebsite(fakeSearchInput.value, true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -56,19 +56,21 @@ body {
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex; }
|
||||
body div.search a.search-icon, body div.search a.down, body div.search a.up {
|
||||
height: calc(100% - 24px);
|
||||
body div.search a.search-icon {
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 3px;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 9px;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1; }
|
||||
body div.search a.search-icon img, body div.search a.down img, body div.search a.up img {
|
||||
height: 80%; }
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto; }
|
||||
body div.search a.search-icon img {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1; }
|
||||
body div.search div.fake-text-box {
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
|
|
@ -204,6 +206,36 @@ body {
|
|||
body nav > a:hover > img.index-image-menu,
|
||||
body div.burguillos-logo-container.active > img {
|
||||
transform: rotate(-1.5707963268rad); }
|
||||
body div.search-in-page {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: blueviolet;
|
||||
z-index: 3; }
|
||||
body div.search-in-page a.up, body div.search-in-page a.down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1; }
|
||||
body div.search-in-page a.up img, body div.search-in-page a.down img {
|
||||
height: 80%; }
|
||||
body div.search-in-page span {
|
||||
color: whitesmoke;
|
||||
font-size: 25px; }
|
||||
body div.search-in-page.active {
|
||||
display: flex; }
|
||||
body nav.mobile-shortcuts {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -75,19 +75,21 @@ body {
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
a.search-icon,a.down,a.up {
|
||||
height: calc(100% - 24px);
|
||||
a.search-icon {
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 3px;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 9px;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
img {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
}
|
||||
div.fake-text-box {
|
||||
|
|
@ -301,7 +303,42 @@ body {
|
|||
div.burguillos-logo-container.active > img {
|
||||
transform: rotate(-1.5707963268rad);
|
||||
}
|
||||
div.search-in-page {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
background: $background_div;
|
||||
z-index: 3;
|
||||
a.up, a.down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
margin: 7px;
|
||||
display: flex;
|
||||
background: aliceblue;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1;
|
||||
img {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
span {
|
||||
color: whitesmoke;
|
||||
font-size: 25px;
|
||||
}
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
nav.mobile-shortcuts {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -44,6 +44,14 @@
|
|||
</div>
|
||||
<div class="complete-container">
|
||||
%= include 'page/_mobile_menu', categories => $categories
|
||||
<div class="search-in-page">
|
||||
<a href="#" class="down">
|
||||
<img alt="Next result" src="/img/down.svg"/>
|
||||
</a>
|
||||
<a href="#" class="up">
|
||||
<img alt="Previous result" src="/img/up.svg"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="page-contents">
|
||||
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
|
|
|
|||
Loading…
Reference in New Issue