From 2c2f92568cbd6d4f483f814fa8cead9620549764 Mon Sep 17 00:00:00 2001 From: Fuwn Date: Wed, 17 Apr 2024 19:01:43 -0700 Subject: feat(manga): cover mode --- src/lib/List/Anime/CleanAnimeList.svelte | 54 +--------- src/lib/List/Anime/PlaceholderList.svelte | 10 +- src/lib/List/Manga/CleanMangaList.svelte | 155 +++++++++++++++++++-------- src/lib/List/covers.css | 48 +++++++++ src/lib/Media/Anime/Airing/AiringTime.svelte | 4 +- src/lib/Media/Anime/Airing/time.ts | 4 +- src/lib/Settings/Categories/Display.svelte | 33 +++--- 7 files changed, 184 insertions(+), 124 deletions(-) create mode 100644 src/lib/List/covers.css (limited to 'src/lib') diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index 402e22d9..eda46d28 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -16,6 +16,7 @@ import { browser } from '$app/environment'; import identity from '$stores/identity'; import Tooltip from './Tooltip.svelte'; + import '../covers.css'; export let media: Media[]; export let title: any; @@ -80,7 +81,7 @@ {/if} -{#if $settings.displayCoverMode} +{#if $settings.displayCoverModeAnime}
{/if} - - diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte index c67a6182..5d7eb908 100644 --- a/src/lib/List/Anime/PlaceholderList.svelte +++ b/src/lib/List/Anime/PlaceholderList.svelte @@ -13,9 +13,9 @@ 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 @@ {/if} -
    - {#each media as manga} - {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} +{#if $settings.displayCoverModeManga} +
    + {#each media as manga} + {@const progress = (manga.mediaListEntry || { progress: 0 }).progress} - {#if progress !== manga.episodes} -
  • + {#if progress !== manga.episodes} `} pin={`manga-${manga.id}`} - pinPosition="left" - disable={!$settings.displayHoverCover} + content={manga ? mediaTitle(manga) : ''} > - - + - - - - {#if $settings.displaySocialButton} - [S] - {/if} - | - {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} - /{manga.chapters || '?'} - {/if} - - {#if due || Math.floor(manga.episodes) < manga.chapters} - [{manga.episodes || '?'}] - {#await volumeCount(manga) then volumes} - {@const volumeProgress = manga.mediaListEntry?.progressVolumes} + Cover + + +
    + {pendingUpdate === manga.id ? progress + 1 : progress}{#if !due} + /{manga.chapters || '?'} + {/if} + + {#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} - - Vol. {volumeProgress} → {volumes} - + {#if volumes !== null && (volumeProgress || 0) < volumes} + + Vol. {volumeProgress} → {volumes} + + {/if} + {/await} {/if} - {/await} - {/if} +
    +
    • - - {/if} - {/each} -
+ {/if} + {/each} +
+{:else} + +{/if} diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css new file mode 100644 index 00000000..2ecdcf02 --- /dev/null +++ b/src/lib/List/covers.css @@ -0,0 +1,48 @@ +.covers { + display: grid; + justify-content: center; + gap: 1em 0.5em; + margin-top: 0.5rem; +} + +.cover { + background-size: cover; + background-position: center; + border-radius: 8px; +} + +.cover-title { + text-align: center; + margin: 0.25rem; +} + +.cover-card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: transform 0.3s ease; + box-sizing: border-box; + display: inline-block; + padding: 0.1em; + margin: -0.1em; + box-sizing: content-box; +} + +.cover-card:hover { + transform: scale(1.1); + position: relative; + z-index: 2; + transition: transform 0.3s ease; +} + +.entry::after { + content: ''; + display: table; + clear: both; +} + +.countdown { + white-space: nowrap; + float: right; +} diff --git a/src/lib/Media/Anime/Airing/AiringTime.svelte b/src/lib/Media/Anime/Airing/AiringTime.svelte index 162a5c15..72ce2219 100644 --- a/src/lib/Media/Anime/Airing/AiringTime.svelte +++ b/src/lib/Media/Anime/Airing/AiringTime.svelte @@ -124,12 +124,12 @@ {nextEpisode}{#if anime.episodes !== null}/{anime.episodes} {/if} in {timeFrame} - {#if few && $settings.displayCoverMode}
{/if}{few ? `(${time})` : ''} + {#if few && $settings.displayCoverModeAnime}
{/if}{few ? `(${time})` : ''} {:else} - {nextEpisode} in {#if few && $settings.displayCoverMode}
{/if}{#if few} + {nextEpisode} in {#if few && $settings.displayCoverModeAnime}
{/if}{#if few} {timeFrame} {:else}{timeFrame}{/if} {few ? `(${time})` : ''} diff --git a/src/lib/Media/Anime/Airing/time.ts b/src/lib/Media/Anime/Airing/time.ts index 5bbce0bc..dcaac944 100644 --- a/src/lib/Media/Anime/Airing/time.ts +++ b/src/lib/Media/Anime/Airing/time.ts @@ -110,11 +110,11 @@ export const airingTime = ( return `${nextEpisode}${totalEpisodes( anime )} in ${timeFrame} ${ - few && get(settings).displayCoverMode ? '
' : '' + few && get(settings).displayCoverModeAnime ? '
' : '' }${few ? `(${time})` : ''}`; else return `${nextEpisode} in ${ - few && get(settings).displayCoverMode ? '
' : '' + few && get(settings).displayCoverModeAnime ? '
' : '' }${few ? '' : ''}${timeFrame}${few ? '' : ''} ${few ? `(${time})` : ''}`; } diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte index e3c0159e..cd69dd36 100644 --- a/src/lib/Settings/Categories/Display.svelte +++ b/src/lib/Settings/Categories/Display.svelte @@ -220,22 +220,11 @@

-{$locale().settings.display.categories.media.title}
- - - -{#if $settings.displayCoverMode} -   +Show lists with media covers instead of text
+ + +{#if $settings.displayCoverModeAnime || $settings.displayCoverModeManga} +
{/if} + +

+ +{$locale().settings.display.categories.media.title}
+ +