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

feat: store selected logos, nicer ui

Browse Source
This commit is contained in:
afn
2022-11-25 02:00:23 -05:00
parent 4e096a3a5c
commit 6c4e30256b
7 changed files with 153 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,22 +2,22 @@
import { fly } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import ContributorPerson from '$lib/components/atoms/ContributorPerson.svelte';
import LogoOption from '$lib/components/atoms/LogoOption.svelte';
import Button from '$lib/components/atoms/Button.svelte';
import { onMount } from 'svelte';
import { onMount } from 'svelte';
let selected = [];
let logos = [];
onMount(async () => {
const response = await fetch('https://poll.revanced.app/logos');
const json = await response.json();
// guh
for (const name of Object.keys(json)) {
logos.push({ name, ...json[name] });
}
// update ui
logos = logos;
});
let selected: Array<string> = [];
let logos = [];
onMount(async () => {
const response = await fetch('https://poll.revanced.app/logos');
const json = await response.json();
// guh
for (const name of Object.keys(json)) {
logos.push({ name, ...json[name] });
}
// update ui
logos = logos;
});
</script>
<svelte:head>
@@ -28,21 +28,23 @@
<main>
<div class="wrapper">
<div class="text-container">
<h1>Page 1/5</h1>
<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>
</div>
<div class="contrib-grid">
{#if logos.length != 0}
<ContributorPerson pfp={logos[0].gdrive_direct_url} name={logos[0].name} />
<ContributorPerson pfp={logos[1].gdrive_direct_url} name={logos[1].name} />
<ContributorPerson pfp={logos[2].gdrive_direct_url} name={logos[2].name} />
<ContributorPerson pfp={logos[3].gdrive_direct_url} name={logos[3].name} />
<!-- <ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 2" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="afn 3" />
<ContributorPerson pfp = "https://cdn.discordapp.com/emojis/267559535919497217.webp?size=48&quality=lossless" name="yes" /> -->
{/if}
<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}
</div>
<div class="buttons-container">
<Button>Previous</Button>
@@ -52,7 +54,7 @@
</main>
<style>
.contrib-grid {
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
flex-direction: column;
@@ -61,14 +63,16 @@
}
h1 {
font-size: 2.25rem;
font-size: 2rem;
font-weight: 600;
text-align: center;
color: var(--grey-four);
}
h2 {
font-size: 1rem;
color: var(--grey-four);
color: var(--grey-three);
text-align: center;
}
@@ -80,7 +84,18 @@
float: bottom;
}
.text-container {
button {
background-color: transparent;
border:none;
border: 1px solid var(--grey-six);
color: var(--grey-four);
padding: 0.5rem 1.25rem;
border-radius: 12px;
cursor: pointer;
}
.top-container {
display: flex;
align-items: center;
flex-direction: column;
@@ -88,16 +103,22 @@
margin-bottom: 2rem;
background-color: var(--accent-color);
padding: 2rem;
border-radius: 8px;
border-radius: 12px;
}
.top-custom-button-container {
margin-top: 0.5rem;
display: flex;
flex-direction: row;
gap: 0.5rem;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 2rem;
font-size: 1.5rem;
}
.contrib-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));;
.options-grid {
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}
}
</style>