blob: 685cae7251a892cf0a0f17770db5d4c94d78b3af (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script lang="ts">
import { filterRelations, type Media } from '$lib/Data/AniList/media';
import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
import { outboundLink } from '$lib/Media/links';
import settings from '$stores/settings';
export let mediaListUnchecked: Media[];
const mediaList = mediaListUnchecked.filter(
(media) => media.mediaListEntry?.status === 'COMPLETED'
);
</script>
<ol class="media-list">
{#each filterRelations(mediaList) as { media, unwatchedRelations }}
<a href={outboundLink(media, 'anime', $settings.displayOutboundLinksTo)} target="_blank">
<MediaTitleDisplay title={media.title} />
</a>
<span class="opaque">
({media.startDate.year})
</span>
<ol class="unwatched-relations-list">
{#each unwatchedRelations as relation}
<li>
<a
href={outboundLink(relation.node, 'anime', $settings.displayOutboundLinksTo)}
target="_blank"
>
<MediaTitleDisplay title={relation.node.title} />
</a>
<span class="opaque">
({relation.node.startDate.year})
</span>
</li>
{/each}
</ol>
{/each}
</ol>
<style>
.media-list li {
margin-bottom: 1rem;
}
.unwatched-relations-list li:not(:last-child) {
margin-bottom: 0 !important;
}
</style>
|