sergiotarxz
/
burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixing search bugs.

This commit is contained in:
Sergiotarxz 2023-09-10 17:11:07 +02:00
parent ea5cae3323
commit 1a8886cfb2
5 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js-src/index.js
View File

@ -62,9 +62,19 @@ function fillFarmaciaGuardia() {
function addListenersSearch() {
if (searchMobile !== null) {
const searchIcon = searchMobile.querySelector('div.search-icon')
searchIcon.addEventListener('click', onFakeSearchClick);
console.log('hola')
const searchIcon = searchMobile.querySelector('a.search-icon')
searchIcon.addEventListener('click', (e) => {
const searchOverlay = document.querySelector('div.search-overlay');
const searchInput = searchOverlay.querySelector('div.search input');
searchInput.value = fakeSearchInput.value;
onSearchChange(e)
onFakeSearchClick(e)
return true;
})
fakeSearchInput.addEventListener('keydown', (e) => {
console.log(e.code)
if (e.code !== 'Enter') {
return false;
}
@ -76,8 +86,8 @@ function addListenersSearch() {
return true;
});
}
const nextResult = searchMobile.querySelector('div.down');
const prevResult = searchMobile.querySelector('div.up');
const nextResult = searchMobile.querySelector('a.down');
const prevResult = searchMobile.querySelector('a.up');
if (nextResult !== null && prevResult !== null) {
nextResult.addEventListener('click', () => {
searchInWebsite(fakeSearchInput.value, true);
@ -109,6 +119,7 @@ function searchInWebsite(value, isToBottom) {
const anchorNode = selection.anchorNode.parentNode
if (anchorNode !== null) {
anchorNode.scrollIntoView()
anchorNode.focus()
}
}

10
public/css/styles.css
View File

@ -40,7 +40,7 @@ body {
height: 60px;
margin-left: 0px;
margin-right: 0px; }
body div.search-overlay div.bounding-search-bar div.up, body div.search-overlay div.bounding-search-bar div.down {
body div.search-overlay div.bounding-search-bar a.up, body div.search-overlay div.bounding-search-bar a.down {
display: none; }
body div.search-overlay div.bounding-search-bar a.exit-search {
width: 60px;
@ -56,18 +56,18 @@ body {
margin-left: 10px;
margin-right: 10px;
display: flex; }
body div.search div.search-icon, body div.search div.down, body div.search div.up {
align-self: center;
body div.search a.search-icon, body div.search a.down, body div.search a.up {
height: calc(100% - 24px);
align-self: center;
margin: 3px;
display: flex;
background: aliceblue;
align-items: center;
padding: 10px;
padding: 9px;
border-radius: 10px;
border: solid gray 1px;
aspect-ratio: 1/1; }
body div.search div.search-icon img, body div.search div.down img, body div.search div.up img {
body div.search a.search-icon img, body div.search a.down img, body div.search a.up img {
height: 80%; }
body div.search div.fake-text-box {
width: calc(100% - 60px);

8
public/css/styles.scss
View File

@ -54,7 +54,7 @@ body {
margin-left: 0px;
margin-right: 0px;
}
div.up,div.down {
a.up,a.down {
display: none;
}
a.exit-search {
@ -75,14 +75,14 @@ body {
margin-left: 10px;
margin-right: 10px;
display: flex;
div.search-icon,div.down,div.up {
align-self: center;
a.search-icon,a.down,a.up {
height: calc(100% - 24px);
align-self: center;
margin: 3px;
display: flex;
background: aliceblue;
align-items: center;
padding: 10px;
padding: 9px;
border-radius: 10px;
border: solid gray 1px;
aspect-ratio: 1/1;

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

12
templates/page/_search_bar.html.ep
View File

@ -1,14 +1,14 @@
<div class="search">
<div tabindex="-1" class="search-icon">
<a href="#" class="search-icon">
<img alt="Buscar" src="/img/search.svg"/>
</div>
</a>
<div class="fake-text-box">
<input type="text"></input>
</div>
<div class="down">
<a href="#" class="down">
<img alt="Siguiente resultado." src="/img/down.svg"/>
</div>
<div class="up">
</a>
<a href="#" class="up">
<img alt="Anterior resultado" src="/img/up.svg"/>
</div>
</a>
</div>