brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds category to trail card/item/feed

Browse Source
This commit is contained in:
Christian Beutel
2025-08-22 17:19:12 +02:00
parent 380c1802f2
commit fdb6ef3b76
4 changed files with 57 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/profile/feed_card.svelte
View File

@@ -20,10 +20,13 @@
let fullDescription = $state(false);
const timeSince = $derived(formatTimeSince(new Date(feedItem.created ?? "")));
const timeSince = $derived(
formatTimeSince(new Date(feedItem.created ?? "")),
);
const photos = $derived((feedItem.expand.item as Trail).photos);
const location = $derived((feedItem.expand.item as Trail).location);
const category = $derived((feedItem.expand.item as Trail).expand?.category?.name);
const trails = $derived((feedItem.expand.item as List).trails);
@@ -69,14 +72,21 @@
`@${author?.preferred_username}@${author?.domain}/${feedItem.item}`}
>
<div class="feed-card-body">
<h3 class="text-2xl font-semibold !mt-2">
<h3 class="text-2xl font-semibold mb-2">
{feedItem.expand.item.name}
</h3>
{#if location}
<h5 class="my-1">
<i class="fa fa-location-dot mr-3"></i>{location}
</h5>
{/if}
<div class="flex flex-wrap gap-x-8 gap-y-1">
{#if category}
<p>
<i class="fa fa-shapes mr-3"> </i>{$_(category)}
</p>
{/if}
{#if location}
<p>
<i class="fa fa-location-dot mr-3"></i>{location}
</p>
{/if}
</div>
<div
class="flex flex-wrap mt-1 gap-x-4 gap-y-2 text-sm text-gray-500 mb-2"
>

27
web/src/lib/components/trail/trail_card.svelte
View File

@@ -13,7 +13,6 @@
import { _ } from "svelte-i18n";
import type { MouseEventHandler } from "svelte/elements";
import Chip from "../base/chip.svelte";
import { fade, slide } from "svelte/transition";
interface Props {
trail: Trail;
@@ -70,6 +69,7 @@
class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] {fullWidth
? ''
: 'lg:w-72'} cursor-pointer flex flex-col"
class:bg-secondary-hover={selected}
{onmouseenter}
{onmouseleave}
role="listitem"
@@ -133,7 +133,10 @@
{/if}
{#if $currentUser && trail.like_count > 0}
<div
class="flex absolute items-center justify-center {trailIsShared || trail.public ? 'top-14': 'top-4'} right-4 bg-background w-8 h-8 rounded-full"
class="flex absolute items-center justify-center {trailIsShared ||
trail.public
? 'top-14'
: 'top-4'} right-4 bg-background w-8 h-8 rounded-full"
>
<span class="tooltip" data-title={$_("likes")}>
<i class="fa fa-heart"></i>
@@ -194,17 +197,23 @@
{/if}
</div>
{/if}
<div class="flex gap-x-4">
{#if trail.location}
<h5>
<i class="fa fa-location-dot mr-3"></i>{trail.location}
</h5>
<div class="flex gap-x-4 gap-y-1 text-base flex-wrap">
{#if trail.category}
<p>
<i class="fa fa-shapes mr-3"> </i>{$_(trail.category)}
</p>
{/if}
<h5>
{#if trail.location}
<p>
<i class="fa fa-location-dot mr-3"></i>{trail.location}
</p>
{/if}
<p class="whitespace-nowrap">
<i class="fa fa-gauge mr-3"></i>{$_(
trail.difficulty ?? "?",
)}
</h5>
</p>
</div>
</div>
<div

17
web/src/lib/components/trail/trail_list_item.svelte
View File

@@ -61,6 +61,7 @@
<li
class="flex gap-8 p-4 rounded-xl border border-input-border cursor-pointer hover:bg-secondary-hover transition-colors items-center"
class:bg-secondary-hover={selected}
>
<div class="shrink-0">
{#if isVideoURL(thumbnail)}
@@ -150,10 +151,20 @@
{/if}
</div>
{/if}
<div class="flex flex-wrap gap-x-8">
{#if trail.location}
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
<div class="flex flex-wrap gap-x-8 gap-y-1">
{#if trail.category}
<p>
<i class="fa fa-shapes mr-3"> </i>{$_(trail.category)}
</p>
{/if}
{#if trail.location}
<p>
<i class="fa fa-location-dot mr-3"></i>{trail.location}
</p>
{/if}
<p class="whitespace-nowrap">
<i class="fa fa-gauge mr-3"></i>{$_(trail.difficulty ?? "?")}
</p>
</div>
<div class="flex flex-wrap mt-1 gap-x-4 gap-y-2 text-sm text-gray-500">