mirror of
https://github.com/revanced/revanced-website.git
synced 2025-06-12 21:27:42 +02:00
feat: improved patches page ui
This commit is contained in:
afn
@ -53,8 +53,8 @@
|
||||
}
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
a {
|
||||
width: max-content;
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-six);
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
@ -97,7 +98,7 @@
|
||||
.contrib-host {
|
||||
padding: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,11 +5,13 @@
|
||||
import type { Patch } from '$lib/types';
|
||||
import { patches as api_patches } from '$data/api';
|
||||
|
||||
import TreeMenu from '$lib/components/TreeView/TreeMenu.svelte';
|
||||
import TreeMenuButton from '$lib/components/TreeView/TreeMenuButton.svelte';
|
||||
import PackageMenu from './PackageMenu.svelte';
|
||||
import Package from './Package.svelte';
|
||||
import PatchItem from './PatchItem.svelte';
|
||||
import Footer from '$layout/Footer.svelte';
|
||||
import Search from '$lib/components/Search.svelte';
|
||||
import FilterChip from '$lib/components/FilterChip.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
|
||||
$: ({ patches, packages } = $api_patches);
|
||||
|
||||
@ -17,6 +19,7 @@
|
||||
let searchTerm: string;
|
||||
let searchTermFiltered: string;
|
||||
let timeout: any = null;
|
||||
let mobilePackages = false;
|
||||
|
||||
function filterByPackage(selectedPkg: string | boolean, packageList: any) {
|
||||
for (let i = 0; i < packageList.length; i++) {
|
||||
@ -63,18 +66,57 @@
|
||||
<meta content="ReVanced | Patches" name="twitter:title" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="search">
|
||||
<div class="search-contain">
|
||||
<!-- Must bind both variables: we get searchTerm from the text input, -->
|
||||
<!-- and searchTermFiltered gets cleared with the clear button -->
|
||||
<Search
|
||||
bind:searchTerm
|
||||
bind:searchTermFiltered
|
||||
title="Search for patches"
|
||||
on:keyup={debounce}
|
||||
/>
|
||||
<div class="filter-chips">
|
||||
<FilterChip
|
||||
selected={selectedPkg}
|
||||
dropdown
|
||||
on:click={() => (mobilePackages = !mobilePackages)}
|
||||
>
|
||||
{selectedPkg ? selectedPkg : 'Packages'}
|
||||
</FilterChip>
|
||||
<!-- <FilterChip check>Universal</FilterChip>
|
||||
<FilterChip>Patch options</FilterChip> -->
|
||||
</div>
|
||||
|
||||
<div class="mobile-packages-modal">
|
||||
<Modal bind:modalOpen={mobilePackages}>
|
||||
<svelte:fragment slot="title">Packages</svelte:fragment>
|
||||
<div class="mobile-packages">
|
||||
<!-- <span on:click={() => (mobilePackages = !mobilePackages)}>
|
||||
<Package bind:selectedPkg name="All packages" />
|
||||
</span> -->
|
||||
{#each packages as pkg}
|
||||
<span
|
||||
on:click={() => (mobilePackages = !mobilePackages)}
|
||||
on:keypress={() => (mobilePackages = !mobilePackages)}
|
||||
>
|
||||
<Package bind:selectedPkg name={pkg} />
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<TreeMenu>
|
||||
<!-- Must bind both variables: we get searchTerm from the text input, -->
|
||||
<!-- and searchTermFiltered gets cleared with the clear button -->
|
||||
<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
|
||||
<PackageMenu>
|
||||
<span class="packages">
|
||||
{#each packages as pkg}
|
||||
<TreeMenuButton bind:selectedPkg name={pkg} />
|
||||
<Package bind:selectedPkg name={pkg} />
|
||||
{/each}
|
||||
</span>
|
||||
</TreeMenu>
|
||||
</PackageMenu>
|
||||
</aside>
|
||||
|
||||
<div class="patches-container">
|
||||
@ -98,15 +140,28 @@
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin-inline: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
width: min(98%, 82rem);
|
||||
width: min(90%, 80rem);
|
||||
margin-inline: auto;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 1.25rem;
|
||||
background-color: var(--grey-seven);
|
||||
}
|
||||
|
||||
.search-contain {
|
||||
width: min(90%, 80rem);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.patches-container {
|
||||
margin-top: 6.7rem;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
@ -114,36 +169,48 @@
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
min-height: calc(100vh - 6rem);
|
||||
padding-bottom: 3rem;
|
||||
padding-right: 0.75rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.filter-chips {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-packages {
|
||||
margin-bottom: -1px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mobile-packages-modal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: none;
|
||||
flex-direction: column;
|
||||
margin-top: 4rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.patches-container {
|
||||
padding-left: 0.75rem;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-top: 0;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.packages {
|
||||
.filter-chips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 2.75rem;
|
||||
gap: 0.5rem;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.packages::-webkit-scrollbar {
|
||||
display: none;
|
||||
margin-top: 1rem;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
73
src/routes/patches/Package.svelte
Normal file
73
src/routes/patches/Package.svelte
Normal file
@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
export let selectedPkg: string | boolean;
|
||||
export let name: string;
|
||||
|
||||
function handleClick() {
|
||||
selectedPkg = selectedPkg === name ? false : name
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="package"
|
||||
class:selected={selectedPkg === name}
|
||||
on:click={handleClick}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.package {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
transition: background-color 0.4s var(--bezier-one);
|
||||
color: var(--grey-five);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--accent-color);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
background-color: var(--accent-low-opacity);
|
||||
}
|
||||
.package:hover:not(.selected) {
|
||||
background-color: var(--grey-six);
|
||||
}
|
||||
|
||||
.package:not(.selected):hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.package {
|
||||
border-radius: 0px;
|
||||
font-size: 0.9rem;
|
||||
padding: 1rem 1rem;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--grey-five);
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--accent-low-opacity);
|
||||
}
|
||||
|
||||
.package:not(.selected):hover {
|
||||
color: var(--grey-five);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/routes/patches/PackageMenu.svelte
Normal file
53
src/routes/patches/PackageMenu.svelte
Normal file
@ -0,0 +1,53 @@
|
||||
<div class="menu">
|
||||
<h6>PACKAGES</h6>
|
||||
<hr/>
|
||||
<div class="slot">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.menu {
|
||||
height: calc(100vh - 60px);
|
||||
width: 100%;
|
||||
padding: 0px 30px 30px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
padding-top: calc(6rem - 60px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.menu::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
.menu:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.slot {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.menu {
|
||||
padding: 0.75rem;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
h6, hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,8 +2,7 @@
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import type { Patch } from '$lib/types';
|
||||
import { friendlyName } from '$lib/utils'
|
||||
|
||||
import { friendlyName } from '$lib/utils';
|
||||
|
||||
export let patch: Patch;
|
||||
const hasPatchOptions = !!patch.options.length;
|
||||
@ -26,37 +25,34 @@
|
||||
{/if}
|
||||
</div>
|
||||
<h5>{patch.description}</h5>
|
||||
<div class="info-container">
|
||||
<ul class="info-container">
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id={pkg.name}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h6 class="boxed">📦 {pkg.name}</h6>
|
||||
<li class="patch-info">📦 {pkg.name} ·</li>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
|
||||
{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
|
||||
<h6 class="boxed">
|
||||
🎯 {patch.compatiblePackages[0].versions.slice(-1)}
|
||||
</h6>
|
||||
<li class="patch-info">
|
||||
🎯 {patch.compatiblePackages[0].versions.slice(-1)} ·
|
||||
</li>
|
||||
{/if}
|
||||
|
||||
{#if !patch.compatiblePackages.length}
|
||||
<h6 class="boxed">
|
||||
🌎 Universal patch
|
||||
</h6>
|
||||
<li class="patch-info">🌎 Universal patch</li>
|
||||
{/if}
|
||||
|
||||
|
||||
<h6 class="boxed">🧩 {patch.version}</h6>
|
||||
<li class="patch-info">🧩 {patch.version}</li>
|
||||
|
||||
{#if hasPatchOptions}
|
||||
<h6 class="boxed">⚙️ Patch options</h6>
|
||||
<li class="patch-info">· ⚙️ Patch options</li>
|
||||
{/if}
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
{#if expanded && hasPatchOptions}
|
||||
<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
|
||||
@ -75,36 +71,39 @@
|
||||
<style>
|
||||
h3 {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--accent-color);
|
||||
background-color: var(--grey-two);
|
||||
padding: 0.2rem 0.4rem;
|
||||
display: flex;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#option-title {
|
||||
color: var(--accent-color);
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
.patch-info {
|
||||
list-style: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--grey-five);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a .patch-info:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-color-two);
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0.3rem 0rem;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.patch-container {
|
||||
@ -159,10 +158,4 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.patch-container {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user