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

Improving search.

Browse Source
This commit is contained in:
Sergiotarxz 2023-09-10 16:56:20 +02:00
parent 83b21aca39
commit ea5cae3323
5 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js-src/index.js
View File

@ -83,7 +83,6 @@ function addListenersSearch() {
searchInWebsite(fakeSearchInput.value, true); searchInWebsite(fakeSearchInput.value, true);
}); });
prevResult.addEventListener('click', () => { prevResult.addEventListener('click', () => {
console.log('hola')
searchInWebsite(fakeSearchInput.value, false); searchInWebsite(fakeSearchInput.value, false);
}); });
} }
@ -105,7 +104,12 @@ function addListenersSearch() {
} }
function searchInWebsite(value, isToBottom) { function searchInWebsite(value, isToBottom) {
window.find(value, false, !isToBottom, true); window.find(value, false, !isToBottom, true)
const selection = window.getSelection()
const anchorNode = selection.anchorNode.parentNode
if (anchorNode !== null) {
anchorNode.scrollIntoView()
}
} }
function _port() { function _port() {

10
public/css/styles.css
View File

@ -57,20 +57,18 @@ body {
margin-right: 10px; margin-right: 10px;
display: flex; } display: flex; }
body div.search div.search-icon, body div.search div.down, body div.search div.up { body div.search div.search-icon, body div.search div.down, body div.search div.up {
height: calc(100% - 28px); align-self: center;
height: calc(100% - 24px);
margin: 3px;
display: flex; display: flex;
background: aliceblue; background: aliceblue;
align-items: center; align-items: center;
margin: 7px; padding: 10px;
padding: 7px;
border-radius: 10px; border-radius: 10px;
border: solid gray 1px; border: solid gray 1px;
aspect-ratio: 1/1; } 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 div.search-icon img, body div.search div.down img, body div.search div.up img {
height: 80%; } height: 80%; }
body div.search div.down, body div.search div.up {
margin: 0px;
align-self: center; }
body div.search div.fake-text-box { body div.search div.fake-text-box {
width: calc(100% - 60px); width: calc(100% - 60px);
display: flex; display: flex;

11
public/css/styles.scss
View File

@ -76,12 +76,13 @@ body {
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
div.search-icon,div.down,div.up { div.search-icon,div.down,div.up {
height: calc(100% - 28px); align-self: center;
height: calc(100% - 24px);
margin: 3px;
display: flex; display: flex;
background: aliceblue; background: aliceblue;
align-items: center; align-items: center;
margin: 7px; padding: 10px;
padding: 7px;
border-radius: 10px; border-radius: 10px;
border: solid gray 1px; border: solid gray 1px;
aspect-ratio: 1/1; aspect-ratio: 1/1;
@ -89,10 +90,6 @@ body {
height: 80%; height: 80%;
} }
} }
div.down,div.up {
margin: 0px;
align-self: center;
}
div.fake-text-box { div.fake-text-box {
width: calc(100% - 60px); width: calc(100% - 60px);
display: flex; display: flex;

2
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

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

@ -5,10 +5,10 @@
<div class="fake-text-box"> <div class="fake-text-box">
<input type="text"></input> <input type="text"></input>
</div> </div>
<div tabindex="-1" class="down"> <div class="down">
<img alt="Siguiente resultado." src="/img/down.svg"/> <img alt="Siguiente resultado." src="/img/down.svg"/>
</div> </div>
<div tabindex="-1" class="up"> <div class="up">
<img alt="Anterior resultado" src="/img/up.svg"/> <img alt="Anterior resultado" src="/img/up.svg"/>
</div> </div>
</div> </div>