mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-23 18:16:23 +02:00
fix: fix mobile text overflow
This commit is contained in:
afn
parent
eb995c43e3
commit
3f55f0a07a
@ -1,51 +0,0 @@
|
|||||||
import { browser } from "$app/environment";
|
|
||||||
|
|
||||||
import { dev_log } from "$lib/utils";
|
|
||||||
|
|
||||||
const CACHE_KEY_PREFIX = "revanced_api_cache_l1";
|
|
||||||
const L1_CACHE_VALIDITY = 5 * 60 * 1000; // 5 minutes
|
|
||||||
|
|
||||||
function l1_key_name(endpoint: string) {
|
|
||||||
return `${CACHE_KEY_PREFIX}:${endpoint}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get item from the cache
|
|
||||||
export function get(endpoint: string) {
|
|
||||||
if (!browser) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const key_name = l1_key_name(endpoint);
|
|
||||||
const ls_data: { valid_until: number; data: any } | null = JSON.parse(localStorage.getItem(key_name));
|
|
||||||
|
|
||||||
if (ls_data === null || ls_data.valid_until <= Date.now()) {
|
|
||||||
dev_log("Cache", `missed "${endpoint}"`);
|
|
||||||
localStorage.removeItem(key_name);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
dev_log("Cache", `hit "${endpoint}"`);
|
|
||||||
return ls_data.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update the cache
|
|
||||||
export function update(endpoint: string, data: any) {
|
|
||||||
if (!browser) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage.setItem(l1_key_name(endpoint), JSON.stringify({
|
|
||||||
data,
|
|
||||||
valid_until: Date.now() + L1_CACHE_VALIDITY
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear the cache
|
|
||||||
export function clear() {
|
|
||||||
for (const key of Object.keys(localStorage)) {
|
|
||||||
if (key.startsWith(CACHE_KEY_PREFIX)) {
|
|
||||||
localStorage.removeItem(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
import type { Readable, Subscriber, Unsubscriber, Writable } from "svelte/store";
|
|
||||||
import { writable } from "svelte/store";
|
|
||||||
import { error } from "@sveltejs/kit";
|
|
||||||
|
|
||||||
import { prerendering, browser, dev } from "$app/environment";
|
|
||||||
|
|
||||||
import * as settings from "./settings";
|
|
||||||
import * as cache from "./cache";
|
|
||||||
|
|
||||||
export class API<T> implements Readable<T> {
|
|
||||||
private store: Writable<T>;
|
|
||||||
// True if we have or are about to request data from the API.
|
|
||||||
has_requested: boolean;
|
|
||||||
|
|
||||||
// `transform` will transform the data received from the API.
|
|
||||||
constructor(public readonly endpoint: string, private readonly default_value: T, private readonly transform: ((v: any) => T) = (v) => v as T) {
|
|
||||||
// Initialize with cached data if possible.
|
|
||||||
const cached_data = cache.get(this.endpoint);
|
|
||||||
this.has_requested = cached_data !== null;
|
|
||||||
|
|
||||||
this.store = writable(cached_data || this.default_value);
|
|
||||||
}
|
|
||||||
|
|
||||||
private url() {
|
|
||||||
return `${settings.api_base_url()}/${this.endpoint}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Please don't call this directly
|
|
||||||
private async _update(fetch_fn: typeof fetch) {
|
|
||||||
// Try to get data from the cache.
|
|
||||||
let data = cache.get(this.endpoint);
|
|
||||||
|
|
||||||
if (data === null) {
|
|
||||||
// Fetch and transform data
|
|
||||||
const response = await fetch_fn(this.url());
|
|
||||||
data = this.transform(await response.json());
|
|
||||||
|
|
||||||
// Update the cache.
|
|
||||||
cache.update(this.endpoint, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.store.set(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Retrieve data and update.
|
|
||||||
private update(fetch_fn = fetch) {
|
|
||||||
// Make sure we set this immediately outside of the async function to avoid JS event loop weirdness.
|
|
||||||
this.has_requested = true;
|
|
||||||
return this._update(fetch_fn);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start retrieving data if needed.
|
|
||||||
retrieve_if_needed() {
|
|
||||||
if (!this.has_requested) {
|
|
||||||
return this.update();
|
|
||||||
}
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Implements the load function found in `+page/layout.ts` files.
|
|
||||||
page_load_impl() {
|
|
||||||
return async ({ fetch }) => {
|
|
||||||
if (prerendering) {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Might be better to actually return some data from the load function and use that on the client.
|
|
||||||
if (!(dev || browser || prerendering)) {
|
|
||||||
throw new Error("The API client is not optimized for production server-side rendering. Please change that :)");
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await this.update(fetch);
|
|
||||||
return {};
|
|
||||||
} catch(e) {
|
|
||||||
console.error(e);
|
|
||||||
throw error(504, "API Request Error");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Implement Svelte store.
|
|
||||||
subscribe(run: Subscriber<T>, invalidate?: any): Unsubscriber {
|
|
||||||
// Make sure we have up-to-date data from the API.
|
|
||||||
if (browser) {
|
|
||||||
this.retrieve_if_needed();
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.store.subscribe(run, invalidate);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// API Endpoints
|
|
||||||
import type { Patch, Repository, Tool } from '../types';
|
|
||||||
import { dev_log } from "$lib/utils";
|
|
||||||
|
|
||||||
export type ReposData = Repository[];
|
|
||||||
export type PatchesData = { patches: Patch[]; packages: string[] };
|
|
||||||
export type ToolsData = { [repo: string]: Tool };
|
|
||||||
|
|
||||||
export const repositories = new API<ReposData>("contributors", [], json => json.repositories);
|
|
||||||
|
|
||||||
// It needs to look this way to not break everything.
|
|
||||||
const tools_placeholder: ToolsData = {
|
|
||||||
"revanced/revanced-manager": {
|
|
||||||
version: "v0.0.0",
|
|
||||||
timestamp: "",
|
|
||||||
repository: "",
|
|
||||||
assets: [{
|
|
||||||
url: "",
|
|
||||||
name: "",
|
|
||||||
content_type: "",
|
|
||||||
size: null,
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const tools = new API<ToolsData>("tools", tools_placeholder, json => {
|
|
||||||
// The API returns data in a weird shape. Make it easier to work with.
|
|
||||||
let map: Map<string, Tool> = new Map();
|
|
||||||
for (const tool of json["tools"]) {
|
|
||||||
const repo: string = tool.repository;
|
|
||||||
|
|
||||||
if (!map.has(repo)) {
|
|
||||||
map.set(repo, {
|
|
||||||
version: tool.version,
|
|
||||||
repository: repo,
|
|
||||||
// Just use the timestamp of the first one we find.
|
|
||||||
timestamp: tool.timestamp,
|
|
||||||
assets: []
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let value = map.get(repo);
|
|
||||||
value.assets.push({
|
|
||||||
name: tool.name,
|
|
||||||
size: tool.size,
|
|
||||||
url: tool.browser_download_url,
|
|
||||||
content_type: tool.content_type
|
|
||||||
});
|
|
||||||
|
|
||||||
map.set(repo, value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return Object.fromEntries(map);
|
|
||||||
});
|
|
||||||
|
|
||||||
export const patches = new API<PatchesData>("patches", { patches: [], packages: [] }, patches => {
|
|
||||||
let packages: string[] = [];
|
|
||||||
|
|
||||||
// gets packages
|
|
||||||
for (let i = 0; i < patches.length; i++) {
|
|
||||||
patches[i].compatiblePackages.forEach((pkg: Patch) => {
|
|
||||||
let index = packages.findIndex((x) => x == pkg.name);
|
|
||||||
if (index === -1) {
|
|
||||||
packages.push(pkg.name);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return { patches, packages };
|
|
||||||
});
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import { browser } from "$app/environment";
|
|
||||||
|
|
||||||
const URL_KEY = "revanced_api_url";
|
|
||||||
|
|
||||||
// Get base URL
|
|
||||||
export function api_base_url(): string {
|
|
||||||
const default_base_url = "https://releases.revanced.app";
|
|
||||||
if (browser) {
|
|
||||||
return localStorage.getItem(URL_KEY) || default_base_url;
|
|
||||||
}
|
|
||||||
|
|
||||||
return default_base_url;
|
|
||||||
}
|
|
||||||
|
|
||||||
// (re)set base URL.
|
|
||||||
export function set_api_base_url(url?: string) {
|
|
||||||
if (!url) {
|
|
||||||
localStorage.removeItem(URL_KEY);
|
|
||||||
} else {
|
|
||||||
localStorage.setItem(URL_KEY, url);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -17,55 +17,54 @@
|
|||||||
selected = selected;
|
selected = selected;
|
||||||
}
|
}
|
||||||
console.log(selected);
|
console.log(selected);
|
||||||
localStorage.setItem("selected", JSON.stringify(selected));
|
localStorage.setItem('selected', JSON.stringify(selected));
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div on:click={handleClick} class:clicked>
|
<!-- SHUT UP -->
|
||||||
|
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||||
|
<div class="option" on:click={handleClick} on:keypress={handleClick} tabindex="0" class:clicked>
|
||||||
<img src={logo} alt={filename} />
|
<img src={logo} alt={filename} />
|
||||||
<span class="text">
|
<div class="text">
|
||||||
<h2>{name}</h2>
|
<h2>{name}</h2>
|
||||||
<h6>{filename}</h6>
|
<h6>{filename}</h6>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
|
||||||
|
.option {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: all 0.3s var(--bezier-one);
|
transition: all 0.3s var(--bezier-one);
|
||||||
border-radius: 8px;
|
border-radius: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
background-color: var(--grey-six);
|
background-color: var(--grey-six);
|
||||||
border: 1px solid var(--grey-three);
|
border: 1px solid var(--grey-three);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
|
||||||
|
|
||||||
h2, h6 {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
.text {
|
.text {
|
||||||
flex-direction: column;
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clicked {
|
.clicked {
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
import type { PageLoad } from './$types';
|
|
||||||
|
|
||||||
import { repositories } from '../data/api';
|
|
||||||
|
|
||||||
export const prerender = true;
|
|
||||||
|
|
||||||
const base = repositories.page_load_impl();
|
|
||||||
|
|
||||||
export const load: PageLoad = async ({ fetch }) => {
|
|
||||||
// The entire site may softlock if the user sets a bad API url if we don't do this.
|
|
||||||
try {
|
|
||||||
return await base({ fetch });
|
|
||||||
} catch(_) { }
|
|
||||||
}
|
|
||||||
@ -1,46 +1,236 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import { fly } from 'svelte/transition';
|
||||||
|
import { expoOut } from 'svelte/easing';
|
||||||
|
|
||||||
|
import LogoOption from '$lib/components/atoms/LogoOption.svelte';
|
||||||
|
import Button from '$lib/components/atoms/Button.svelte';
|
||||||
|
|
||||||
|
let selected: Array<string> = [];
|
||||||
|
let logos: Array<any> = [];
|
||||||
|
let transitionDirection = 5;
|
||||||
|
let logoAmount = 4;
|
||||||
|
let currentPage = 0;
|
||||||
|
let logoPages = 1;
|
||||||
|
let min = 0;
|
||||||
|
let max = logoAmount;
|
||||||
|
|
||||||
|
try {
|
||||||
|
currentPage = Number(localStorage.getItem('currentPage')) || 0;
|
||||||
|
selected = JSON.parse(localStorage.getItem('selected')) || [];
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
// you will never see shittier code tm
|
||||||
|
// will refactor later maybe idk
|
||||||
|
onMount(async () => {
|
||||||
|
const response = await fetch('https://poll.revanced.app/logos');
|
||||||
|
const json = await response.json();
|
||||||
|
|
||||||
|
// make better json
|
||||||
|
for (const name of Object.keys(json)) {
|
||||||
|
logos.push({ name, ...json[name] });
|
||||||
|
}
|
||||||
|
|
||||||
|
// randomize the order of the logos to minimize bias
|
||||||
|
for (let i = logos.length - 1; i > 0; i--) {
|
||||||
|
let j = Math.floor(Math.random() * i);
|
||||||
|
let k = logos[i];
|
||||||
|
logos[i] = logos[j];
|
||||||
|
logos[j] = k;
|
||||||
|
}
|
||||||
|
|
||||||
|
// min is the lowest index of the logos on a page, max is the highest index
|
||||||
|
// max will be determined based on min and the amount of logos we want on each page (4)
|
||||||
|
min = currentPage * logoAmount;
|
||||||
|
max = min + logoAmount;
|
||||||
|
|
||||||
|
logoPages = Math.floor(logos.length / logoAmount);
|
||||||
|
// update ui
|
||||||
|
logos = logos;
|
||||||
|
});
|
||||||
|
|
||||||
|
function previousPage() {
|
||||||
|
if (currentPage <= 0) return null;
|
||||||
|
currentPage--;
|
||||||
|
localStorage.setItem('currentPage', currentPage.toString());
|
||||||
|
|
||||||
|
min = currentPage * logoAmount;
|
||||||
|
max = min + logoAmount;
|
||||||
|
transitionDirection = -5;
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextPage() {
|
||||||
|
if (currentPage >= logoPages) return null;
|
||||||
|
currentPage++;
|
||||||
|
localStorage.setItem('currentPage', currentPage.toString());
|
||||||
|
|
||||||
|
min = currentPage * logoAmount;
|
||||||
|
max = min + logoAmount;
|
||||||
|
transitionDirection = 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearLogos() {
|
||||||
|
selected = [];
|
||||||
|
localStorage.setItem('selected', JSON.stringify(selected));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>ReVanced</title>
|
<title>ReVanced · Logo Poll</title>
|
||||||
<meta content="ReVanced" name="og:title" />
|
<meta content="ReVanced · Logo Poll" name="og:title" />
|
||||||
<meta content="ReVanced" name="twitter:title" />
|
<meta content="ReVanced · Logo Poll" name="twitter:title" />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="top-container">
|
||||||
|
<h3>ReVanced</h3>
|
||||||
|
<h1>{currentPage >= logoPages ? 'Review selected logos' : 'Select logos'}</h1>
|
||||||
|
<h2>
|
||||||
|
{selected.length}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1}
|
||||||
|
</h2>
|
||||||
|
<div class="top-custom-button-container">
|
||||||
|
<a href="https://hhh.com" target="_blank" tabindex="-1" rel="noreferrer">
|
||||||
|
<button>How does this work?</button>
|
||||||
|
</a>
|
||||||
|
<button on:click={clearLogos}>Clear All</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Wave />
|
<div class="options-grid">
|
||||||
|
{#each logos.slice(min, max) as { id, gdrive_direct_url, name, filename }}
|
||||||
|
{#key currentPage}
|
||||||
|
<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
||||||
|
<LogoOption
|
||||||
|
bind:selected
|
||||||
|
clicked={selected.includes(id)}
|
||||||
|
{id}
|
||||||
|
logo={gdrive_direct_url}
|
||||||
|
{name}
|
||||||
|
{filename}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{/key}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if currentPage >= logoPages}
|
||||||
|
{#each logos as { id, gdrive_direct_url, name, filename }}
|
||||||
|
{#if selected.includes(id)}
|
||||||
|
<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
||||||
|
<LogoOption
|
||||||
|
bind:selected
|
||||||
|
clicked={selected.includes(id)}
|
||||||
|
{id}
|
||||||
|
logo={gdrive_direct_url}
|
||||||
|
{name}
|
||||||
|
{filename}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if currentPage >= logoPages && !selected.length}
|
||||||
|
<div class="warning" in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
||||||
|
<h6>No logos have been selected.</h6>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="buttons-container">
|
||||||
|
<Button on:click={previousPage} unclickable={currentPage <= 0}>
|
||||||
|
Previous
|
||||||
|
</Button>
|
||||||
|
<Button kind="primary" on:click={nextPage} unclickable={currentPage >= logoPages}>
|
||||||
|
{currentPage >= logoPages ? 'Submit' : 'Next'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.wrap {
|
.options-grid {
|
||||||
margin-inline: auto;
|
display: grid;
|
||||||
width: min(87%, 100rem);
|
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||||
margin-top: 7rem;
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
.wrappezoid {
|
|
||||||
height: calc(100vh - 120px);
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--grey-four);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--grey-three);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--grey-three);
|
||||||
|
margin-bottom: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: right;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: var(--grey-six);
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-top: 1px solid var(--grey-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
padding: 1.75rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-custom-button-container {
|
||||||
|
margin-top: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 22rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
@media (max-width: 1700px) {
|
|
||||||
.wrappezoid {
|
@media screen and (max-width: 768px) {
|
||||||
justify-content: space-between;
|
h1 {
|
||||||
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
}
|
.options-grid {
|
||||||
@media (max-width: 1052px) {
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||||
#heroimg {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.wrappezoid {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: calc(65vh);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,239 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { fly } from 'svelte/transition';
|
|
||||||
import { expoOut } from 'svelte/easing';
|
|
||||||
|
|
||||||
import LogoOption from '$lib/components/atoms/LogoOption.svelte';
|
|
||||||
import Button from '$lib/components/atoms/Button.svelte';
|
|
||||||
|
|
||||||
let selected: Array<string> = [];
|
|
||||||
let logos: Array<any> = [];
|
|
||||||
let transitionDirection = 5;
|
|
||||||
let logoAmount = 4;
|
|
||||||
let currentPage = 0;
|
|
||||||
let logoPages = 1;
|
|
||||||
let min = 0;
|
|
||||||
let max = logoAmount;
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (localStorage.getItem('currentPage') !== null) {
|
|
||||||
currentPage = localStorage.getItem('currentPage');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (localStorage.getItem('selected') !== null) {
|
|
||||||
selected = JSON.parse(localStorage.getItem('selected'));
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
// you will never see shittier code tm
|
|
||||||
// will refactor later maybe idk
|
|
||||||
onMount(async () => {
|
|
||||||
const response = await fetch('https://poll.revanced.app/logos');
|
|
||||||
const json = await response.json();
|
|
||||||
|
|
||||||
// make better json
|
|
||||||
for (const name of Object.keys(json)) {
|
|
||||||
logos.push({ name, ...json[name] });
|
|
||||||
}
|
|
||||||
|
|
||||||
// randomize the order of the logos to minimize bias
|
|
||||||
for (let i = logos.length - 1; i > 0; i--) {
|
|
||||||
let j = Math.floor(Math.random() * i);
|
|
||||||
let k = logos[i];
|
|
||||||
logos[i] = logos[j];
|
|
||||||
logos[j] = k;
|
|
||||||
}
|
|
||||||
|
|
||||||
// min is the lowest index of the logos on a page, max is the highest index
|
|
||||||
// max will be determined based on min and the amount of logos we want on each page (4)
|
|
||||||
min = currentPage * logoAmount;
|
|
||||||
max = min + logoAmount;
|
|
||||||
|
|
||||||
logoPages = Math.floor(logos.length / logoAmount);
|
|
||||||
// update ui
|
|
||||||
logos = logos;
|
|
||||||
});
|
|
||||||
|
|
||||||
function previousPage() {
|
|
||||||
if (currentPage <= 0) return null;
|
|
||||||
currentPage--;
|
|
||||||
localStorage.setItem('currentPage', currentPage.toString());
|
|
||||||
|
|
||||||
min = currentPage * logoAmount;
|
|
||||||
max = min + logoAmount;
|
|
||||||
transitionDirection = -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextPage() {
|
|
||||||
if (currentPage >= logoPages) return null;
|
|
||||||
currentPage++;
|
|
||||||
localStorage.setItem('currentPage', currentPage.toString());
|
|
||||||
|
|
||||||
min = currentPage * logoAmount;
|
|
||||||
max = min + logoAmount;
|
|
||||||
transitionDirection = 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearLogos() {
|
|
||||||
selected = [];
|
|
||||||
localStorage.setItem('selected', JSON.stringify(selected));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<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">
|
|
||||||
<h3>ReVanced</h3>
|
|
||||||
<h1>{currentPage >= logoPages ? 'Review selected logos' : 'Select logos'}</h1>
|
|
||||||
<h2>
|
|
||||||
{selected.length}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1}
|
|
||||||
</h2>
|
|
||||||
<div class="top-custom-button-container">
|
|
||||||
<a href="https://hhh.com" target="_blank" rel="noreferrer">
|
|
||||||
<button>How does this work?</button>
|
|
||||||
</a>
|
|
||||||
<button on:click={clearLogos}>Clear All</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="options-grid">
|
|
||||||
{#each logos.slice(min, max) as { id, gdrive_direct_url, name, filename }}
|
|
||||||
{#key currentPage}
|
|
||||||
<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
|
||||||
<LogoOption
|
|
||||||
bind:selected
|
|
||||||
clicked={selected.includes(id)}
|
|
||||||
{id}
|
|
||||||
logo={gdrive_direct_url}
|
|
||||||
{name}
|
|
||||||
{filename}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{/key}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if currentPage >= logoPages}
|
|
||||||
{#each logos as { id, gdrive_direct_url, name, filename }}
|
|
||||||
{#if selected.includes(id)}
|
|
||||||
<span in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
|
||||||
<LogoOption
|
|
||||||
bind:selected
|
|
||||||
clicked={selected.includes(id)}
|
|
||||||
{id}
|
|
||||||
logo={gdrive_direct_url}
|
|
||||||
{name}
|
|
||||||
{filename}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if currentPage >= logoPages && !selected.length}
|
|
||||||
<div class="warning" in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
|
|
||||||
<h6>No logos have been selected.</h6>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="buttons-container">
|
|
||||||
<Button on:click={previousPage} unclickable={currentPage <= 0}>Previous</Button>
|
|
||||||
<Button kind="primary" on:click={nextPage} unclickable={currentPage >= logoPages}
|
|
||||||
>{currentPage >= logoPages ? 'Submit' : 'Next'}</Button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.options-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
color: var(--grey-four);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--grey-three);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--grey-three);
|
|
||||||
margin-bottom: -0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
justify-content: right;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 999;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: var(--grey-six);
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-top: 1px solid var(--grey-three);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
padding: 1.75rem;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-custom-button-container {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warning {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
}
|
|
||||||
.options-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import type { PageLoad } from './$types';
|
|
||||||
|
|
||||||
import { repositories } from '../../data/api';
|
|
||||||
|
|
||||||
export const load: PageLoad = repositories.page_load_impl();
|
|
||||||
Loading…
x
Reference in New Issue
Block a user