ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: patches search bar

Browse Source
This commit is contained in:
afn
2022-11-26 16:42:19 -05:00
parent 246a851c9d
commit b135442a43
7 changed files with 85 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/routes/patches/+page.svelte
View File

@ -2,19 +2,28 @@
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import type { CompatiblePackage } from 'src/data/types';
import type { Patch } from 'src/data/types';
import { patches as api_patches } from '../../data/api';
import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
import PatchCell from '$lib/components/molecules/PatchCell.svelte';
import Footer from '$lib/components/molecules/Footer.svelte';
import Search from '$lib/components/atoms/Search.svelte';
$: ({ patches, packages } = $api_patches);
let current: boolean = false;
let searchTerm: string;
function search(findTerm: string | boolean, array: any) {
function search(patch: Patch) {
if (patch.name.includes(searchTerm) || patch.description.includes(searchTerm)) {
return true;
}
return false;
}
function filterByPackage(findTerm: string | boolean, array: any) {
for (let i = 0; i < array.length; i++) {
if (array[i].name === findTerm) {
return true;
@ -32,20 +41,25 @@
<main>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
<TreeMenu title="packages">
{#each packages as pkg}
<TreeMenuButton bind:current name={pkg} />
{/each}
<TreeMenu title="Search patches...">
<Search bind:searchTerm title="Search patches..." />
<span>
{#each packages as pkg}
<TreeMenuButton bind:current name={pkg} />
{/each}
</span>
</TreeMenu>
</aside>
<div class="patches-container">
{#each patches as patch}
{#key current}
{#if search(current, patch.compatiblePackages) || !current}
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
<PatchCell bind:current {patch} />
</div>
{#key current || searchTerm}
{#if filterByPackage(current, patch.compatiblePackages) || !current}
{#if search(patch) || !searchTerm}
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
<PatchCell bind:current {patch} />
</div>
{/if}
{/if}
{/key}
{/each}
@ -56,21 +70,26 @@
<style>
main {
margin-inline: auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 300px 3fr;
width: min(98%, 90rem);
gap: 1.5rem;
padding-bottom: 3rem;
}
aside {
padding-left: 0.75rem;
}
.patches-container {
margin-top: 7rem;
margin-top: 6rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
position: sticky;
z-index: 1;
min-height: calc(100vh - 7rem);
min-height: calc(100vh - 6rem);
padding-bottom: 3rem;
padding-right: 0.75rem;
}
</style>