diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/Data/AniList/media.ts | 3 | ||||
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 10 | ||||
| -rw-r--r-- | src/lib/List/Manga/CleanMangaList.svelte | 10 | ||||
| -rw-r--r-- | src/lib/List/covers.css | 18 | ||||
| -rw-r--r-- | src/lib/Settings/Categories/Display.svelte | 1 |
5 files changed, 39 insertions, 3 deletions
diff --git a/src/lib/Data/AniList/media.ts b/src/lib/Data/AniList/media.ts index aea72f8e..17b428cd 100644 --- a/src/lib/Data/AniList/media.ts +++ b/src/lib/Data/AniList/media.ts @@ -74,6 +74,7 @@ export interface Media { }[]; genres: string[]; season: 'WINTER' | 'SPRING' | 'SUMMER' | 'FALL'; + isAdult: boolean; } export const flattenLists = ( @@ -126,7 +127,7 @@ const collectionQueryTemplate = (type: Type, userId: number, includeCompleted: b lists { name entries { media { - id idMal status type episodes chapters format duration synonyms genres season + id idMal status type episodes chapters format duration synonyms genres season isAdult tags { name rank } title { romaji english native } nextAiringEpisode { episode airingAt } diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index eda46d28..5f2281cf 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -100,7 +100,15 @@ href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank" > - <img class="cover" src={anime.coverImage.extraLarge} alt="Cover" /> + <span class="cover-container"> + <img + class={`cover${ + anime.isAdult && $settings.displayBlurAdultContent ? ' adult' : '' + }`} + src={anime.coverImage.extraLarge} + alt="Cover" + /> + </span> </a> <div class="cover-title"> diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte index 9ac3f8c6..c465ff0a 100644 --- a/src/lib/List/Manga/CleanMangaList.svelte +++ b/src/lib/List/Manga/CleanMangaList.svelte @@ -119,7 +119,15 @@ href={outboundLink(manga, 'manga', $settings.displayOutboundLinksTo)} target="_blank" > - <img class="cover" src={manga.coverImage.extraLarge} alt="Cover" /> + <span class="cover-container"> + <img + class={`cover${ + manga.isAdult && $settings.displayBlurAdultContent ? ' adult' : '' + }`} + src={manga.coverImage.extraLarge} + alt="Cover" + /> + </span> </a> <div class="cover-title"> diff --git a/src/lib/List/covers.css b/src/lib/List/covers.css index 2ecdcf02..319d5782 100644 --- a/src/lib/List/covers.css +++ b/src/lib/List/covers.css @@ -46,3 +46,21 @@ white-space: nowrap; float: right; } + +.adult { + filter: blur(10px) grayscale(50%) brightness(0.5); + transition: filter 0.3s ease; +} + +.adult:hover { + filter: blur(0) !important; + transition: filter 0.3s ease; +} + +.cover-container { + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + border-radius: 8px; +} diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte index cd69dd36..7751514d 100644 --- a/src/lib/Settings/Categories/Display.svelte +++ b/src/lib/Settings/Categories/Display.svelte @@ -260,6 +260,7 @@ text="Display schedule in list mode (legacy behaviour)" /> <SettingCheckboxToggle setting="displaySocialButton" text="Show social tab shortcut for media" /> +<SettingCheckboxToggle setting="displayBlurAdultContent" text="Blur NSFW media covers" /> <select bind:value={$settings.displayTitleFormat}> <option value="english"> {$locale().settings.display.categories.media.fields.mediaTitleFormat.options.english} |