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;
|
||||
}
|
||||
console.log(selected);
|
||||
localStorage.setItem("selected", JSON.stringify(selected));
|
||||
localStorage.setItem('selected', JSON.stringify(selected));
|
||||
};
|
||||
</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} />
|
||||
<span class="text">
|
||||
<div class="text">
|
||||
<h2>{name}</h2>
|
||||
<h6>{filename}</h6>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
||||
.option {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
padding: 1.25rem;
|
||||
width: 100%;
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
background-color: var(--grey-six);
|
||||
border: 1px solid var(--grey-three);
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
h2, h6 {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
.text {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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>
|
||||
import Wave from '$lib/components/atoms/Wave.svelte';
|
||||
<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 {
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
<title>ReVanced</title>
|
||||
<meta content="ReVanced" name="og:title" />
|
||||
<meta content="ReVanced" 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">
|
||||
<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>
|
||||
.wrap {
|
||||
margin-inline: auto;
|
||||
width: min(87%, 100rem);
|
||||
margin-top: 7rem;
|
||||
.options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
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;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 22rem;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.wrappezoid {
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1052px) {
|
||||
#heroimg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.wrappezoid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(65vh);
|
||||
.options-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</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