john-okeefe/Anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

created a responsive pagination system

Browse Source
This commit is contained in:
John O'Keefe
2024-08-15 20:06:49 -04:00
parent eb7ad5d1a3
commit f9c6f4b827
2 changed files with 148 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/App.svelte
View File

@ -32,6 +32,7 @@
import {default as Modal} from "./modal/Modal.svelte"
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
import {onMount} from "svelte";
import Pagination from "./Pagination.svelte";
let isAniListLoggedIn: boolean
@ -87,14 +88,6 @@
}
})
})
function ChangeWatchListPage(newPage: number) {
GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
watchListPage.set(newPage)
aniListWatchlist.set(result)
aniListLoggedIn.set(true)
})
}
</script>
<Header/>
@ -104,50 +97,7 @@
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
<h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
<div class="mb-8">
<nav aria-label="Page navigation example">
<ul class="inline-flex -space-x-px text-base h-10">
{#if page === 1}
<li>
<button disabled
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(page-1)}
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
</li>
{/if}
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
{#if i+1 === page}
<li>
<button on:click={() => ChangeWatchListPage(i+1)}
class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(i+1)}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
</li>
{/if}
{/each}
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
<li>
<button disabled
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(page+1)}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
</li>
{/if}
</ul>
</nav>
</div>
<Pagination />
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each aniListWatchListLoaded.data.Page.mediaList as media}
@ -181,49 +131,7 @@
{/each}
</div>
<div class="mt-8">
<nav aria-label="Page navigation example">
<ul class="inline-flex -space-x-px text-base h-10">
{#if page === 1}
<li>
<button disabled
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Previous</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(page-1)}
class="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</button>
</li>
{/if}
{#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
{#if i+1 === page}
<li>
<button on:click={() => ChangeWatchListPage(i+1)}
class="flex items-center justify-center px-4 h-10 leading-tight border border-gray-300 bg-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{i+1}</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(i+1)}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{i+1}</button>
</li>
{/if}
{/each}
{#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
<li>
<button disabled
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 cursor-default">Next</button>
</li>
{:else}
<li>
<button on:click={() => ChangeWatchListPage(page+1)}
class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</button>
</li>
{/if}
</ul>
</nav>
</div>
<Pagination />
</div>
{/if}