Improving search overlay.
This commit is contained in:
parent
e41ce1102b
commit
976558e3f0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
body div.search:focus, body div.search:hover {
|
||||
background: aliceblue; }
|
||||
margin-right: 10px;
|
||||
display: flex; }
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
background: aliceblue;
|
||||
}
|
||||
display: flex;
|
||||
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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -30,8 +30,16 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-wrapper">
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<div class="search-icon">
|
||||
<img alt="" src="/img/search.svg"/>
|
||||
</div>
|
||||
<div class="fake-text-box">
|
||||
</div>
|
||||
</div>
|
||||
%= include 'page/_search_bar'
|
||||
<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ú."/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue