cosmetic changes
This commit is contained in:
Christian Beutel
@@ -150,13 +150,19 @@
|
||||
comments.set(newCommentList);
|
||||
commentDeleteLoading = false;
|
||||
}
|
||||
let thumbnail = $derived(
|
||||
trail.photos.length
|
||||
? getFileURL(trail, trail.photos[trail.thumbnail ?? 0])
|
||||
: $theme === "light"
|
||||
? emptyStateTrailLight
|
||||
: emptyStateTrailDark,
|
||||
);
|
||||
|
||||
function getHeaderPhotos() {
|
||||
if (trail.photos.length) {
|
||||
return trail.photos.slice(0, 3).map((p) => getFileURL(trail, p));
|
||||
} else {
|
||||
return $theme === "light"
|
||||
? [emptyStateTrailLight]
|
||||
: [emptyStateTrailDark];
|
||||
}
|
||||
}
|
||||
|
||||
const headerPhotos = getHeaderPhotos();
|
||||
|
||||
$effect(() => {
|
||||
if (browser && activeTab == 2) {
|
||||
fetchComments();
|
||||
@@ -172,69 +178,94 @@
|
||||
style="max-width: min(100%, 76rem);"
|
||||
>
|
||||
<div class="trail-info-panel-header">
|
||||
<section class="relative h-80">
|
||||
{#if isVideoURL(thumbnail)}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
class="w-full h-80 object-cover rounded-t-3xl"
|
||||
autoplay
|
||||
loop
|
||||
src={thumbnail}
|
||||
></video>
|
||||
{:else}
|
||||
<img
|
||||
class="w-full h-80"
|
||||
class:rounded-t-3xl={mode !== "list"}
|
||||
src={thumbnail}
|
||||
alt=""
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="absolute bottom-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-60"
|
||||
></div>
|
||||
{#if (trail.public || trailIsShared) && pb.authStore.record}
|
||||
<div
|
||||
class="flex absolute top-6 right-6 {trail.public &&
|
||||
trailIsShared
|
||||
? 'w-16'
|
||||
: 'w-8'} h-8 rounded-full items-center justify-center bg-white text-primary"
|
||||
>
|
||||
{#if trail.public && pb.authStore.record}
|
||||
<span
|
||||
class:tooltip={mode != "map"}
|
||||
class:mr-3={trail.public && trailIsShared}
|
||||
data-title={$_("public")}
|
||||
>
|
||||
<i class="fa fa-globe"></i>
|
||||
</span>
|
||||
{/if}
|
||||
{#if trailIsShared}
|
||||
<ShareInfo type="trail" subject={trail}></ShareInfo>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if mode == "map"}
|
||||
<button
|
||||
aria-label="Back"
|
||||
class="btn-icon hover:bg-white hover:text-black ring-input-ring text-white absolute top-6 left-6"
|
||||
onclick={() => history.back()}
|
||||
>
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</button>
|
||||
{/if}
|
||||
<div
|
||||
class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
|
||||
<section class="relative">
|
||||
<button
|
||||
aria-label="Back"
|
||||
class="bg-black/40 text-white text-lg rounded-full w-10 h-10 hover:bg-black/50 transition-colors focus:ring-4 focus:ring-primary/70 top-6 left-6 absolute"
|
||||
onclick={() => history.back()}
|
||||
>
|
||||
<div class="text-white overflow-hidden">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</button>
|
||||
<div
|
||||
class="grid gap-[1px] {headerPhotos.length > 1
|
||||
? 'grid-cols-[8fr_5fr]'
|
||||
: 'grid-cols-1'} h-80 rounded-t-3xl overflow-hidden cursor-pointer"
|
||||
>
|
||||
<PhotoGallery
|
||||
photos={trail.photos.map((p) => getFileURL(trail, p))}
|
||||
bind:this={gallery}
|
||||
></PhotoGallery>
|
||||
{#each headerPhotos as photo, i}
|
||||
{#if isVideoURL(photo)}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
class="object-cover h-full w-full"
|
||||
onclick={trail.photos.length
|
||||
? () => gallery.openGallery(i)
|
||||
: null}
|
||||
autoplay
|
||||
loop
|
||||
src={photo}
|
||||
></video>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<img
|
||||
class="object-cover h-full w-full"
|
||||
onclick={trail.photos.length
|
||||
? () => gallery.openGallery(i)
|
||||
: null}
|
||||
class:row-span-2={i == 0 && headerPhotos.length > 2}
|
||||
src={photo}
|
||||
alt=""
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
<section class="border-b border-input-border p-8">
|
||||
<div class="flex justify-between items-center gap-x-4">
|
||||
{#if trail.expand?.tags && trail.expand.tags.length > 0}
|
||||
<div class="flex flex-wrap gap-2 text-gray-600">
|
||||
{#each trail.expand.tags as tag}
|
||||
<Chip text={tag.name}></Chip>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if (trail.public || trailIsShared) && pb.authStore.record}
|
||||
<div
|
||||
class="flex {trail.public && trailIsShared
|
||||
? 'w-16'
|
||||
: 'w-8'} h-8 rounded-full items-center justify-center"
|
||||
>
|
||||
{#if trail.public && pb.authStore.record}
|
||||
<span
|
||||
class:tooltip={mode != "map"}
|
||||
class:mr-3={trail.public && trailIsShared}
|
||||
data-title={$_("public")}
|
||||
>
|
||||
<i class="fa fa-globe"></i>
|
||||
</span>
|
||||
{/if}
|
||||
{#if trailIsShared}
|
||||
<ShareInfo type="trail" subject={trail}></ShareInfo>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-between items-end w-full gap-y-4">
|
||||
<div class=" overflow-hidden">
|
||||
<h4
|
||||
title={trail.name}
|
||||
class="text-4xl font-bold line-clamp-3"
|
||||
class="{mode == 'map'
|
||||
? 'text-4xl'
|
||||
: 'text-5xl'} font-bold line-clamp-3 mb-1"
|
||||
style="line-height: 1.18"
|
||||
>
|
||||
{trail.name}
|
||||
</h4>
|
||||
{#if trail.date}
|
||||
<h5 class="text-sm">
|
||||
<h5 class="text-sm text-gray-500">
|
||||
{new Date(trail.date).toLocaleDateString(
|
||||
undefined,
|
||||
{
|
||||
@@ -247,7 +278,7 @@
|
||||
</h5>
|
||||
{/if}
|
||||
{#if trail.expand?.author}
|
||||
<p class="mt-2 mb-3">
|
||||
<p class="mt-3 mb-3">
|
||||
{$_("by")}
|
||||
<img
|
||||
class="rounded-full w-8 aspect-square mx-1 inline"
|
||||
@@ -269,13 +300,6 @@
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
{#if trail.expand?.tags && trail.expand.tags.length > 0}
|
||||
<div class="flex flex-wrap gap-2 text-gray-600">
|
||||
{#each trail.expand.tags as tag}
|
||||
<Chip text={tag.name}></Chip>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-2 mr-8">
|
||||
{#if trail.location}
|
||||
<h3 class="text-lg">
|
||||
@@ -418,12 +442,6 @@
|
||||
? 'sm:grid-cols-2 md:grid-cols-3'
|
||||
: ''} gap-4"
|
||||
>
|
||||
<PhotoGallery
|
||||
photos={trail.photos.map((p) =>
|
||||
getFileURL(trail, p),
|
||||
)}
|
||||
bind:this={gallery}
|
||||
></PhotoGallery>
|
||||
{#each trail.photos ?? [] as photo, i}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
|
||||
Reference in New Issue
Block a user