diff options
Diffstat (limited to 'src/lib/List/Anime/CleanAnimeList.svelte')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 82 |
1 files changed, 44 insertions, 38 deletions
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 86e2c9c1..04cdccf3 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -16,6 +16,7 @@ import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte'; import { browser } from '$app/environment'; import identity from '$stores/identity'; + import Tooltip from './Tooltip.svelte'; export let media: Media[]; export let title: any; @@ -89,52 +90,57 @@ {@const progress = (anime.mediaListEntry || { progress: 0 }).progress} {#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1} - <div - class="cover-card" - title={anime ? mediaTitle(anime) : undefined} - use:tooltip + <Tooltip id={`anime-${anime.id}`} - data-tooltipPin={`anime-${anime.id}`} + tooltipPin={`anime-${anime.id}`} + content={anime ? mediaTitle(anime) : ''} > - <a href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank"> - <img class="cover" src={anime.coverImage.extraLarge} alt="Cover" /> - </a> + <div class="cover-card"> + <a + href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} + target="_blank" + > + <img class="cover" src={anime.coverImage.extraLarge} alt="Cover" /> + </a> - <div class="cover-title"> - {#if !upcoming && !notYetReleased} - {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)} - <button - class={`button-square button-action ${pendingUpdate === anime.id ? 'opaque' : ''}`} - style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''} - on:click={() => { - if (pendingUpdate !== anime.id) { - lastUpdatedMedia = anime.id; - pendingUpdate = anime.id; + <div class="cover-title"> + {#if !upcoming && !notYetReleased} + {pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)} + <button + class={`button-square button-action ${ + pendingUpdate === anime.id ? 'opaque' : '' + }`} + style={pendingUpdate === anime.id ? 'pointer-events: none;' : ''} + on:click={() => { + if (pendingUpdate !== anime.id) { + lastUpdatedMedia = anime.id; + pendingUpdate = anime.id; - incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => { - const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry; + incrementMediaProgress(anime.id, anime.mediaListEntry?.progress, user, () => { + const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry; - if (mediaListEntry) mediaListEntry.progress = progress + 1; + if (mediaListEntry) mediaListEntry.progress = progress + 1; - previousAnimeList = media; - animeLists = cleanCache(user, $identity); - pendingUpdate = null; - }); - } - }}>+</button - > - {#if !completed} - [{anime.nextAiringEpisode?.episode === -1 - ? '?' - : (anime.nextAiringEpisode?.episode || 1) - 1}] - <br /> - <AiringTime originalAnime={anime} {subsPlease} /> + previousAnimeList = media; + animeLists = cleanCache(user, $identity); + pendingUpdate = null; + }); + } + }}>+</button + > + {#if !completed} + [{anime.nextAiringEpisode?.episode === -1 + ? '?' + : (anime.nextAiringEpisode?.episode || 1) - 1}] + <br /> + <AiringTime originalAnime={anime} {subsPlease} /> + {/if} + {:else} + <AiringTime originalAnime={anime} {subsPlease} upcoming={true} /> {/if} - {:else} - <AiringTime originalAnime={anime} {subsPlease} upcoming={true} /> - {/if} + </div> </div> - </div> + </Tooltip> {/if} {/each} </div> |