John O'Keefe
35e93c0ca9
- Add explicit width (230px) and height (330px) to media cover images - Apply object-cover class to maintain aspect ratio and prevent distortion - Ensures uniform sizing across all media cover images in the watch list This change improves visual consistency in the UI by standardizing the display dimensions of anime/manga cover images.
100 lines
3.5 KiB
Svelte
100 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
aniListLoggedIn,
|
|
aniListWatchlist,
|
|
GetAnimeSingleItem,
|
|
loading,
|
|
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
|
import { push } from "svelte-spa-router";
|
|
import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
|
|
import { Rating } from "flowbite-svelte";
|
|
import loader from "../helperFunctions/loader";
|
|
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
|
|
|
let isAniListLoggedIn: boolean;
|
|
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
|
|
|
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
|
|
aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
|
|
</script>
|
|
|
|
<div>
|
|
{#if isAniListLoggedIn}
|
|
<div
|
|
class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center"
|
|
>
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
|
<button
|
|
type="button"
|
|
class="py-2 px-4 bg-gray-700 rounded-lg"
|
|
on:click={async () => {
|
|
loading.set(true);
|
|
await CheckIfAniListLoggedInAndLoadWatchList();
|
|
loading.set(false);
|
|
}}
|
|
>
|
|
Refresh WatchList
|
|
</button>
|
|
</div>
|
|
|
|
<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}
|
|
<div
|
|
use:loader={loading}
|
|
class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7"
|
|
>
|
|
<div class="flex flex-col items-center group">
|
|
<button
|
|
on:click={() => {
|
|
push(`#/anime/${media.media.id}`);
|
|
// loading.set(true)
|
|
// GetAniListSingleItem(media.media.id, true).then(() => {
|
|
// loading.set(false)
|
|
//
|
|
// })
|
|
}}
|
|
>
|
|
<img
|
|
class="rounded-lg w-[230px] h-[330px] object-cover"
|
|
src={media.media.coverImage.large}
|
|
alt={media.media.title.english === ""
|
|
? media.media.title.romaji
|
|
: media.media.title.english}
|
|
/>
|
|
</button>
|
|
<Rating
|
|
id="anime-rating"
|
|
total={5}
|
|
size={35}
|
|
rating={media.score / 2.0}
|
|
/>
|
|
<button
|
|
class="mt-4 text-md font-semibold text-white-700"
|
|
on:click={() => GetAnimeSingleItem(media.media.id, true)}
|
|
>
|
|
{media.media.title.english === ""
|
|
? media.media.title.romaji
|
|
: media.media.title.english}
|
|
</button>
|
|
<p class="mt-1 text-lg font-medium text-white-900">
|
|
{media.progress}
|
|
/ {media.media.nextAiringEpisode.episode !== 0
|
|
? media.media.nextAiringEpisode.episode - 1
|
|
: media.media.episodes}
|
|
</p>
|
|
{#if media.media.episodes > 0}
|
|
<p class="mt-1 text-lg font-medium text-white-900">
|
|
Total Episodes: {media.media.episodes}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|