ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-11 11:54:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

modal width and formatting

Browse Source
This commit is contained in:
Ax333l 2023-02-08 18:02:58 +01:00
parent 5e3eadf941
commit c389a77dfe
No known key found for this signature in database
GPG Key ID: D2B4D85271127D23
3 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/atoms/Button.svelte
View File

@ -3,16 +3,16 @@
$: type = 'button-' + kind;
export let maxWidth = false;
export let icon = '';
export let alt = '';
export let alt = '';
export let unclickable = false;
</script>
<button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon}
<img src={icon} {alt} />
{/if}
<slot />
</button>
<button class={type} class:unclickable on:click style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon}
<img src={icon} {alt} />
{/if}
<slot />
</button>
<style>
button {
@ -29,7 +29,7 @@
.button-secondary {
min-width: max-content;
font-size: 1rem;
color: #FFD9E1;
color: #ffd9e1;
font-weight: 400;
border: none;
border-radius: 1200px;
@ -41,9 +41,9 @@
}
.button-primary {
background-color: #FFB1C5;
background-color: #ffb1c5;
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
color: #65002F;
color: #65002f;
}
button:hover {

2
src/lib/components/atoms/Dialogue.svelte
View File

@ -101,7 +101,7 @@
flex-direction: column;
gap: 2px;
z-index: 1001;
padding: 32px;
padding: 1rem;
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}

45
src/routes/poll/+page.svelte
View File

@ -109,10 +109,10 @@
transitionDirection = -5;
}
function preloadImage(url: string) {
var img=new Image();
img.src=url;
}
function preloadImage(url: string) {
var img = new Image();
img.src = url;
}
function nextPage() {
if (currentPage >= logoPages || submit) return null;
@ -121,14 +121,14 @@ function preloadImage(url: string) {
min = currentPage * logoAmount;
max = min + logoAmount;
if (currentPage < logoPages) {
const nextPage = currentPage + 1;
const nextMin = nextPage * logoAmount;
const nextMax = nextMin + logoAmount;
logos.slice(nextMin, nextMax).forEach(({ variants }) => {
variants.forEach(variant => preloadImage(variant.gdrive_direct_url));
});
}
if (currentPage < logoPages) {
const nextPage = currentPage + 1;
const nextMin = nextPage * logoAmount;
const nextMax = nextMin + logoAmount;
logos.slice(nextMin, nextMax).forEach(({ variants }) => {
variants.forEach((variant) => preloadImage(variant.gdrive_direct_url));
});
}
transitionDirection = 5;
}
@ -143,8 +143,8 @@ function preloadImage(url: string) {
}
async function submitBallot() {
const selected_ids = [...Object.values(selected)].flat();
console.log("selected ids", selected_ids);
const selected_ids = [...Object.values(selected)].flat();
console.log('selected ids', selected_ids);
const data = {
votes: logo_ids.map((id) => ({ cid: id, vote: selected_ids.includes(id) }))
};
@ -260,10 +260,12 @@ function preloadImage(url: string) {
<Modal bind:modalOpen>
<svelte:fragment slot="title">How does this work?</svelte:fragment>
<svelte:fragment slot="description">
<h6>
This is an approval voting system. Voters can choose any number of logos. The logo that is
selected the most wins. Note that you can only vote once!
</h6>
<div class="desc">
<h6>
This is an approval voting system. Voters can choose any number of logos. The logo that is
selected the most wins. Note that you can only vote once!
</h6>
</div>
</svelte:fragment>
<div class="buttons">
<Button
@ -298,6 +300,7 @@ function preloadImage(url: string) {
margin-bottom: -0.5rem;
}
/* "How does this work?" Modal */
h6 {
color: var(--white);
margin-bottom: 0.5rem;
@ -387,7 +390,11 @@ function preloadImage(url: string) {
}
.options-grid {
/* The magic number, teef */
grid-template-columns: repeat(auto-fill, minmax(16.628645896rem, 1fr))
grid-template-columns: repeat(auto-fill, minmax(16.628645896rem, 1fr));
}
.desc {
min-width: min(20rem, 90vw);
}
}
</style>