aziz/AstralRinth
0
0
Fork 0
forked from xxxOFFxxx/AstralRinth
Code Pull Requests Activity

Run prettier

Browse Source
This commit is contained in:
venashial
2022-06-04 00:46:23 -07:00
parent 597c071c3d
commit c9ec9f14de
49 changed files with 1515 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/package/components/Pagination.svelte
View File

@@ -1,77 +1,75 @@
<script lang="ts">
// TODO: Fix mobile support, currently just cuts off buttons
// TODO: Fix mobile support, currently just cuts off buttons
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right';
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left';
import IconMinus from 'virtual:icons/heroicons-outline/minus';
import Button from './Button.svelte';
import { createEventDispatcher } from 'svelte';
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
import IconMinus from 'virtual:icons/heroicons-outline/minus'
import Button from './Button.svelte'
import { createEventDispatcher } from 'svelte'
export let page: number;
export let count: number;
export let page: number
export let count: number
$: options =
count > 4
? page + 3 >= count
? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
: page > 4
? [1, '-', page - 1, page, page + 1, '-', count]
: [1, 2, 3, 4, 5, '-', count]
: Array.from({ length: count }, (_, i) => i + 1);
$: options =
count > 4
? page + 3 >= count
? [1, '-', count - 4, count - 3, count - 2, count - 1, count]
: page > 4
? [1, '-', page - 1, page, page + 1, '-', count]
: [1, 2, 3, 4, 5, '-', count]
: Array.from({ length: count }, (_, i) => i + 1)
const dispatch = createEventDispatcher();
const dispatch = createEventDispatcher()
</script>
{#if count > 1}
<div class="pagination">
<Button
color="raised"
on:click={() => dispatch('change', page - 1)}
disabled={page <= 1}
title="Last page"
><IconArrowLeft height="20px" />
</Button>
{#each options as option}
{#if option === '-'}
<IconMinus class="pagination__dash" />
{:else}
<Button
color={option === page ? 'primary' : 'raised'}
on:click={() => dispatch('change', option)}>{option}</Button
>
{/if}
{/each}
<Button
color="raised"
on:click={() => dispatch('change', page + 1)}
disabled={page >= count}
title="Next page"
>
<IconArrowRight height="20px" />
</Button>
</div>
<div class="pagination">
<Button
color="raised"
on:click={() => dispatch('change', page - 1)}
disabled={page <= 1}
title="Last page"
><IconArrowLeft height="20px" />
</Button>
{#each options as option}
{#if option === '-'}
<IconMinus class="pagination__dash" />
{:else}
<Button
color={option === page ? 'primary' : 'raised'}
on:click={() => dispatch('change', option)}>{option}</Button>
{/if}
{/each}
<Button
color="raised"
on:click={() => dispatch('change', page + 1)}
disabled={page >= count}
title="Next page">
<IconArrowRight height="20px" />
</Button>
</div>
{/if}
<style lang="postcss">
.pagination {
align-self: center;
display: flex;
grid-gap: 0.5rem;
align-items: center;
.pagination {
align-self: center;
display: flex;
grid-gap: 0.5rem;
align-items: center;
:global(&__dash) {
margin: 0 0.5rem;
width: 1rem;
height: 1rem;
}
:global(&__dash) {
margin: 0 0.5rem;
width: 1rem;
height: 1rem;
}
@media (width <= 500px) {
grid-gap: 0.25rem;
@media (width <= 500px) {
grid-gap: 0.25rem;
:global(> *:nth-child(4)),
:global(> *:nth-child(6)) {
display: none;
}
}
}
:global(> *:nth-child(4)),
:global(> *:nth-child(6)) {
display: none;
}
}
}
</style>