Improving search overlay.

js-src/index.js

@@ -32,8 +32,39 @@ window.onload = () => {
     if (window !== undefined && window.Android !== undefined) {
         executeAndroidExclusiveCode(Android)
     }
+    addListenersSearch()
 };
 
+function addListenersSearch() {
+    const searchMobile = document.querySelector('nav.mobile-shortcuts div.search')
+    if (searchMobile !== null) {
+        searchMobile.addEventListener('click', onFakeSearchClick);
+    }
+    const exitSearch = document.querySelector('a.exit-search')
+    if (exitSearch !== null) {
+        exitSearch.addEventListener('click', () => {
+            const searchOverlay = document.querySelector('div.search-overlay');
+            if (searchOverlay !== null) {
+                searchOverlay.classList.toggle('active');
+            }
+        });
+    }
+}
+
+function onFakeSearchClick(e) {
+    e.preventDefault();
+    const searchOverlay = document.querySelector('div.search-overlay');
+    if (searchOverlay === null) {
+        return
+    }
+    searchOverlay.classList.toggle('active');
+    const search = searchOverlay.querySelector('div.search input');
+    if (search !== null) {
+        search.focus()
+    }
+    return false;
+}
+
 function absoluteToHost(imageUrl) {
     if (imageUrl.match(/^\//)) {
         imageUrl = window.location.protocol + "//" + window.location.host + imageUrl 

public/css/styles.css

@@ -8,12 +8,41 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
-  body div.search {
+  body div.search-overlay {
+    display: none;
+    position: fixed;
+    height: 100%;
+    width: 100%;
     background: white;
+    z-index: 3;
+    top: 0; }
+    body div.search-overlay.active {
+      display: flex; }
+    body div.search-overlay div.bounding-search-bar {
+      margin: 7px;
+      width: calc(100% - 20px);
+      border-radius: 10px;
+      height: 60px;
+      display: flex; }
+      body div.search-overlay div.bounding-search-bar div.search {
+        width: calc(100% - 60px);
+        height: 60px;
+        margin-left: 0px;
+        margin-right: 0px; }
+      body div.search-overlay div.bounding-search-bar a.exit-search {
+        width: 60px;
+        background: whitesmoke;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center; }
+        body div.search-overlay div.bounding-search-bar a.exit-search img {
+          width: 60%; }
+  body div.search {
+    background: whitesmoke;
     margin-left: 10px;
-    margin-right: 10px; }
+    margin-right: 10px;
-    body div.search:focus, body div.search:hover {
+    display: flex; }
-      background: aliceblue; }
     body div.search div.search-icon {
       height: calc(100% - 28px);
       display: flex;
@@ -26,6 +55,17 @@ body {
       aspect-ratio: 1/1; }
       body div.search div.search-icon img {
         height: 80%; }
+    body div.search div.fake-text-box {
+      width: calc(100% - 60px);
+      display: flex;
+      align-items: center; }
+      body div.search div.fake-text-box input[type="text"] {
+        font-size: 30px;
+        width: 100%;
+        height: 70%;
+        background: none;
+        border: none;
+        outline: none; }
   body p, body h1, body h2, body h3, body h4, body a {
     font-family: 'arial'; }
   body *.android {

public/css/styles.scss

@@ -14,13 +14,47 @@ html {
 }
 
 body {
-  div.search {
+  div.search-overlay {
+    display: none;
+    position: fixed;
+    height: 100%;
+    width: 100%;
     background: white;
+    z-index: 3;
+    top: 0;
+    &.active {
+        display: flex;
+    }
+    div.bounding-search-bar {
+        margin: 7px;
+        width: calc(100% - 20px);
+        border-radius: 10px;
+        height: 60px;
+        display: flex;
+        div.search {
+            width: calc(100% - 60px);
+            height: 60px;
+            margin-left: 0px;
+            margin-right: 0px;
+        }
+        a.exit-search {
+            width: 60px;
+            background: whitesmoke;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            img {
+                width: 60%;
+            }
+        }
+    }
+  }
+  div.search {
+    background: whitesmoke;
     margin-left: 10px;
     margin-right: 10px;
-    &:focus,&:hover {
+    display: flex;
-        background: aliceblue;
-    }
     div.search-icon {
         height: calc(100% - 28px);
         display: flex;
@@ -35,6 +69,19 @@ body {
             height: 80%;
         }
     }
+    div.fake-text-box {
+        width: calc(100% - 60px);
+        display: flex;
+        align-items: center;
+        input[type="text"] {
+            font-size: 30px;
+            width: 100%;
+            height: 70%;
+            background: none;
+            border: none;
+            outline: none;
+        }
+    }
   }
   p, h1, h2, h3, h4, a {
     font-family: 'arial';

public/img/exit.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="exit.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="6.5166667"
+     inkscape:cx="60.076726"
+     inkscape:cy="60"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#000000;stroke:#000000;stroke-width:0.365475;stroke-opacity:0.989184"
+       id="rect234"
+       width="26.27632"
+       height="142.78291"
+       x="71.853844"
+       y="-77.380577"
+       transform="matrix(0.65549852,0.75519645,-0.71621928,0.6978753,0,0)" />
+    <rect
+       style="fill:#000000;stroke:#000000;stroke-width:0.370414;stroke-opacity:0.989184"
+       id="rect236"
+       width="26.524057"
+       height="142.45619"
+       x="-13.756671"
+       y="13.608283"
+       transform="matrix(0.68479212,-0.72873847,0.71121577,0.70297378,0,0)" />
+  </g>
+</svg>

templates/layouts/default.html.ep

@@ -32,6 +32,14 @@
   <body>
     <div class="site-wrapper">
     </div>
+    <div class="search-overlay">
+        <div class="bounding-search-bar">
+%= include 'page/_search_bar'
+            <a class="exit-search">
+                <img alt="Exit search" src="/img/exit.svg"/>
+            </a>
+        </div>
+    </div>
     <div class="complete-container">
 %= include 'page/_mobile_menu', categories => $categories
         <div class="page-contents">

templates/page/_mobile_menu.html.ep

@@ -1,13 +1,7 @@
 % my $categories = stash 'categories';
 <nav class="mobile-shortcuts">
     <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
-    <div tabindex="0" class="search">
+%= include 'page/_search_bar'
-        <div class="search-icon">
-            <img alt="" src="/img/search.svg"/>
-        </div>
-        <div class="fake-text-box">
-        </div>
-    </div>
     <a href="#mobile-foldable" class="menu-expand">
         <img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
         <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>

templates/page/_search_bar.html.ep

@@ -0,0 +1,8 @@
+<div tabindex="0" class="search">
+    <div class="search-icon">
+        <img alt="" src="/img/search.svg"/>
+    </div>
+    <div class="fake-text-box">
+        <input type="text"></input>
+    </div>
+</div>