ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-30 14:21:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: logo pages

Browse Source
This commit is contained in:
afn
2022-11-25 03:52:32 -05:00
parent 6c4e30256b
commit ff3ee24a98
15 changed files with 55 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/routes/polling/+page.svelte
View File

@@ -1,13 +1,16 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import LogoOption from '$lib/components/atoms/LogoOption.svelte';
import Button from '$lib/components/atoms/Button.svelte';
import { onMount } from 'svelte';
let selected: Array<string> = [];
let logos = [];
let currentPage = 1;
let maxPages = 1;
let logoAmount = 4;
let min = 0;
let max = logoAmount;
onMount(async () => {
const response = await fetch('https://poll.revanced.app/logos');
const json = await response.json();
@@ -17,38 +20,49 @@
}
// update ui
logos = logos;
maxPages = Math.floor(logos.length / logoAmount);
});
function previousPage() {
min -= logoAmount;
max -= logoAmount;
currentPage--;
}
function nextPage() {
min += logoAmount;
max += logoAmount;
currentPage++;
}
</script>
<svelte:head>
<title>ReVanced | Contributors</title>
<meta content="ReVanced | Contributors" name="og:title" />
<meta content="ReVanced | Contributors" name="twitter:title" />
<title>ReVanced · Logo Poll</title>
<meta content="ReVanced · Logo Poll" name="og:title" />
<meta content="ReVanced · Logo Poll" name="twitter:title" />
</svelte:head>
<main>
<div class="wrapper">
<div class="top-container">
<h1>ReVanced Logo Poll</h1>
<h2>{selected.length}/4 selected· Page 1/6</h2>
<div class="top-custom-button-container">
<button>Help</button>
<button>Website</button>
</div>
<h1>ReVanced Logo Poll</h1>
<h2>{selected.length}/4 selected· Page {currentPage}/{maxPages}</h2>
<div class="top-custom-button-container">
<a href="https://hhh.com" target="_blank" rel="noreferrer"><button>Help</button></a>
<a href="https://revanced.app" target="_blank" rel="noreferrer"><button>Website</button></a>
</div>
</div>
<div class="options-grid">
{#if logos.length > 0}
<LogoOption bind:selected id={logos[0].id} logo={logos[0].gdrive_direct_url} name={logos[0].name} file={logos[0].filename}/>
<LogoOption bind:selected id={logos[1].id} logo={logos[1].gdrive_direct_url} name={logos[1].name} file={logos[1].filename}/>
<LogoOption bind:selected id={logos[2].id} logo={logos[2].gdrive_direct_url} name={logos[2].name} file={logos[2].filename}/>
<LogoOption bind:selected id={logos[3].id} logo={logos[3].gdrive_direct_url} name={logos[3].name} file={logos[3].filename}/>
{/if}
{#each logos.slice(min, max) as { id, gdrive_direct_url, name, filename }}
{#key currentPage}
<LogoOption bind:selected clicked={selected.includes(id)} {id} logo={gdrive_direct_url} {name} {filename} />
{/key}
{/each}
</div>
<div class="buttons-container">
<Button>Previous</Button>
<Button kind="primary" href="https://next.com">Next</Button>
<Button on:click={previousPage} unclickable={currentPage <= 1}>Previous</Button>
<Button kind="primary" on:click={nextPage} unclickable={currentPage >= maxPages}>Next</Button>
</div>
</div>
</main>
@@ -69,7 +83,6 @@
color: var(--grey-four);
}
h2 {
font-size: 1rem;
color: var(--grey-three);
@@ -84,10 +97,9 @@
float: bottom;
}
button {
background-color: transparent;
border:none;
border: none;
border: 1px solid var(--grey-six);
color: var(--grey-four);
padding: 0.5rem 1.25rem;