diff options
Diffstat (limited to 'src/routes')
| -rw-r--r-- | src/routes/tools/+page.svelte | 50 |
1 files changed, 26 insertions, 24 deletions
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte index 5114efa5..80777c98 100644 --- a/src/routes/tools/+page.svelte +++ b/src/routes/tools/+page.svelte @@ -5,6 +5,7 @@ import { browser } from '$app/environment'; import EpisodeDiscussionCollector from '$lib/Tools/EpisodeDiscussionCollector.svelte'; import { onMount } from 'svelte'; + import Error from '$lib/Error.svelte'; export let data; @@ -51,36 +52,37 @@ {:else if tool === 'episode_discussion_collector'} <EpisodeDiscussionCollector /> {:else if tool === 'todays_character_birthdays'} - <ul> - {#await todaysCharacterBirthdays()} - <li>Loading ...</li> - {:then birthdays} + {#await todaysCharacterBirthdays()} + Loading ... + {:then birthdays} + <div id="characters"> {#each birthdays as birthday} - <li> - <a href={`https://anilist.co/character/${birthday.id}`} target="_blank" - >{birthday.name.full}</a - > - </li> + <div> + <a href={`https://anilist.co/character/${birthday.id}`} target="_blank"> + {birthday.name.full} + <img src={birthday.image.large} alt="Character (Large)" class="character-image" /> + </a> + </div> {/each} - {:catch} - <li> - <p> - Characters could not be loaded. You might have been <a - href="https://en.wikipedia.org/wiki/Rate_limiting" - target="_blank">rate limited</a - >. - </p> - <p> - Try again in a few minutes. If the problem persists, please contact - <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList. - </p> - </li> - {/await} - </ul> + </div> + {:catch} + <Error type="Character" /> + {/await} {/if} <style> #wrapped { width: 980px; } + + #characters { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(8%, 1fr)); + grid-gap: 0; + grid-row-gap: 1rem; + } + + .character-image { + height: 20vh; + } </style> |