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

made modal usable from header and body

Browse Source
This commit is contained in:
John O'Keefe 2024-07-26 16:50:42 -04:00
parent 70558a4128
commit e3cde57f62
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/App.svelte
View File

@ -1,10 +1,7 @@
<script lang="ts"> <script lang="ts">
import {GetAniListSingleItemAndOpenModal, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte"; import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
import { import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
AniListSearch, import {MediaListSort} from "./anilist/types/AniListTypes";
GetAniListUserWatchingList
} from "../wailsjs/go/main/App";
import {type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType" import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
import Header from "./Header.svelte"; import Header from "./Header.svelte";
import {Modal} from "flowbite-svelte"; import {Modal} from "flowbite-svelte";
@ -38,7 +35,7 @@
</script> </script>
<Header /> <Header/>
<main> <main>
@ -54,29 +51,32 @@
<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"> <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 aniListWatchlist.data.Page.mediaList as media} {#each aniListWatchlist.data.Page.mediaList as media}
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group"> <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
<!-- <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">--> <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
<div class="justify-center rounded-lg bg-gray-200"> <img class="rounded-lg" src={media.media.coverImage.large} alt={
<img src={media.media.coverImage.large} alt="anime cover"/>
</div>
<h3 class="mt-4 text-sm text-white-700">{
media.media.title.english === "" ? media.media.title.english === "" ?
media.media.title.romaji : media.media.title.romaji :
media.media.title.english media.media.title.english
}</h3> }/>
<p class="mt-1 text-lg font-medium text-white-900">{media.progress} <h3 class="mt-4 text-sm text-white-700">{
/ {media.media.nextAiringEpisode.episode !== 0 ? media.media.title.english === "" ?
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p> media.media.title.romaji :
{#if media.media.episodes > 0} media.media.title.english
<p class="mt-1 text-lg font-medium text-white-900">Total }</h3>
Episodes: {media.media.episodes}</p> <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
{/if} / {media.media.nextAiringEpisode.episode !== 0 ?
</button> 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}
</button>
</div>
{/each} {/each}
</div> </div>
</div> </div>
{/if} {/if}
<Modal title={$title} bind:open={$anilistModal} {size} autoclose> <Modal title={$title} bind:open={$anilistModal} {size} autoclose>
<ChangeDataDialogue /> <ChangeDataDialogue/>
</Modal> </Modal>
</main> </main>