ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#36 show results in popup

Browse source
This commit is contained in:
neil 2022-12-21 15:58:37 +08:00
parent a3be80627c
commit e7f6c21719
2 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
modules/gui/src/components/SearchResults/SearchResults.svelte Normal file
View file

@ -0,0 +1,48 @@
<script lang="ts">
import { searchStore } from '$libs/stores';
import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
let term: string;
searchStore.subscribe((v) => (term = v));
</script>
<section class={term ? 'show' : ''}>
<div class="border border-gray bg-black">
<header class="p-4 text-2xl text-primary">
Showing search results for `{term}`
</header>
<menu class="flex h-8 w-full gap-4 bg-accent px-4 text-xs">
<button>packages (33)</button>
<button>articles (33)</button>
<button>workshops (33)</button>
</menu>
</div>
</section>
<style>
section {
position: fixed;
top: 0;
left: 240px;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.3s ease-in-out;
padding: 36px;
opacity: 0%;
overflow: hidden;
height: 0px;
}
section.show {
opacity: 100%;
height: 100%;
}
section > div {
height: 0%;
transition: height 0.6s ease-in-out;
}
section.show > div {
height: 90%;
}
</style>

2
modules/gui/src/routes/+layout.svelte
View file

@ -6,6 +6,7 @@
import FooterLinks from '$components/FooterLinks/FooterLinks.svelte'; import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
import { backLink as backLinkStore } from '$libs/stores'; import { backLink as backLinkStore } from '$libs/stores';
import SearchResults from '$components/SearchResults/SearchResults.svelte';
let view: HTMLElement; let view: HTMLElement;
@ -36,6 +37,7 @@
<footer class="mt-8 w-full border border-r-0 border-gray bg-black"> <footer class="mt-8 w-full border border-r-0 border-gray bg-black">
<FooterLinks /> <FooterLinks />
</footer> </footer>
<SearchResults />
</section> </section>
</div> </div>