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

refactor: use svelte element in button

Browse Source
This commit is contained in:
afn 2022-12-21 18:27:57 -05:00
parent 8d73663ae3
commit 6c0d95baa2
3 changed files with 23 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
<script> <script>
export let kind = 'secondary'; export let kind = 'secondary';
$: type = 'button-' + kind; $: type = 'button-' + kind;
export let maxWidth = false;
export let icon = ''; export let icon = '';
export let href = ''; export let href = '';
export let capitalize = false; export let capitalize = false;
@ -9,23 +8,18 @@
</script> </script>
<button on:click> <button on:click>
{#if href} <svelte:element
<a {href} {target}> this={href ? 'a' : 'div'}
<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}"> {href}
{target}
class={type}
class:capitalize
>
{#if icon} {#if icon}
<img src="../icons/{icon}.svg" alt={icon} /> <img src="../icons/{icon}.svg" alt={icon} />
{/if} {/if}
<slot /> <slot />
</div> </svelte:element>
</a>
{:else}
<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}">
{#if icon}
<img src="../icons/{icon}.svg" alt={icon} />
{/if}
<slot />
</div>
{/if}
</button> </button>
<style> <style>
@ -34,21 +28,22 @@
background-color: transparent; background-color: transparent;
} }
a {
text-decoration: none;
}
div, a,
.button-secondary { div {
min-width: max-content; min-width: max-content;
min-height: 52px; min-height: 57px;
font-size: 0.9rem; font-size: 0.9rem;
text-decoration: none;
color: var(--white); color: var(--white);
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
display: block; display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
cursor: pointer; cursor: pointer;
background-color: var(--grey-two); background-color: var(--grey-two);
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one); transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
@ -72,14 +67,6 @@
filter: brightness(85%); filter: brightness(85%);
} }
div,
.button-secondary {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
img { img {
height: 25px; height: 25px;
} }

6
src/lib/components/organisms/Hero.svelte
View File

@ -13,10 +13,8 @@
</h4> </h4>
<div class="hero-buttons"> <div class="hero-buttons">
<Button icon="download" kind="primary" capitalize={true} href="download" <Button icon="download" kind="primary" capitalize href="download">Download Manager</Button>
>Download Manager</Button <Button icon="docs" href="patches" capitalize>View patches</Button>
>
<Button icon="docs" href="patches" capitalize={true}>View patches</Button>
</div> </div>
</div> </div>
</section> </section>

2
src/routes/patches/+page.svelte
View File

@ -68,7 +68,7 @@
<TreeMenu> <TreeMenu>
<!-- Must bind both variables: we get searchTerm from the text input, --> <!-- Must bind both variables: we get searchTerm from the text input, -->
<!-- and searchTermFiltered gets cleared with the clear button --> <!-- and searchTermFiltered gets cleared with the clear button -->
<Search bind:searchTerm bind:searchTermFiltered title="Search patches" sticky={true} on:keyup={debounce} /> <Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
<span class="packages"> <span class="packages">
{#each packages as pkg} {#each packages as pkg}
<TreeMenuButton bind:selectedPkg name={pkg} /> <TreeMenuButton bind:selectedPkg name={pkg} />