LBRYFoundation/lbry.com
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry.com.git synced 2025-08-23 09:37:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fake search done

Browse source
This commit is contained in:
netop://ウエハ 2019-07-30 12:29:58 -05:00
parent 58699af8ea
commit d121d95ffe
4 changed files with 109 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
view/template/nav/_header.php
View file

@ -190,9 +190,50 @@
</drawer-section>
</drawer-navigation>
<search-container>
<a
class="header__search-toggle"
href="#"
id="searchToggle"
>Search</a>
<input
id="searchInput"
placeholder="Search LBRY"
type="search"
/>
</search-container>
<a href="#" class="header__toggle" id="menuToggle">Menu</a>
<?php js_start() ?>
document.getElementById("searchToggle").addEventListener("click", event => {
event.preventDefault();
document.querySelector("search-container").classList.toggle("active");
if (document.querySelector("drawer-navigation").style.display === "none") {
document.querySelector("drawer-navigation").style.display = "inline-flex";
document.getElementById("searchInput").value = "";
} else {
document.querySelector("drawer-navigation").style.display = "none";
document.getElementById("searchInput").focus();
}
});
document.getElementById("searchInput").value = "";
document.getElementById("searchInput").addEventListener("keyup", event => {
const key = event.keyCode ? event.keyCode : event.which;
const self = document.getElementById("searchInput");
if (key === 13)
location.href = `https://duckduckgo.com/?q=${self.value} site:lbry.com`;
if (key === 27)
document.getElementById("searchToggle").click();
});
document.getElementById("menuToggle").addEventListener("click", event => {
event.preventDefault();

1
web/img/cancel.svg Normal file
View file

@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m13.414 12 5.293-5.293c.391-.391.391-1.023 0-1.414s-1.023-.391-1.414 0l-5.293 5.293-5.293-5.293c-.391-.391-1.023-.391-1.414 0s-.391 1.023 0 1.414l5.293 5.293-5.293 5.293c-.391.391-.391 1.023 0 1.414.195.195.451.293.707.293s.512-.098.707-.293l5.293-5.293 5.293 5.293c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 450 B

1
web/img/search.svg Normal file
View file

@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m22.707 21.293-5.682-5.682c1.233-1.54 1.975-3.489 1.975-5.611 0-4.962-4.038-9-9-9s-9 4.038-9 9 4.038 9 9 9c2.122 0 4.071-.742 5.611-1.975l5.682 5.682c.195.195.451.293.707.293s.512-.098.707-.293c.391-.391.391-1.023 0-1.414zm-12.707-4.293c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 401 B

67
web/scss/components/_header.scss
View file

@ -44,7 +44,7 @@
@media (min-width: 951px) {
background-position: 3rem center;
margin-right: 2.5rem;
width: 8rem;
width: 13rem;
}
@media (max-width: 950px) {
@ -85,6 +85,71 @@
}
}
search-container {
display: inline-flex;
height: 5rem;
&:not(.active) {
.header__search-toggle {
background-image: url("../img/search.svg");
width: 2rem;
}
input {
display: none;
}
}
&.active {
padding-right: 2rem;
width: 100%;
.header__search-toggle {
background-color: rgba($lbry-gray-1, 0.7);
background-image: url("../img/cancel.svg");
width: 2.15rem;
}
}
@media (max-width: 950px) {
display: none;
}
input {
margin-top: 1.25rem;
padding-right: 1rem;
padding-left: 1rem;
transition: border-color 0.2s;
width: 100%;
&:not(:focus) {
border-color: var(--lbry-gray-1);
}
&:focus {
border-color: var(--lbry-teal-3);
}
}
}
.header__search-toggle {
@include hide-text;
background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
border-radius: 50%;
display: block;
height: 2rem;
margin-top: 1.5rem;
margin-right: 1rem;
transition: background-color 0.2s;
&:hover {
background-color: rgba($lbry-gray-1, 0.7);
}
}
drawer-children {