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

fix: revert roundabout and tweak dialogues

Browse Source
This commit is contained in:
afn
2023-03-16 17:19:27 -04:00
parent 8af94e8c3a
commit 175d77f107
4 changed files with 89 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,8 @@
button,
.button-secondary,
.button-circle {
.button-circle,
.button-text {
min-width: max-content;
font-size: 1rem;
color: #ffd9e1;
@@ -47,6 +48,12 @@
gap: 0.5rem;
}
.button-text {
background-color: transparent;
padding: 0;
color: #ef96ac;
}
.button-icon {
background-color: transparent;
height: 24px;
@@ -54,6 +61,7 @@
padding: 0;
}
.button-primary {
background-color: #ffb1c5;
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);

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

@@ -67,14 +67,13 @@
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
margin-bottom: 16px;
}
.title {
position: sticky;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
top: 0;
left: 0;

8
src/lib/components/atoms/LogoOption.svelte
View File

@@ -101,11 +101,6 @@
<div class="row" on:click={handleClick} on:keypress={handleClick}>
<!-- Screenreader compatibility does not make sense in this context. -->
<img src={current.gdrive_direct_url} alt="" />
{#if !hideDetails}
<div class="text">
<h2>{name}</h2>
</div>
{/if}
</div>
{#if !hideDetails}
<div class="actions">
@@ -146,6 +141,7 @@
.row {
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
gap: 1.5rem;
cursor: pointer;
@@ -160,7 +156,7 @@
border-radius: 0 0 16px 16px;
justify-content: space-between;
pointer-events: none;
}
}
.action-buttons {
display: flex;

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

@@ -16,7 +16,8 @@
[key: string]: string[];
}
let modalOpen = false;
let helpModal = false;
let clearModal = false;
let selected: Selected = {};
function calc_ui_selected_count(v: Selected) {
let n = 0;
@@ -41,8 +42,7 @@
let max = logoAmount;
let token = '';
let submit = false;
let allowReviewSelections = false;
$: finalPage = false;
$: finalPage = currentPage >= logoPages;
$: min = currentPage * logoAmount;
$: max = min + logoAmount;
@@ -100,56 +100,35 @@
// update ui
logos = logos;
if (location.hash !== '') {
try {
await exchange_token(location.hash.substring(1));
} catch (err) {
alert(`Could not exchange the token: ${err}`);
}
} else if (localStorage.getItem('killswitch') === null) {
await goto('/poll/unauthorized/');
} else {
alert('Warning: no token!');
}
// if (location.hash !== '') {
// try {
// await exchange_token(location.hash.substring(1));
// } catch (err) {
// alert(`Could not exchange the token: ${err}`);
// }
// } else if (localStorage.getItem('killswitch') === null) {
// await goto('/poll/unauthorized/');
// } else {
// alert('Warning: no token!');
// }
});
function previousPage() {
if (currentPage <= 0) {
if (allowReviewSelections) {
// If the current page is 0 and the user has reached the final page beforehand, go to the final page
currentPage = logoPages - 1;
} else {
// If the current page is 0 and the user has not reached the final page beforehand, return
return;
}
} else {
// If the current page is not 0, go to the previous page
currentPage--;
}
submit = false;
transitionDirection = -5;
}
function preloadImage(url: string) {
var img = new Image();
img.src = url;
}
function previousPage() {
if (currentPage <= 0) return null;
currentPage--;
submit = false;
transitionDirection = -5;
}
function nextPage() {
let nextPage = currentPage + 1;
// If the current page is the last page, set the current page to the first page
if (currentPage >= logoPages - 1) {
currentPage = 0;
} else {
currentPage++;
// If the current page is now the last page, allow review selections and set the current page to the first page
if (currentPage >= logoPages - 1) {
allowReviewSelections = true;
nextPage = 0;
}
}
if (currentPage >= logoPages || submit) return null;
currentPage++;
const nextMin = nextPage * logoAmount;
const nextMax = nextMin + logoAmount;
@@ -160,17 +139,6 @@
transitionDirection = 5;
}
function stopReview() {
finalPage = false;
submit = false;
}
function reviewSelections() {
if (allowReviewSelections) {
finalPage = true;
}
}
function submitSelection() {
if (ui_selected_count < 1) return null;
submit = true;
@@ -226,12 +194,12 @@
<h3>ReVanced</h3>
<h1>{finalPage ? 'Review selected logos' : 'Select logos'}</h1>
<h2>
{ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages}
{ui_selected_count}/{logos.length} selected · Page {currentPage + 1}/{logoPages + 1}
</h2>
</div>
<div class="top-custom-button-container">
<Button on:click={() => (modalOpen = !modalOpen)} kind="icon" icon={questionMark}></Button>
<Button on:click={clearLogos} kind="icon" icon={trash}></Button>
<Button on:click={() => (helpModal = !helpModal)} kind="icon" icon={questionMark} />
<Button on:click={() => (clearModal = !clearModal)} kind="icon" icon={trash} />
</div>
</div>
@@ -274,38 +242,30 @@
{#if submit}
<Modal modalOpen={true}>
<svelte:fragment slot="title">Submit</svelte:fragment>
<div style="text-align: center;">
{#await submitBallot()}
<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
Submitting your vote...
</h6>
{:then _}
<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
Your vote has been casted.
</h6>
{:catch err}
<h6 in:fly={{ x: transitionDirection, easing: expoOut, duration: 1000 }}>
An error occured. Try again later.
<br />
{err}
</h6>
{/await}
</div>
<svelte:fragment slot="description">
<div>
{#await submitBallot()}
<h6>
Submitting your vote...
</h6>
{:then _}
<h6>
Your vote has been casted.
</h6>
{:catch err}
<h6>
An error occurred. Try again later.
<br />
{err}
</h6>
{/await}
</div>
</svelte:fragment>
</Modal>
{/if}
</div>
<div class="buttons-container">
{#if !finalPage}
<Button on:click={previousPage} unclickable={currentPage <= 0 && !allowReviewSelections}
>Previous</Button
>
{/if}
<Button
on:click={finalPage ? stopReview : reviewSelections}
unclickable={!allowReviewSelections}
>
{finalPage ? 'Go back' : 'Preview selection'}</Button
>
<Button on:click={previousPage} unclickable={currentPage <= 0}>Previous</Button>
<Button
kind="primary"
on:click={finalPage ? submitSelection : nextPage}
@@ -316,7 +276,7 @@
</div>
</main>
<Modal bind:modalOpen>
<Modal bind:modalOpen={helpModal}>
<svelte:fragment slot="title">How does this work?</svelte:fragment>
<svelte:fragment slot="description">
<div class="desc">
@@ -328,9 +288,35 @@
</svelte:fragment>
<div class="buttons">
<Button
kind="text"
on:click={() => {
modalOpen = false;
}}>Understood</Button
helpModal = false;
}}>OK</Button
>
</div>
</Modal>
<Modal bind:modalOpen={clearModal}>
<svelte:fragment slot="description">
<div class="desc">
<h6>
Deselect all logos?
</h6>
</div>
</svelte:fragment>
<div class="buttons">
<Button
kind="text"
on:click={() => {
clearModal = false;
}}>Cancel</Button
>
<Button
kind="text"
on:click={() => {
clearModal = false;
clearLogos();
}}>OK</Button
>
</div>
</Modal>
@@ -382,6 +368,7 @@
.buttons {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
}
@media screen and (orientation: landscape) and (min-width: 1500px) and (min-height: 950px) {
@@ -420,7 +407,7 @@
justify-content: space-between;
}
.top-container-text{
.top-container-text {
display: flex;
flex-direction: column;
gap: 0.5rem;