[READ-ONLY] Mirror of https://github.com/flo-bit/skywatched. review movies and tv shows, based on at proto
skywatched.app
Merge pull request #55 from flo-bit/v3
more small design changes
+56
-52
-1
src/lib/Components/Profile.svelte
-1
src/lib/Components/Profile.svelte
+1
-1
src/lib/Components/RateMovieModal.svelte
+1
-1
src/lib/Components/RateMovieModal.svelte
+41
-39
src/lib/Components/ReviewCard.svelte
+41
-39
src/lib/Components/ReviewCard.svelte
···
6
6
let { data, showMovieDetails = true }: { data: MainRecord; showMovieDetails?: boolean } =
7
7
$props();
8
8
</script>
9
-
<div class="w-full max-w-2xl p-6 backdrop-blur-sm">
10
-
{#if showMovieDetails}
11
-
<a
12
-
href={data.record.item.ref === 'tmdb:m'
13
-
? `/movie/${data.record.item.value}`
14
-
: `/tv/${data.record.item.value}`}
15
-
class="relative z-20 float-left mr-4 aspect-[2/3] h-44 w-auto shrink-0 overflow-hidden rounded-md border border-base-800 bg-base-900/50 transition-opacity duration-75 hover:opacity-80 group-hover:opacity-75"
16
-
>
17
-
{#if data.record.metadata?.poster_path}
18
-
<img
19
-
src="https://image.tmdb.org/t/p/w500{data.record.metadata.poster_path}"
20
-
alt="movie poster for {data.record.metadata.title}"
21
-
class="size-full object-cover object-center lg:size-full"
22
-
/>
23
-
{/if}
24
-
<span class="sr-only">View {data.record.metadata?.title}</span>
25
-
</a>
26
-
{/if}
27
9
28
-
<div class="flex flex-col gap-4">
29
-
<a href={`/user/${data.author.handle}`} class="flex flex-row items-center gap-4 font-medium">
30
-
<div class="flex items-center gap-2">
31
-
{#if data.author.avatar}
32
-
<img src={data.author.avatar} alt="user avatar" class="size-5 rounded-full" />
10
+
<div class="w-full max-w-2xl p-6 backdrop-blur-sm">
11
+
<div class="flex items-center gap-4">
12
+
{#if showMovieDetails}
13
+
<a
14
+
href={data.record.item.ref === 'tmdb:m'
15
+
? `/movie/${data.record.item.value}`
16
+
: `/tv/${data.record.item.value}`}
17
+
class="relative z-20 mr-4 aspect-[2/3] h-32 w-auto shrink-0 overflow-hidden rounded-md border border-base-800 bg-base-900/50 transition-opacity duration-75 hover:opacity-80 group-hover:opacity-75"
18
+
>
19
+
{#if data.record.metadata?.poster_path}
20
+
<img
21
+
src="https://image.tmdb.org/t/p/w500{data.record.metadata.poster_path}"
22
+
alt="movie poster for {data.record.metadata.title}"
23
+
class="size-full object-cover object-center lg:size-full"
24
+
/>
33
25
{/if}
34
-
<div class="text-md font-semibold">{data.author.displayName || data.author.handle}</div>
35
-
</div>
36
-
<div class="text-sm text-base-500">
37
-
<RelativeTime date={new Date(data.updatedAt)} locale="en-US" />
38
-
</div>
39
-
</a>
26
+
<span class="sr-only">View {data.record.metadata?.title}</span>
27
+
</a>
28
+
{/if}
40
29
41
-
<div class="flex flex-col gap-4">
42
-
<div class="flex flex-col {data.record.note?.value ? 'sm:flex-row sm:items-center' : ''} gap-4">
30
+
<div class="flex flex-col gap-3">
31
+
<a href={`/user/${data.author.handle}`} class="flex flex-row items-center gap-4 font-medium">
32
+
<div class="flex items-center gap-2">
33
+
{#if data.author.avatar}
34
+
<img src={data.author.avatar} alt="user avatar" class="size-5 rounded-full" />
35
+
{/if}
36
+
<div class="truncate text-sm font-medium">
37
+
{data.author.displayName || data.author.handle}
38
+
</div>
39
+
</div>
40
+
<div class="shrink-0 pr-2 text-sm text-base-500">
41
+
<RelativeTime date={new Date(data.updatedAt)} locale="en-US" />
42
+
</div>
43
+
</a>
44
+
45
+
<div class="flex flex-col gap-3">
43
46
{#if showMovieDetails}
44
47
<a
45
48
href={data.record.item.ref === 'tmdb:m'
···
51
54
</a>
52
55
{/if}
53
56
{#if data.record.rating?.value}
54
-
<Rating rating={data.record.rating?.value / 2} size={data.record.note?.value ? 'size-6' : 'size-6'} />
57
+
<Rating rating={data.record.rating?.value / 2} size={'size-6'} />
55
58
{/if}
56
59
</div>
57
-
58
-
{#if data.record.note?.value}
59
-
<div class="text-sm text-base-300">
60
-
{@html data.record.note?.value?.replace('\n', '<br /><br />')}
61
-
</div>
62
-
63
-
{/if}
64
60
</div>
65
61
</div>
62
+
63
+
{#if data.record.note?.value}
64
+
<div class="mt-4 text-sm text-base-300">
65
+
{@html data.record.note?.value?.replace('\n', '<br /><br />')}
66
+
</div>
67
+
{/if}
66
68
</div>
+10
-6
src/lib/Components/ReviewList.svelte
+10
-6
src/lib/Components/ReviewList.svelte
···
1
1
<script lang="ts">
2
-
import type { MainRecord } from "$lib/db";
3
-
import { cn } from "$lib/utils";
4
-
import ReviewCard from "./ReviewCard.svelte";
2
+
import type { MainRecord } from '$lib/db';
3
+
import { cn } from '$lib/utils';
4
+
import ReviewCard from './ReviewCard.svelte';
5
5
6
-
let { reviews, class: className, showMovieDetails }: { reviews: MainRecord[]; class?: string; showMovieDetails?: boolean } = $props();
6
+
let {
7
+
reviews,
8
+
class: className,
9
+
showMovieDetails
10
+
}: { reviews: MainRecord[]; class?: string; showMovieDetails?: boolean } = $props();
7
11
</script>
8
12
9
-
<div class={cn("flex w-full flex-col divide-y divide-base-900", className)}>
13
+
<div class={cn('flex w-full flex-col divide-y divide-base-900', className)}>
10
14
{#each reviews as review}
11
-
<ReviewCard data={review} showMovieDetails={showMovieDetails} />
15
+
<ReviewCard data={review} {showMovieDetails} />
12
16
{/each}
13
17
</div>
+4
-5
src/routes/[kind]/[id]/+page.svelte
+4
-5
src/routes/[kind]/[id]/+page.svelte
···
140
140
141
141
<ItemsList items={data.recommendations} showMark={!!data.user} />
142
142
{/if}
143
-
144
143
</div>
145
144
146
145
{#if data.ratings.length > 0}
147
-
<div class="mb-2 mt-8 text-lg font-semibold px-4">recent reviews</div>
148
-
149
-
<ReviewList reviews={data.ratings} showMovieDetails={false} class="pb-8"/>
150
-
{/if}
146
+
<div class="mb-2 mt-8 px-4 text-lg font-semibold">recent reviews</div>
147
+
148
+
<ReviewList reviews={data.ratings} showMovieDetails={false} class="pb-8" />
149
+
{/if}
151
150
</Container>