mirror of
https://github.com/LBRYFoundation/lbry.com.git
synced 2025-08-23 17:47:26 +00:00
Fake search done
This commit is contained in:
netop://ウエハ
parent
58699af8ea
commit
d121d95ffe
4 changed files with 109 additions and 1 deletions
|
|
@ -190,9 +190,50 @@
|
||||||
</drawer-section>
|
</drawer-section>
|
||||||
</drawer-navigation>
|
</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>
|
<a href="#" class="header__toggle" id="menuToggle">Menu</a>
|
||||||
|
|
||||||
<?php js_start() ?>
|
<?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 => {
|
document.getElementById("menuToggle").addEventListener("click", event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
|
|
||||||
1
web/img/cancel.svg
Normal file
1
web/img/cancel.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 450 B |
1
web/img/search.svg
Normal file
1
web/img/search.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 401 B |
|
|
@ -44,7 +44,7 @@
|
||||||
@media (min-width: 951px) {
|
@media (min-width: 951px) {
|
||||||
background-position: 3rem center;
|
background-position: 3rem center;
|
||||||
margin-right: 2.5rem;
|
margin-right: 2.5rem;
|
||||||
width: 8rem;
|
width: 13rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 950px) {
|
@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 {
|
drawer-children {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue