mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: patches search bar
This commit is contained in:
afn
parent
246a851c9d
commit
b135442a43
@ -44,7 +44,7 @@ body {
|
||||
--grey-four: #182244;
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #202126;
|
||||
--grey-seven: #202126;
|
||||
--grey-seven: #18191D;
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ h4 {
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--white);
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 300;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
@ -102,7 +102,7 @@ h6 {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--grey-one);
|
||||
background-color: var(--accent-color);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
41
src/lib/components/atoms/Search.svelte
Normal file
41
src/lib/components/atoms/Search.svelte
Normal file
@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let searchTerm: string;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<img src="../icons/search.svg" />
|
||||
<input type="text" placeholder={title} bind:value={searchTerm} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
img {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
transform: translate(60%, 60%);
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--grey-five);
|
||||
padding-left: 2.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--grey-five);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 0.9rem;
|
||||
color: var(--grey-five);
|
||||
}
|
||||
</style>
|
||||
@ -71,7 +71,7 @@
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottom-mobile-container">
|
||||
<Navigation href="/contributors/">
|
||||
<img src="/icons/contrib.svg" alt="Contributors" />
|
||||
@ -103,7 +103,7 @@
|
||||
min-height: 70px;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--grey-seven);
|
||||
background-color: var(--grey-six);
|
||||
}
|
||||
|
||||
.desktop {
|
||||
@ -158,8 +158,6 @@
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bottom-mobile-container {
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h4>{patch.description}</h4>
|
||||
<div class="info-container">
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
<a
|
||||
@ -59,7 +60,6 @@
|
||||
<h2>⚙️ Patch Options</h2>
|
||||
{/if}
|
||||
</div>
|
||||
<h4>{patch.description}</h4>
|
||||
|
||||
{#if expanded && hasPatchOptions}
|
||||
<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
|
||||
@ -127,7 +127,7 @@
|
||||
}
|
||||
|
||||
.patch-container:active {
|
||||
filter: brightness(1.5);
|
||||
filter: brightness(1.75);
|
||||
}
|
||||
|
||||
.title {
|
||||
@ -171,6 +171,4 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
</script>
|
||||
|
||||
<div class="menu">
|
||||
<h5>{title.toUpperCase()}</h5>
|
||||
<hr />
|
||||
<div class="package-list">
|
||||
<slot />
|
||||
</div>
|
||||
@ -19,22 +17,15 @@
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 70px;
|
||||
padding-top: calc(7rem - 70px);
|
||||
padding-top: calc(6rem - 70px);
|
||||
overflow-y: scroll;
|
||||
border-right: 1px solid var(--grey-six);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
|
||||
@ -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>
|
||||
|
||||
1
static/icons/search.svg
Normal file
1
static/icons/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" fill="#ACC0D3"/></svg>
|
||||
|
After Width: | Height: | Size: 432 B |
Loading…
x
Reference in New Issue
Block a user