diff options
| author | Fuwn <[email protected]> | 2024-01-04 17:51:15 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-04 17:51:15 -0800 |
| commit | 4ae25847a2c13a703babb90443efe536250d8156 (patch) | |
| tree | 5682e97247df0c4c31c64e221ea21bdda5801f21 /src/lib/Tools/SequelSpy.svelte | |
| parent | feat(schedule): details (diff) | |
| download | due.moe-4ae25847a2c13a703babb90443efe536250d8156.tar.xz due.moe-4ae25847a2c13a703babb90443efe536250d8156.zip | |
refactor(tools): better cards
Diffstat (limited to 'src/lib/Tools/SequelSpy.svelte')
| -rw-r--r-- | src/lib/Tools/SequelSpy.svelte | 88 |
1 files changed, 45 insertions, 43 deletions
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte index c5d9c4a2..ea6f74d8 100644 --- a/src/lib/Tools/SequelSpy.svelte +++ b/src/lib/Tools/SequelSpy.svelte @@ -40,54 +40,56 @@ airingTime(prequel as unknown as Media, null); </script> -<p> - <select bind:value={season}> - <option value="WINTER">Winter</option> - <option value="SPRING">Spring</option> - <option value="SUMMER">Summer</option> - <option value="FALL">Fall</option> - </select> - <input type="number" bind:value={year} /> -</p> +<div class="card"> + <p> + <select bind:value={season}> + <option value="WINTER">Winter</option> + <option value="SPRING">Spring</option> + <option value="SUMMER">Summer</option> + <option value="FALL">Fall</option> + </select> + <input type="number" bind:value={year} /> + </p> -{#await currentPrequels} - <p>Loading prequels ... 50%</p> -{:then currentPrequels} - <ul> - {#each currentPrequels as prequel} - <li - on:mouseenter={() => { - const response = onMouseEnter(prequel); + {#await currentPrequels} + <p>Loading prequels ... 50%</p> + {:then currentPrequels} + <ul> + {#each currentPrequels as prequel} + <li + on:mouseenter={() => { + const response = onMouseEnter(prequel); - hovering = response.hovering; - hoveredMedia = response.media; - }} - on:mouseleave={() => { - const response = onMouseLeave(); + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mouseleave={() => { + const response = onMouseLeave(); - hovering = response.hovering; - hoveredMedia = response.media; - }} - on:mousemove={(e) => { - const response = onMouseMove(e); + hovering = response.hovering; + hoveredMedia = response.media; + }} + on:mousemove={(e) => { + const response = onMouseMove(e); - imageStyle = response.style; - }} - > - <a href={`https://anilist.co/anime/${prequel.id}`} target="_blank"> - <MediaTitle title={prequel.title} /> - </a> - <span style="opacity: 50%;">|</span> - {prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span> - {@html prequelAiringTime(prequel)} - </li> - {/each} - </ul> -{/await} + imageStyle = response.style; + }} + > + <a href={`https://anilist.co/anime/${prequel.id}`} target="_blank"> + <MediaTitle title={prequel.title} /> + </a> + <span style="opacity: 50%;">|</span> + {prequel.seen}<span style="opacity: 50%;">/{prequel.episodes}</span> + {@html prequelAiringTime(prequel)} + </li> + {/each} + </ul> + {/await} -<p /> + <p /> -The count ratio is the number of episodes you've seen of any direct prequels, and the total number -of episodes of all direct prequels. + The count ratio is the number of episodes you've seen of any direct prequels, and the total number + of episodes of all direct prequels. +</div> <HoverCover {hovering} {hoveredMedia} {imageStyle} /> |