mirror of
https://github.com/revanced/revanced-website.git
synced 2025-06-12 21:27:42 +02:00
feat: better footer, modal, contributors page ui
This commit is contained in:
afn
65
src/routes/contributors/ContributorPerson.svelte
Normal file
65
src/routes/contributors/ContributorPerson.svelte
Normal file
@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let pfp: string;
|
||||
export let url: string;
|
||||
let alt = `${name}'s profile picture`;
|
||||
</script>
|
||||
|
||||
<a href={url} rel="noreferrer" target="_blank">
|
||||
<img src={pfp} {alt} />
|
||||
<h5>{name}</h5>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0.9rem 1rem;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s var(--bezier-one);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--grey-three);
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--accent-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
h5 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-color: var(--grey-two);
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h5 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
a {
|
||||
width: max-content;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/routes/contributors/ContributorSection.svelte
Normal file
103
src/routes/contributors/ContributorSection.svelte
Normal file
@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
import { friendlyName } from '$lib/utils';
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import type { Contributor } from '$lib/types';
|
||||
import ContributorButton from './ContributorPerson.svelte';
|
||||
|
||||
export let contributors: Contributor[];
|
||||
export let repo: string;
|
||||
let expanded = true;
|
||||
|
||||
// Yes
|
||||
let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
|
||||
let repo_name = friendlyName(repo);
|
||||
</script>
|
||||
|
||||
<div class="section-container">
|
||||
<div
|
||||
class="title"
|
||||
class:closed={!expanded}
|
||||
on:click={() => (expanded = !expanded)}
|
||||
on:keypress={() => (expanded = !expanded)}
|
||||
>
|
||||
<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
|
||||
<h4>{repo_name}</h4>
|
||||
</a>
|
||||
<img
|
||||
id="arrow"
|
||||
style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
|
||||
src="/icons/arrow.svg"
|
||||
alt="dropdown"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if expanded}
|
||||
<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}>
|
||||
{#each contributors as { login, avatar_url, html_url }}
|
||||
{#if !usersIwantToExplodeSoBadly.includes(login)}
|
||||
<ContributorButton name={login} pfp={avatar_url} url={html_url} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--grey-six);
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
}
|
||||
|
||||
.closed {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#arrow {
|
||||
height: 1.5rem;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
width: max-content;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: wavy;
|
||||
text-decoration-color: var(--accent-color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.contrib-host {
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.contrib-host {
|
||||
padding: 0.75rem;
|
||||
gap: 0.25rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
src/routes/patches/PatchItem.svelte
Normal file
168
src/routes/patches/PatchItem.svelte
Normal file
@ -0,0 +1,168 @@
|
||||
<script lang="ts">
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import type { Patch } from '$lib/types';
|
||||
import { friendlyName } from '$lib/utils'
|
||||
|
||||
|
||||
export let patch: Patch;
|
||||
const hasPatchOptions = !!patch.options.length;
|
||||
let expanded: boolean = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="patch-container"
|
||||
class:expanded={hasPatchOptions}
|
||||
class:rotate={expanded}
|
||||
on:click={() => (expanded = !expanded)}
|
||||
>
|
||||
<div class="things">
|
||||
<div class="title">
|
||||
<h3>{friendlyName(patch.name)}</h3>
|
||||
</div>
|
||||
{#if hasPatchOptions}
|
||||
<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
|
||||
{/if}
|
||||
</div>
|
||||
<h5>{patch.description}</h5>
|
||||
<div 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>
|
||||
</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>
|
||||
{/if}
|
||||
|
||||
{#if !patch.compatiblePackages.length}
|
||||
<h6 class="boxed">
|
||||
🌎 Universal patch
|
||||
</h6>
|
||||
{/if}
|
||||
|
||||
|
||||
<h6 class="boxed">🧩 {patch.version}</h6>
|
||||
|
||||
{#if hasPatchOptions}
|
||||
<h6 class="boxed">⚙️ Patch options</h6>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if expanded && hasPatchOptions}
|
||||
<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
|
||||
<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
|
||||
{#each patch.options as option}
|
||||
<div class="option">
|
||||
<h5 id="option-title">{option.title}</h5>
|
||||
<h5>{option.description}</h5>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
border-radius: 8px;
|
||||
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);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
margin: 0.3rem 0rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.patch-container {
|
||||
transition: all 2s var(--bezier-one);
|
||||
background-color: var(--grey-six);
|
||||
padding: 1.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.patch-container:active {
|
||||
filter: brightness(1.75);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.things {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#arrow {
|
||||
height: 1.5rem;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rotate #arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.expanded {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* thanks piknik */
|
||||
.option + .option {
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
.options {
|
||||
border: 1px solid var(--grey-three);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.patch-container {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user