mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
fix: patch cell target pkg stuff + refactoring
This commit is contained in:
afn
parent
889a89a0ad
commit
3bac5e0453
@ -6,9 +6,7 @@
|
||||
</script>
|
||||
|
||||
<a href={url} rel="noreferrer" target="_blank">
|
||||
<button tabindex="-1">
|
||||
<img src={pfp} {alt} />
|
||||
</button>
|
||||
<img src={pfp} {alt} />
|
||||
<h2>{name}</h2>
|
||||
</a>
|
||||
|
||||
@ -16,32 +14,17 @@
|
||||
a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0.5rem;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
border: 1px solid var(--grey-three);
|
||||
border-radius: 4px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
background-color: var(--grey-six)
|
||||
background-color: var(--grey-six);
|
||||
border: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--white);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: var(--accent-color);
|
||||
@ -59,7 +42,11 @@
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-color: var(--grey-two);
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,12 +21,12 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<hr />
|
||||
|
||||
<div class="contrib-host">
|
||||
{#each contribs as contrib}
|
||||
{#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
|
||||
<ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
|
||||
{#each contribs as { login, avatar_url, html_url }}
|
||||
{#if !usersIwantToExplodeSoBadly.includes(login)}
|
||||
<ContributorButton name={login} pfp={avatar_url} url={html_url} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -38,15 +38,21 @@
|
||||
<div class="info-container">
|
||||
{#each patch.compatiblePackages as pkg, i}
|
||||
{#if current === false}
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
{/if}
|
||||
<!-- gets only the lastest supported version (cant get 'any' to work without duplicates help) -->
|
||||
{#if i < pkg.versions.length - 1}
|
||||
<h2>
|
||||
🎯 {pkg.versions.slice(-1)[0] || 'Any'}
|
||||
</h2>
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id={pkg.name}"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<h2>📦 {pkg.name}</h2>
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
|
||||
{#if patch.compatiblePackages[0].versions.length}
|
||||
<h2>
|
||||
🎯 {patch.compatiblePackages[0].versions.slice(-1)}
|
||||
</h2>
|
||||
{/if}
|
||||
|
||||
<h2>🧩 {patch.version}</h2>
|
||||
|
||||
@ -88,6 +94,10 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -115,7 +125,7 @@
|
||||
transition: all 2s var(--bezier-one);
|
||||
background-color: var(--grey-six);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.patch-container:active {
|
||||
|
||||
@ -22,18 +22,22 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="og:title" content="ReVanced"/>
|
||||
<meta name="og:image" itemprop="image" content="/embed.png">
|
||||
<meta property="og:description" content="An extensible framework for building application mods.">
|
||||
<meta name="twitter:image" itemprop="image" content="/embed.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="theme-color" content="#0f111a">
|
||||
<meta name="og:title" content="ReVanced" />
|
||||
<meta name="og:image" itemprop="image" content="/embed.png" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="An extensible framework for building application mods."
|
||||
/>
|
||||
<meta name="twitter:image" itemprop="image" content="/embed.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#0f111a" />
|
||||
<title>ReVanced</title>
|
||||
</svelte:head>
|
||||
|
||||
<NavHost/>
|
||||
<NavHost />
|
||||
|
||||
{#if $show_loading_animation}
|
||||
<Spinner />
|
||||
<Spinner />
|
||||
{:else}
|
||||
<slot />
|
||||
<slot />
|
||||
{/if}
|
||||
|
||||
@ -5,13 +5,15 @@
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
</script>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
<main>
|
||||
<div class="wrap">
|
||||
<div class="wrappezoid">
|
||||
<Home />
|
||||
<div id="heroimg"><HeroImage /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SocialHost />
|
||||
<SocialHost />
|
||||
</main>
|
||||
<Wave />
|
||||
|
||||
<style>
|
||||
|
||||
@ -11,19 +11,21 @@
|
||||
export let data: ContribData;
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h1>Made possible by the community.</h1>
|
||||
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
|
||||
<main>
|
||||
<div class="wrapper">
|
||||
<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h1>Made possible by the community.</h1>
|
||||
<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
|
||||
</div>
|
||||
<div class="contrib-grid">
|
||||
{#each data.repositories as { contributors, name }}
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<ContributorHost contribs={contributors} repo={name} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="contrib-grid">
|
||||
{#each data.repositories as { contributors, name }}
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<ContributorHost contribs={contributors} repo={name} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer {...data} />
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<script>
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import Button from '$lib/components/atoms/Button.svelte';
|
||||
</script>
|
||||
|
||||
<section in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
|
||||
<main in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
|
||||
<div class="menu">
|
||||
<div class="doc-section-selected">
|
||||
<h3>Prerequisites</h3>
|
||||
@ -51,10 +52,10 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
section {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 3fr;
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<script lang="ts">
|
||||
import type { PatchesData } from './+page';
|
||||
import type { ContribData } from '../+layout';
|
||||
import type { PatchesData } from './+page';
|
||||
import type { ContribData } from '../+layout';
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import type { CompatiblePackage, Patch } from 'src/data/types';
|
||||
import type { CompatiblePackage } from 'src/data/types';
|
||||
|
||||
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';
|
||||
|
||||
export let data: PatchesData & ContribData;
|
||||
export let data: PatchesData & ContribData;
|
||||
|
||||
let { patches, packages } = data;
|
||||
let { patches, packages } = data;
|
||||
|
||||
let current: boolean = false;
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<meta content="Revanced - Patches" name="twitter:title" />
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<main>
|
||||
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<TreeMenu title="packages">
|
||||
{#each packages as pkg}
|
||||
@ -52,11 +52,11 @@
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer {...data} />
|
||||
|
||||
<style>
|
||||
section {
|
||||
main {
|
||||
margin-inline: auto;
|
||||
width: min(95%, 100rem);
|
||||
display: grid;
|
||||
@ -69,25 +69,10 @@
|
||||
margin-top: 7.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
min-height: calc(100vh - 7.5rem);
|
||||
}
|
||||
|
||||
/*
|
||||
pulsing todo:
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
background-position: right;
|
||||
}
|
||||
}
|
||||
.loading {
|
||||
height: 50px;
|
||||
background: linear-gradient(90deg, var(--grey-six) 33%, var(--grey-one) 50%, var(--grey-six) 66%) var(--grey-six);
|
||||
background-size: 300% 100%;
|
||||
animation: pulse 2s infinite;
|
||||
margin-bottom: 0.5rem;
|
||||
} */
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user