diff options
| author | Fuwn <[email protected]> | 2024-04-17 19:01:43 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-17 19:01:43 -0700 |
| commit | 2c2f92568cbd6d4f483f814fa8cead9620549764 (patch) | |
| tree | 782feb207ac2cfc19528ee7a4aeb7670016eb024 /src/lib/List/Anime | |
| parent | feat(settings): always show at least one (diff) | |
| download | due.moe-2c2f92568cbd6d4f483f814fa8cead9620549764.tar.xz due.moe-2c2f92568cbd6d4f483f814fa8cead9620549764.zip | |
feat(manga): cover mode
Diffstat (limited to 'src/lib/List/Anime')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 54 | ||||
| -rw-r--r-- | src/lib/List/Anime/PlaceholderList.svelte | 10 |
2 files changed, 7 insertions, 57 deletions
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 @@ </button> {/if} -{#if $settings.displayCoverMode} +{#if $settings.displayCoverModeAnime} <div class="covers" style={`grid-template-columns: repeat(auto-fill, minmax(${$settings.displayCoverWidth}px, 1fr))`} @@ -225,54 +226,3 @@ {/each} </ul> {/if} - -<style> - .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; - } -</style> 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 @@ <Skeleton card={false} {count} - pad={$settings.displayCoverMode} - height={$settings.displayCoverMode ? '8rem' : '0.9rem'} - width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'} - list={!$settings.displayCoverMode} - grid={$settings.displayCoverMode} + pad={$settings.displayCoverModeAnime} + height={$settings.displayCoverModeAnime ? '8rem' : '0.9rem'} + width={$settings.displayCoverModeAnime ? `${$settings.displayCoverWidth / 1.05}px` : '100%'} + list={!$settings.displayCoverModeAnime} + grid={$settings.displayCoverModeAnime} /> |