cosmetic changes
This commit is contained in:
Christian Beutel
@@ -14,7 +14,7 @@
|
||||
<div
|
||||
class="{primary
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-background-inverse/10'} px-2 py-1 rounded-full flex items-center gap-1"
|
||||
: 'border border-input-border'} px-2 py-1 rounded-full flex items-center gap-1"
|
||||
>
|
||||
<span class="text-sm">{text}</span>
|
||||
{#if closable}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { type Snippet } from "svelte";
|
||||
import { tick, type Snippet } from "svelte";
|
||||
import { fly } from "svelte/transition";
|
||||
|
||||
interface Props {
|
||||
@@ -21,10 +21,38 @@
|
||||
|
||||
let isOpen = $state(false);
|
||||
|
||||
export function toggleMenu(e: MouseEvent) {
|
||||
let dropdownElement: HTMLUListElement;
|
||||
let dropdownToggleElement: HTMLDivElement;
|
||||
|
||||
export async function toggleMenu(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
isOpen = !isOpen;
|
||||
if (isOpen) {
|
||||
await tick();
|
||||
const toggleRect = dropdownToggleElement.getBoundingClientRect();
|
||||
|
||||
const dropdownRect = dropdownElement.getBoundingClientRect();
|
||||
dropdownElement.style.visibility = "";
|
||||
|
||||
const viewportHeight = window.innerHeight;
|
||||
const spaceBelow = viewportHeight - toggleRect.bottom;
|
||||
const spaceAbove = toggleRect.top;
|
||||
|
||||
if (
|
||||
spaceBelow < dropdownRect.height &&
|
||||
spaceAbove > dropdownRect.height
|
||||
) {
|
||||
dropdownElement.classList.remove("rounded-b-xl");
|
||||
dropdownElement.classList.add("rounded-t-xl");
|
||||
dropdownElement.style.top = `${-8-dropdownRect.height}px`;
|
||||
} else {
|
||||
dropdownElement.classList.remove("rounded-t-xl");
|
||||
dropdownElement.classList.add("rounded-b-xl");
|
||||
dropdownElement.style.top = `${toggleRect.height +8}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
@@ -53,7 +81,7 @@
|
||||
<svelte:window onmouseup={handleWindowClick} />
|
||||
|
||||
<div class="dropdown relative">
|
||||
<div class="dropdown-toggle">
|
||||
<div class="dropdown-toggle" bind:this={dropdownToggleElement}>
|
||||
{#if children}{@render children({ toggleMenu })}{:else}
|
||||
<button
|
||||
aria-label="Toggle menu"
|
||||
@@ -68,11 +96,12 @@
|
||||
|
||||
{#if isOpen}
|
||||
<ul
|
||||
class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
|
||||
class="menu absolute bg-menu-background border border-input-border shadow-md rounded-l-xl rounded-b-xl right-0 overflow-hidden"
|
||||
class:none={isOpen}
|
||||
style="z-index: 1001"
|
||||
in:fly={{ y: -10, duration: 150 }}
|
||||
out:fly={{ y: -10, duration: 150 }}
|
||||
bind:this={dropdownElement}
|
||||
>
|
||||
{#each items as item}
|
||||
<li
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
? 'grid-cols-[8fr_5fr]'
|
||||
: 'grid-cols-1'}"
|
||||
>
|
||||
{#each activity.photos as photo, i}
|
||||
{#each activity.photos.slice(0,3) as photo, i}
|
||||
{#if isVideoURL(photo)}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
|
||||
@@ -209,7 +209,7 @@
|
||||
>{#snippet children({ toggleMenu: openDropdown })}
|
||||
<button
|
||||
aria-label="Open dropdown"
|
||||
class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-12 w-12"
|
||||
class=" btn-primary !rounded-full h-12 w-12"
|
||||
onclick={openDropdown}
|
||||
>
|
||||
<i class="fa fa-ellipsis-vertical"></i>
|
||||
|
||||
@@ -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,33 +178,65 @@
|
||||
style="max-width: min(100%, 76rem);"
|
||||
>
|
||||
<div class="trail-info-panel-header">
|
||||
<section class="relative h-80">
|
||||
{#if isVideoURL(thumbnail)}
|
||||
<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()}
|
||||
>
|
||||
<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="w-full h-80 object-cover rounded-t-3xl"
|
||||
class="object-cover h-full w-full"
|
||||
onclick={trail.photos.length
|
||||
? () => gallery.openGallery(i)
|
||||
: null}
|
||||
autoplay
|
||||
loop
|
||||
src={thumbnail}
|
||||
src={photo}
|
||||
></video>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<img
|
||||
class="w-full h-80"
|
||||
class:rounded-t-3xl={mode !== "list"}
|
||||
src={thumbnail}
|
||||
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}
|
||||
|
||||
<div
|
||||
class="absolute bottom-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-60"
|
||||
></div>
|
||||
{/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 absolute top-6 right-6 {trail.public &&
|
||||
trailIsShared
|
||||
class="flex {trail.public && trailIsShared
|
||||
? 'w-16'
|
||||
: 'w-8'} h-8 rounded-full items-center justify-center bg-white text-primary"
|
||||
: 'w-8'} h-8 rounded-full items-center justify-center"
|
||||
>
|
||||
{#if trail.public && pb.authStore.record}
|
||||
<span
|
||||
@@ -214,27 +252,20 @@
|
||||
{/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"
|
||||
>
|
||||
<div class="text-white overflow-hidden">
|
||||
</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 -->
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
? 'grid-cols-[8fr_5fr]'
|
||||
: 'grid-cols-1'} cursor-pointer"
|
||||
>
|
||||
{#each wp.photos as photo, j}
|
||||
{#each wp.photos.slice(0,3) as photo, j}
|
||||
{#if isVideoURL(photo)}
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
|
||||
Reference in New Issue
Block a user