Skip to content

Commit f19309b

Browse files
seferturanseferturan
committed
refactor(list): extracts common list summary card
1 parent 282c1af commit f19309b

3 files changed

Lines changed: 102 additions & 124 deletions

File tree

‎projects/client/src/lib/sections/lists/components/ListSummaryCard.svelte‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script lang="ts">
2+
import Card from "$lib/components/card/Card.svelte";
3+
import type { Snippet } from "svelte";
4+
5+
const {
6+
children,
7+
variant = "default",
8+
}: {
9+
children: Snippet;
10+
variant?: "default" | "official";
11+
} = $props();
12+
</script>
13+
14+
<Card
15+
--width-card="min(var(--width-list-card), 85vw)"
16+
--height-card="var(--height-list-card)"
17+
>
18+
<div class="trakt-list-summary-card" data-variant={variant}>
19+
{@render children()}
20+
</div>
21+
</Card>
22+
23+
<style lang="scss">
24+
@use "$style/scss/mixins/index" as *;
25+
26+
.trakt-list-summary-card {
27+
height: var(--height-list-card);
28+
box-sizing: border-box;
29+
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: space-between;
33+
gap: var(--gap-xs);
34+
35+
padding: var(--ni-12);
36+
37+
outline: var(--border-thickness-xs) solid transparent;
38+
transition: outline-color var(--transition-increment) ease-in-out;
39+
40+
background-color: color-mix(
41+
in srgb,
42+
var(--color-card-background) 40%,
43+
var(--color-background)
44+
);
45+
border-radius: var(--border-radius-m);
46+
47+
&[data-variant="official"] {
48+
background-color: color-mix(
49+
in srgb,
50+
var(--color-official-list-background) 40%,
51+
var(--color-background)
52+
);
53+
}
54+
}
55+
56+
@include for-mouse() {
57+
:global(.trakt-card-content:hover) .trakt-list-summary-card {
58+
outline-color: var(--color-card-border-hover);
59+
}
60+
}
61+
</style>

‎projects/client/src/lib/sections/lists/components/list-summary/ListSummaryItem.svelte‎

Lines changed: 5 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import Card from "$lib/components/card/Card.svelte";
32
import type { DiscoverMode } from "$lib/features/filters/models/DiscoverMode";
43
import type { MediaListSummary } from "$lib/requests/models/MediaListSummary.ts";
4+
import ListSummaryCard from "../ListSummaryCard.svelte";
55
import ListHeader from "./_internal/ListHeader.svelte";
66
import ListPosters from "./_internal/ListPosters.svelte";
77
@@ -22,54 +22,7 @@
2222
};
2323
</script>
2424

25-
<Card
26-
--width-card="min(var(--width-list-card), 85vw)"
27-
--height-card="var(--height-list-card)"
28-
>
29-
<div
30-
class="trakt-list-summary"
31-
class:trakt-list-official={list.type === "official"}
32-
>
33-
<ListHeader {list} {type} {source} onclick={handler} />
34-
<ListPosters {list} {type} {source} onclick={handler} />
35-
</div>
36-
</Card>
37-
38-
<style lang="scss">
39-
@use "$style/scss/mixins/index" as *;
40-
41-
.trakt-list-summary {
42-
height: var(--height-list-card);
43-
box-sizing: border-box;
44-
45-
display: flex;
46-
flex-direction: column;
47-
gap: var(--gap-xs);
48-
49-
padding: var(--ni-12);
50-
51-
outline: var(--border-thickness-xs) solid transparent;
52-
transition: outline-color var(--transition-increment) ease-in-out;
53-
54-
background-color: color-mix(
55-
in srgb,
56-
var(--color-card-background) 40%,
57-
var(--color-background)
58-
);
59-
border-radius: var(--border-radius-m);
60-
61-
&.trakt-list-official {
62-
background-color: color-mix(
63-
in srgb,
64-
var(--color-official-list-background) 40%,
65-
var(--color-background)
66-
);
67-
}
68-
}
69-
70-
@include for-mouse() {
71-
:global(.trakt-card-content:hover) .trakt-list-summary {
72-
outline-color: var(--color-card-border-hover);
73-
}
74-
}
75-
</style>
25+
<ListSummaryCard variant={list.type === "official" ? "official" : "default"}>
26+
<ListHeader {list} {type} {source} onclick={handler} />
27+
<ListPosters {list} {type} {source} onclick={handler} />
28+
</ListSummaryCard>

‎projects/client/src/lib/sections/lists/smart/_internal/SmartListSummaryItem.svelte‎

Lines changed: 36 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
2-
import Card from "$lib/components/card/Card.svelte";
32
import MovieIcon from "$lib/components/icons/MovieIcon.svelte";
43
import ShowIcon from "$lib/components/icons/ShowIcon.svelte";
54
import Link from "$lib/components/link/Link.svelte";
65
import * as m from "$lib/features/i18n/messages.ts";
76
import CrossOriginImage from "$lib/features/image/components/CrossOriginImage.svelte";
87
import type { SmartList } from "$lib/requests/queries/users/smartListQuery.ts";
8+
import ListSummaryCard from "$lib/sections/lists/components/ListSummaryCard.svelte";
99
import { toTranslatedGenre } from "$lib/utils/formatting/string/toTranslatedGenre";
1010
import { UrlBuilder } from "$lib/utils/url/UrlBuilder";
1111
import SmartListActions from "./SmartListActions.svelte";
@@ -144,76 +144,46 @@
144144
}
145145
</script>
146146

147-
<Card
148-
--width-card="min(var(--width-list-card), 85vw)"
149-
--height-card="var(--height-list-card)"
150-
>
151-
<div class="trakt-smart-list-summary">
152-
<div class="trakt-smart-list-header">
153-
<div class="trakt-smart-list-icon" aria-hidden="true">
154-
{#if list.type === "movie"}
155-
<MovieIcon />
156-
{:else}
157-
<ShowIcon />
158-
{/if}
159-
</div>
160-
161-
<div class="trakt-smart-list-title">
162-
<Link {href}>
163-
<p class="secondary bold ellipsis">{list.title}</p>
164-
</Link>
165-
<p class="secondary small ellipsis">
166-
{filterSummary}
167-
</p>
168-
</div>
169-
170-
<SmartListActions {list} />
147+
<ListSummaryCard>
148+
<div class="trakt-smart-list-header">
149+
<div class="trakt-smart-list-icon" aria-hidden="true">
150+
{#if list.type === "movie"}
151+
<MovieIcon />
152+
{:else}
153+
<ShowIcon />
154+
{/if}
171155
</div>
172156

173-
<Link {href} color="inherit">
174-
<div
175-
class="trakt-smart-list-posters"
176-
style="--poster-count: {$posters.length}"
177-
>
178-
{#each $posters as poster, index (`${list.id}_poster_${index}`)}
179-
<div class="poster-wrapper" style="--poster-index: {index}">
180-
<CrossOriginImage
181-
src={poster}
182-
alt={m.image_alt_list_preview_poster({ title: list.title })}
183-
/>
184-
</div>
185-
{/each}
186-
</div>
187-
</Link>
188-
</div>
189-
</Card>
190-
191-
<style lang="scss">
192-
@use "$style/scss/mixins/index" as *;
193-
194-
.trakt-smart-list-summary {
195-
--smart-list-summary-background: color-mix(
196-
in srgb,
197-
var(--color-card-background) 88%,
198-
var(--color-foreground)
199-
);
200-
201-
height: var(--height-list-card);
202-
box-sizing: border-box;
203-
204-
display: flex;
205-
flex-direction: column;
206-
gap: var(--gap-m);
207-
208-
padding: var(--ni-12);
157+
<div class="trakt-smart-list-title">
158+
<Link {href}>
159+
<p class="secondary bold ellipsis">{list.title}</p>
160+
</Link>
161+
<p class="secondary small ellipsis">
162+
{filterSummary}
163+
</p>
164+
</div>
209165

210-
outline: var(--border-thickness-xs) solid transparent;
211-
transition: outline-color var(--transition-increment) ease-in-out;
166+
<SmartListActions {list} />
167+
</div>
212168

213-
background-color: var(--smart-list-summary-background);
214-
border-radius: var(--border-radius-m);
215-
}
169+
<Link {href} color="inherit">
170+
<div
171+
class="trakt-smart-list-posters"
172+
style="--poster-count: {$posters.length}"
173+
>
174+
{#each $posters as poster, index (`${list.id}_poster_${index}`)}
175+
<div class="poster-wrapper" style="--poster-index: {index}">
176+
<CrossOriginImage
177+
src={poster}
178+
alt={m.image_alt_list_preview_poster({ title: list.title })}
179+
/>
180+
</div>
181+
{/each}
182+
</div>
183+
</Link>
184+
</ListSummaryCard>
216185

186+
<style lang="scss">
217187
.trakt-smart-list-header {
218188
display: flex;
219189
align-items: center;
@@ -299,10 +269,4 @@
299269
height: 100%;
300270
}
301271
}
302-
303-
@include for-mouse() {
304-
:global(.trakt-card-content:hover) .trakt-smart-list-summary {
305-
outline-color: var(--color-card-border-hover);
306-
}
307-
}
308272
</style>

0 commit comments

Comments
 (0)