diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 19 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 15 |
2 files changed, 31 insertions, 3 deletions
diff --git a/src/app.css b/src/app.css index d6e507e5..4ee2049d 100644 --- a/src/app.css +++ b/src/app.css @@ -110,6 +110,25 @@ button:active { transform: scale(0.975); } +input:disabled, +select:disabled, +button:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +input:disabled:hover, +select:disabled:hover, +button:disabled:hover { + background-color: var(--base0C); +} + +input:disabled:active, +select:disabled:active, +button:disabled:active { + transform: scale(1); +} + .small-button { transform: scale(0.875); } diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index e0ca15d5..91c95e72 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -22,6 +22,9 @@ let confirmDelete = 0; let selectedBadge: Badge | undefined = undefined; let loadError: string | null = null; + let badgeCount = 0; + + $: downloadDisabled = badgeCount > 20; type GroupedBadges = { [key: string]: Badge[] }; @@ -173,6 +176,8 @@ const groupBadges = (badges: Badge[]) => { const groupedBadges: GroupedBadges = {}; + badgeCount = badges.length; + badges.forEach((badge) => { if (!badge.category) badge.category = 'Uncategorised'; @@ -217,10 +222,14 @@ {editMode ? 'Disable' : 'Enable'} Edit Mode </button> • - <button on:click={() => screenshot()}>Download</button> + <button + disabled={downloadDisabled} + on:click={() => (downloadDisabled ? undefined : screenshot())}>Download</button + > • - <input type="checkbox" bind:checked={dark} /> Dark Mode - <input type="checkbox" bind:checked={transparent} /> Transparent Background + <input disabled={downloadDisabled} type="checkbox" bind:checked={dark} /> Dark Mode + <input disabled={downloadDisabled} type="checkbox" bind:checked={transparent} /> Transparent + Background {/if} {#if editMode && isOwner} |