Skip to content

Commit ab31cd2

Browse files
chhoumannchhoumann
committed
fix: artwork flying with user on scroll
1 parent c6ae9ca commit ab31cd2

1 file changed

Lines changed: 94 additions & 78 deletions

File tree

‎src/ui/settings/PodcastResultCard.svelte‎

Lines changed: 94 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,108 @@
11
<script lang="ts">
2-
import { PodcastFeed } from "src/types/PodcastFeed";
3-
import { createEventDispatcher } from "svelte";
4-
import Button from "../obsidian/Button.svelte";
5-
import { fade, fly } from 'svelte/transition';
2+
import type { PodcastFeed } from "src/types/PodcastFeed";
3+
import { createEventDispatcher } from "svelte";
4+
import Button from "../obsidian/Button.svelte";
5+
import { fade } from "svelte/transition";
66
7-
export let podcast: PodcastFeed;
8-
export let isSaved: boolean = false;
7+
export let podcast: PodcastFeed;
8+
export let isSaved = false;
99
10-
const dispatch = createEventDispatcher();
11-
12-
function onAddPodcast() {
13-
dispatch("addPodcast", { podcast });
14-
}
15-
16-
function onRemovePodcast() {
17-
dispatch("removePodcast", { podcast });
18-
}
10+
const dispatch = createEventDispatcher();
1911
</script>
2012

2113
<div class="podcast-result-card" transition:fade={{ duration: 300 }}>
22-
<img
23-
src={podcast.artworkUrl}
24-
alt={`Artwork for ${podcast.title}`}
25-
class="podcast-artwork"
26-
/>
27-
<div class="podcast-info">
28-
<h3 class="podcast-title">{podcast.title}</h3>
29-
</div>
30-
<div class="podcast-actions">
31-
{#if isSaved}
32-
<Button
33-
icon="trash"
34-
ariaLabel={`Remove ${podcast.title} podcast`}
35-
on:click={onRemovePodcast}
36-
/>
37-
{:else}
38-
<Button
39-
icon="plus"
40-
ariaLabel={`Add ${podcast.title} podcast`}
41-
on:click={onAddPodcast}
42-
/>
43-
{/if}
44-
</div>
14+
<div class="podcast-artwork-container">
15+
<img
16+
src={podcast.artworkUrl}
17+
alt={`Artwork for ${podcast.title}`}
18+
class="podcast-artwork"
19+
/>
20+
</div>
21+
<div class="podcast-info">
22+
<h3 class="podcast-title">{podcast.title}</h3>
23+
</div>
24+
<div class="podcast-actions">
25+
{#if isSaved}
26+
<Button
27+
icon="trash"
28+
aria-label={`Remove ${podcast.title} podcast`}
29+
on:click={() => dispatch("removePodcast", { podcast })}
30+
/>
31+
{:else}
32+
<Button
33+
icon="plus"
34+
aria-label={`Add ${podcast.title} podcast`}
35+
on:click={() => dispatch("addPodcast", { podcast })}
36+
/>
37+
{/if}
38+
</div>
4539
</div>
4640

4741
<style>
48-
.podcast-result-card {
49-
display: flex;
50-
align-items: center;
51-
padding: 16px;
52-
border: 1px solid var(--background-modifier-border);
53-
border-radius: 8px;
54-
background-color: var(--background-secondary);
55-
max-width: 100%;
56-
transition: all 0.3s ease;
57-
}
42+
.podcast-result-card {
43+
display: flex;
44+
align-items: center;
45+
padding: 16px;
46+
border: 1px solid var(--background-modifier-border);
47+
border-radius: 8px;
48+
background-color: var(--background-secondary);
49+
max-width: 100%;
50+
transition: all 0.3s ease;
51+
position: relative;
52+
}
53+
54+
.podcast-artwork-container {
55+
width: 70px;
56+
height: 70px;
57+
flex-shrink: 0;
58+
margin-right: 20px;
59+
overflow: hidden;
60+
border-radius: 4px;
61+
position: relative;
62+
}
63+
64+
.podcast-artwork {
65+
width: 100%;
66+
height: 100%;
67+
object-fit: cover;
68+
position: absolute;
69+
top: 0;
70+
left: 0;
71+
}
72+
73+
.podcast-result-card:hover {
74+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
75+
transform: translateY(-2px);
76+
}
5877
59-
.podcast-result-card:hover {
60-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
61-
transform: translateY(-2px);
62-
}
78+
.podcast-info {
79+
flex-grow: 1;
80+
min-width: 0;
81+
padding-right: 12px;
82+
}
6383
64-
.podcast-artwork {
65-
width: 70px;
66-
height: 70px;
67-
object-fit: cover;
68-
border-radius: 4px;
69-
margin-right: 20px;
70-
flex-shrink: 0;
71-
}
84+
.podcast-title {
85+
margin: 0 0 6px 0;
86+
font-size: 16px;
87+
font-weight: bold;
88+
line-height: 1.3;
89+
word-break: break-word;
90+
}
7291
73-
.podcast-info {
74-
flex-grow: 1;
75-
min-width: 0;
76-
padding-right: 12px;
77-
}
92+
.podcast-actions {
93+
display: flex;
94+
align-items: center;
95+
flex-shrink: 0;
96+
}
7897
79-
.podcast-title {
80-
margin: 0 0 6px 12px;
81-
font-size: 16px;
82-
font-weight: bold;
83-
line-height: 1.3;
84-
word-break: break-word;
85-
}
98+
:global(.podcast-actions button) {
99+
padding: 4px;
100+
width: 24px;
101+
height: 24px;
102+
}
86103
87-
.podcast-actions {
88-
display: flex;
89-
align-items: center;
90-
flex-shrink: 0;
91-
}
92-
</style>
104+
:global(.podcast-actions button svg) {
105+
width: 16px;
106+
height: 16px;
107+
}
108+
</style>

0 commit comments

Comments
 (0)