diff options
| author | Fuwn <[email protected]> | 2024-05-27 05:41:37 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-05-27 05:41:37 -0700 |
| commit | 6efb9effde646dc9658c887e5848b33482bcab90 (patch) | |
| tree | 4de05ff4207644feee461784c189c8404d72331b /src | |
| parent | fix(match): simple native time comparison (diff) | |
| download | due.moe-6efb9effde646dc9658c887e5848b33482bcab90.tar.xz due.moe-6efb9effde646dc9658c887e5848b33482bcab90.zip | |
feat(hololive): parallax image for thumbnails
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Hololive/Stream.svelte | 19 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 1 | ||||
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 2 |
3 files changed, 16 insertions, 6 deletions
diff --git a/src/lib/Hololive/Stream.svelte b/src/lib/Hololive/Stream.svelte index e9057352..1f0a5b62 100644 --- a/src/lib/Hololive/Stream.svelte +++ b/src/lib/Hololive/Stream.svelte @@ -1,4 +1,5 @@ <script lang="ts"> + import ParallaxImage from '$lib/Image/ParallaxImage.svelte'; import root from '$lib/Utility/root'; import identity from '$stores/identity'; import locale from '$stores/locale'; @@ -55,7 +56,14 @@ </p> <a href={live.link} class="preview" target="_blank"> - <img src={live.livePreviewImage} alt="Stream Thumbnail" /> + <span class="preview-image"> + <ParallaxImage + source={live.livePreviewImage} + alternativeText="Stream Thumbnail" + limit={12.5} + duration={2750} + /> + </span> </a> </div> @@ -65,19 +73,22 @@ .preview { // margin: 0.15rem; - img { + :global(img) { border-radius: 8px; height: 20vh; object-fit: cover; + } + + .preview-image { transition: $transition; } &:hover { - img { + .preview-image { position: relative; z-index: 2; transition: $transition; - transform: scale(1.05); + transform: scale(1.025) !important; } } diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 7d892a31..b507eeca 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -14,7 +14,6 @@ import LogInRestricted from '$lib/Error/LogInRestricted.svelte'; import SettingSync from '$lib/Settings/Categories/SettingSync.svelte'; import RssFeeds from '$lib/Settings/Categories/RSSFeeds.svelte'; - import Skeleton from '$lib/Loading/Skeleton.svelte'; export let data; diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 186b53c3..4152c9f4 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -70,7 +70,7 @@ const categories = preferences.pinned_badge_wall_categories; const draggedIndex = categories.indexOf(draggedCategory); - const targetIndex = categories.indexOf(category); + const targetIndex = categories.indexOf(category || ''); categories.splice(draggedIndex, 1); categories.splice(targetIndex, 0, draggedCategory); |