diff options
Diffstat (limited to 'src/lib/List/Manga')
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 155 |
1 files changed, 108 insertions, 47 deletions
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index 45eca0c3..9ac3f8c6 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -13,6 +13,8 @@ import { browser } from '$app/environment'; import proxy from '$lib/Utility/proxy'; import Tooltip from '../Anime/Tooltip.svelte'; + import '../covers.css'; + import { mediaTitle } from '../mediaTitle'; export let media: Media[]; export let cleanCache: () => void; @@ -98,59 +100,118 @@ </span> {/if} -<ul> - {#each media as manga} - {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} +{#if $settings.displayCoverModeManga} + <div + class="covers" + style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`} + > + {#each media as manga} + {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} - {#if progress !== manga.episodes} - <li class="entry"> + {#if progress !== manga.episodes} <Tooltip id={`manga-${manga.id}`} - content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`} pin={`manga-${manga.id}`} - pinPosition="left" - disable={!$settings.displayHoverCover} + content={manga ? mediaTitle(manga) : ''} > - <a href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank"> - <span - style={lastUpdatedMedia === manga.id && manga.chapters !== progress - ? 'color: lightcoral' - : ''} + <div class="cover-card"> + <a + href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} + target="_blank" > - <MediaTitle title={manga.title} /> - </span> - </a> - {#if $settings.displaySocialButton} - [<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>] - {/if} - <span class="opaque">|</span> - {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} - <span class="opaque">/{manga.chapters || '?'}</span> - {/if} - <button - class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} - style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} - on:click={() => - pendingUpdate === manga.id - ? null - : updateMedia(manga.id, manga.mediaListEntry?.progress, media)} - > - + - </button> - {#if due || Math.floor(manga.episodes) < manga.chapters} - [{manga.episodes || '?'}] - {#await volumeCount(manga) then volumes} - {@const volumeProgress = manga.mediaListEntry?.progressVolumes} + <img class="cover" src={manga.coverImage.extraLarge} alt="Cover" /> + </a> + + <div class="cover-title"> + {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} + <span class="opaque">/{manga.chapters || '?'}</span> + {/if} + <button + class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} + style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} + on:click={() => + pendingUpdate === manga.id + ? null + : updateMedia(manga.id, manga.mediaListEntry?.progress, media)} + > + + + </button> + {#if due || Math.floor(manga.episodes) < manga.chapters} + [{manga.episodes || '?'}] + {#await volumeCount(manga) then volumes} + {@const volumeProgress = manga.mediaListEntry?.progressVolumes} - {#if volumes !== null && (volumeProgress || 0) < volumes} - <span style="color: lightcoral;"> - Vol. {volumeProgress} → {volumes} - </span> + {#if volumes !== null && (volumeProgress || 0) < volumes} + <span style="color: lightcoral;"> + Vol. {volumeProgress} → {volumes} + </span> + {/if} + {/await} {/if} - {/await} - {/if} + </div> + </div> </Tooltip> - </li> - {/if} - {/each} -</ul> + {/if} + {/each} + </div> +{:else} + <ul> + {#each media as manga} + {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} + + {#if progress !== manga.episodes} + <li class="entry"> + <Tooltip + id={`manga-${manga.id}`} + content={`<img src="${manga.coverImage.extraLarge}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`} + pin={`manga-${manga.id}`} + pinPosition="left" + disable={!$settings.displayHoverCover} + > + <a + href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} + target="_blank" + > + <span + style={lastUpdatedMedia === manga.id && manga.chapters !== progress + ? 'color: lightcoral' + : ''} + > + <MediaTitle title={manga.title} /> + </span> + </a> + {#if $settings.displaySocialButton} + [<a href={`https://anilist.co/manga/${manga.id}/social`} target="_blank">S</a>] + {/if} + <span class="opaque">|</span> + {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} + <span class="opaque">/{manga.chapters || '?'}</span> + {/if} + <button + class={`button-square button-action ${pendingUpdate === manga.id ? 'opaque' : ''}`} + style={pendingUpdate === manga.id ? 'pointer-events: none;' : ''} + on:click={() => + pendingUpdate === manga.id + ? null + : updateMedia(manga.id, manga.mediaListEntry?.progress, media)} + > + + + </button> + {#if due || Math.floor(manga.episodes) < manga.chapters} + [{manga.episodes || '?'}] + {#await volumeCount(manga) then volumes} + {@const volumeProgress = manga.mediaListEntry?.progressVolumes} + + {#if volumes !== null && (volumeProgress || 0) < volumes} + <span style="color: lightcoral;"> + Vol. {volumeProgress} → {volumes} + </span> + {/if} + {/await} + {/if} + </Tooltip> + </li> + {/if} + {/each} + </ul> +{/if} |