Make search box it's own componet, update scripts
This commit is contained in:
parent
9da485dee0
commit
e4035a3089
2 changed files with 73 additions and 35 deletions
|
@ -2,24 +2,41 @@
|
|||
// Properties
|
||||
const {Query, QueryText} = Astro.props
|
||||
|
||||
// Components
|
||||
import SearchBox from "./SearchBox.astro";
|
||||
|
||||
// Icons
|
||||
import { HalfMoon, Menu } from "@iconoir/vue";
|
||||
import { HalfMoon, Menu, SunLight } from "@iconoir/vue";
|
||||
---
|
||||
|
||||
<header>
|
||||
<div class="header-start">
|
||||
<a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a>
|
||||
<form class="search-box" onsubmit="return Search()">
|
||||
<input type="search" value={QueryText} placeholder="Search" />
|
||||
</form>
|
||||
<SearchBox/>
|
||||
</div>
|
||||
<div class="header-end">
|
||||
<button>English</button>
|
||||
<button title="Toggle Theme" class="button-icon"><HalfMoon /></button>
|
||||
<button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon">
|
||||
<SunLight class:list={'theme-light'}/>
|
||||
<HalfMoon class:list={'theme-dark'}/>
|
||||
</button>
|
||||
<button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<script is:inline>
|
||||
function ThemeToggle() {
|
||||
if (document.body.getAttribute('class') === 'dark') {
|
||||
document.body.setAttribute('class', 'light')
|
||||
document.cookie = "Theme=Light";
|
||||
} else if (document.body.getAttribute('class') === 'light') {
|
||||
document.body.setAttribute('class', 'dark')
|
||||
document.cookie = "Theme=Dark";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
padding: 16px 0px;
|
||||
|
@ -39,9 +56,10 @@ header {
|
|||
border-radius: 3rem;
|
||||
border: 1px white solid;
|
||||
padding: 0px 12px;
|
||||
background: white;
|
||||
background: var(--box-background);
|
||||
border: 1px rgb(192, 192, 192) solid;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
}
|
||||
.button-icon {
|
||||
aspect-ratio: 1;
|
||||
|
@ -52,35 +70,12 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
.search-box {
|
||||
background: white;
|
||||
border: 1px rgb(192, 192, 192) solid;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 16px 8px;
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
width: 300px;
|
||||
input {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Search Scripts -->
|
||||
<!-- From https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/master/source/src/components/Search.astro#L18-L94 as of writing -->
|
||||
<script is:inline>
|
||||
<script>
|
||||
/*
|
||||
@licstart The following is the entire license notice for the
|
||||
JavaScript code in this page.
|
||||
|
@ -111,9 +106,13 @@ function FocusSearch() {
|
|||
document.querySelector('input[type="search"]').focus();
|
||||
}
|
||||
|
||||
// The "Search()" function does not work for Zarro, an API request
|
||||
// will be made to an endpoint instead with a redirect parameter.
|
||||
// Learn More: https://docs.astro.build/en/guides/endpoints/#redirects
|
||||
|
||||
// Trigger Search
|
||||
function Search() {
|
||||
var SearchQuery = document.querySelector('form > input[type="search"]').value;
|
||||
location.href = `/web?=${SearchQuery}`;
|
||||
}
|
||||
// function Search() {
|
||||
// var SearchQuery = document.querySelector('form > input[type="search"]').value;
|
||||
// location.href = `/web?=${SearchQuery}`;
|
||||
// }
|
||||
</script>
|
39
source/src/components/global/SearchBox.astro
Normal file
39
source/src/components/global/SearchBox.astro
Normal file
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
// Properties
|
||||
const {Query, QueryText} = Astro.props
|
||||
---
|
||||
|
||||
<form class="search-box" action="/api/search/web" method="post">
|
||||
<input name="websearch" value={QueryText} placeholder="Search"/>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
.search-box {
|
||||
background: var(--box-background);
|
||||
border: 1px rgb(192, 192, 192) solid;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 16px 8px;
|
||||
position: relative;
|
||||
max-width: 500px;
|
||||
width: 300px;
|
||||
input {
|
||||
color: var(--text);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: calc(100% - 24px);
|
||||
height: 28px;
|
||||
border-radius: 3rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0px 12px;
|
||||
border: 1px transparent solid;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in a new issue