titaniumnet-mirror/Nebula
1
0
Fork 0
mirror of https://github.com/NebulaServices/Nebula.git synced 2025-05-14 12:20:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Omnibox styling...

Browse source
This commit is contained in:
MotorTruck1221 2024-09-26 23:54:13 -06:00
parent 709c2f3f7b
commit b3947909a0
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
2 changed files with 36 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/pages/[lang]/index.astro
View file

@ -17,22 +17,29 @@ const t = useTranslations(lang);
<Layout title="Welcome to Astro.">
<div
class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
>
<div class="flex flex-row items-center mb-8">
<div class="h-32 w-32 fill-navbar-text-color">
<Logo />
</div>
<h1
class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
>
nebula.
</h1>
>
<div class="w-full flex flex-col justify-center items-center content-center h-2/4">
<div class="flex flex-row items-center mb-8">
<div class="h-32 w-32 fill-navbar-text-color">
<Logo />
</div>
<h1
class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
>
nebula.
</h1>
</div>
<input
id="nebula-input"
class="transition-all duration-300 font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
placeholder={t("home.placeholder")}
/>
<div id="omnibox" class="hidden transition-all duration-300 flex flex-col w-10/12 md:w-3/12 flex-grow bg-input text-center items-center rounded-b-2xl border-input-border-color border-b border-r border-l">
<span class="w-full text-input-text bg-primary h-9 text-xl text-align-center overflow-hidden flex items-center justify-center hover:bg-lighter active:bg-primary">
<p>E</p>
</span>
</div>
</div>
<input
id="nebula-input"
class="font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
placeholder={t("home.placeholder")}
/>
<iframe id="neb-iframe" class="hidden z-100 w-full h-full absolute top-0 bottom-0 bg-primary"></iframe>
</div>
</Layout>
@ -48,6 +55,7 @@ const t = useTranslations(lang);
try {
const input = document.getElementById("nebula-input") as HTMLInputElement;
const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
const omnibox = document.getElementById("omnibox") as HTMLDivElement;
input?.addEventListener("keypress", function (event: any) {
if (event.key === "Enter") {
initSw().then(() => {
@ -56,6 +64,18 @@ const t = useTranslations(lang);
})
}
})
input?.addEventListener("input", async function() {
const value = input?.value;
input.classList.remove("rounded-b-2xl");
omnibox.classList.remove("hidden");
if (value.length === 0) {
input.classList.add("rounded-b-2xl");
omnibox.classList.add("hidden");
}
if (value >= 3) {
//handle shit here :D
}
});
}
catch (_) {
//we purposely don't return anything

2
src/pages/catalog/pagnation.astro
View file

@ -1,5 +1,5 @@
<input
class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
type="number"
id="pagnation_input"
placeholder="..."