Korbs/Zarro
Korbs/Zarro
Archived
1
Fork 0
Code Issues Pull requests Activity

Make search box it's own componet, update scripts

Browse source
This commit is contained in:
Korbs 2024-10-25 14:50:58 -04:00
parent 9da485dee0
commit e4035a3089
2 changed files with 73 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
source/src/components/global/Header.astro
View file

@ -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,36 +70,13 @@ 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
View 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>