Improving search.

js-src/index.js

@@ -83,7 +83,6 @@ function addListenersSearch() {
             searchInWebsite(fakeSearchInput.value, true);
         });
         prevResult.addEventListener('click', () => {
-            console.log('hola')
             searchInWebsite(fakeSearchInput.value, false);
         });
     }
@@ -105,7 +104,12 @@ function addListenersSearch() {
 }
 
 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() {

public/css/styles.css

@@ -57,20 +57,18 @@ body {
     margin-right: 10px;
     display: flex; }
     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;
       background: aliceblue;
       align-items: center;
-      margin: 7px;
-      padding: 7px;
+      padding: 10px;
       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 {
         height: 80%; }
-    body div.search div.down, body div.search div.up {
-      margin: 0px;
-      align-self: center; }
     body div.search div.fake-text-box {
       width: calc(100% - 60px);
       display: flex;

public/css/styles.scss

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

templates/page/_search_bar.html.ep

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