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

refactor: properly disable buttons

Browse Source
This commit is contained in:
afn 2023-03-28 03:59:45 -04:00
parent f85989c083
commit c119d4a721
2 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,11 @@
export let maxWidth = false; export let maxWidth = false;
export let icon = ''; export let icon = '';
export let alt = ''; export let alt = '';
export let unclickable = false; export let disabled = false;
</script> </script>
<button class={type} class:unclickable on:click|stopPropagation style="width: {maxWidth ? '100%' : 'max-content'}"> <button class={type} {disabled} on:click|stopPropagation style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon} {#if icon}
<img src={icon} {alt} /> <img src={icon} {alt} />
{/if} {/if}
@ -22,7 +23,7 @@
transition: all 0.2s var(--bezier-one); transition: all 0.2s var(--bezier-one);
} }
.unclickable { button:disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.25; opacity: 0.25;
} }

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

@ -106,7 +106,6 @@
}); });
function previousPage() { function previousPage() {
if (currentPage <= 0 || submitted) return null;
currentPage--; currentPage--;
submit = false; submit = false;
transitionDirection = -5; transitionDirection = -5;
@ -114,14 +113,12 @@
} }
function nextPage() { function nextPage() {
if (currentPage >= logoPages || submitted) return null;
currentPage++; currentPage++;
transitionDirection = 5; transitionDirection = 5;
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
} }
function submitSelection() { function submitSelection() {
if (ui_selected_count < 1) return null;
submitModal = true; submitModal = true;
} }
@ -276,11 +273,11 @@
</Modal> </Modal>
</div> </div>
<div class="buttons-container"> <div class="buttons-container">
<Button on:click={previousPage} unclickable={currentPage <= 0 || submitted}>Previous</Button> <Button on:click={previousPage} disabled={currentPage <= 0 || submitted}>Previous</Button>
<Button <Button
kind="primary" kind="primary"
on:click={finalPage ? submitSelection : nextPage} on:click={finalPage ? submitSelection : nextPage}
unclickable={(finalPage && ui_selected_count < 1) || submitted} disabled={(finalPage && ui_selected_count < 1) || submitted}
> >
{finalPage ? 'Submit' : 'Next'} {finalPage ? 'Submit' : 'Next'}
</Button> </Button>
@ -415,6 +412,7 @@
.warning { .warning {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 2rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {