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

Enhance Tags on TrailCard component with toggle support (#285)

Browse Source 
* Updated trail card to show first 2 tags and made tags smaller

* fixes ux and adds i18n

---------

Co-authored-by: Christian Beutel <>
This commit is contained in:
Brian Nelson
2025-06-26 07:22:54 -04:00
committed by GitHub
parent 4b6d7289a5
commit 9b6522ec21
13 changed files with 82 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/base/chip.svelte
View File

@@ -16,7 +16,7 @@
? 'bg-primary text-white'
: 'border border-input-border bg-menu-item-background-hover'} px-2 py-1 rounded-full flex items-center gap-1"
>
<span class="text-sm">{text}</span>
<span class="text-xs">{text}</span>
{#if closable}
<button
type="button"

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

@@ -13,6 +13,7 @@
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;
@@ -33,7 +34,7 @@
? getFileURL(
trail,
trail.photos.at(trail.thumbnail ?? 0) ?? trail.photos[0],
"600x0"
"600x0",
)
: $theme === "light"
? emptyStateTrailLight
@@ -43,6 +44,15 @@
let trailIsShared = $derived(
(trail.expand?.trail_share_via_trail?.length ?? 0) > 0,
);
// expand and collapse the tags
let expandedTags = $state(false);
function toggleExpandTags(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
expandedTags = !expandedTags;
}
</script>
<div
@@ -133,23 +143,31 @@
`https://api.dicebear.com/7.x/initials/svg?seed=${trail.expand.author.preferred_username}&backgroundType=gradientLinear`}
alt="avatar"
/>
{trail.expand.author.preferred_username}{trail.expand.author.isLocal
{trail.expand.author.preferred_username}{trail.expand.author
.isLocal
? ""
: "@" + trail.expand.author.domain}
</p>
{/if}
{#if trail.expand?.tags?.length}
<div class="flex flex-wrap gap-1 mb-3">
{#each trail.expand?.tags ?? [] as t}
<Chip text={t.name} closable={false} primary={false}
></Chip>
{/each}
</div>
{:else if trail.tags?.length}
<div class="flex flex-wrap gap-1 mb-3">
{#each trail.tags ?? [] as t}
{#if trail.tags.length}
<div class="flex flex-wrap gap-1 mb-3 items-center">
{#each expandedTags ? trail.tags : trail.tags.slice(0, 2) as t}
<Chip text={t} closable={false} primary={false}></Chip>
{/each}
{#if trail.tags.length > 2}
<button
onclick={toggleExpandTags}
class="text-sm text-gray-500 hover:underline focus:outline-none"
type="button"
>
{#if expandedTags}
{$_('show-less')}
{:else}
+{trail.tags.length - 2} {$_('more')}
{/if}
</button>
{/if}
</div>
{/if}
<div class="flex gap-x-4">

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

@@ -14,6 +14,7 @@
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
import { handleFromRecordWithIRI } from "$lib/util/activitypub_util";
import Chip from "../base/chip.svelte";
interface Props {
trail: Trail;
@@ -33,6 +34,14 @@
? emptyStateTrailLight
: emptyStateTrailDark,
);
let expandedTags = $state(false);
function toggleExpandTags(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
expandedTags = !expandedTags;
}
</script>
<li
@@ -60,7 +69,7 @@
<h4 class="font-semibold text-lg">
{trail.name}
</h4>
<div class="flex items-center shrink-0 gap-3">
<div class="flex items-center shrink-0 gap-3">
{#if trail.public && $currentUser}
<span class="tooltip" data-title={$_("public")}>
<i class="fa fa-globe"></i>
@@ -105,6 +114,27 @@
{handleFromRecordWithIRI(trail)}
</p>
{/if}
{#if trail.tags.length}
<div class="flex flex-wrap gap-1 mb-3 items-center">
{#each expandedTags ? trail.tags : trail.tags.slice(0, 2) as t}
<Chip text={t} closable={false} primary={false}></Chip>
{/each}
{#if trail.tags.length > 2}
<button
onclick={toggleExpandTags}
class="text-sm text-gray-500 hover:underline focus:outline-none"
type="button"
>
{#if expandedTags}
Show less
{:else}
+{trail.tags.length - 2} more
{/if}
</button>
{/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>

2
web/src/lib/i18n/locales/de.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Schwierigkeit der Wanderung",
"metric": "Metrisch",
"moderate": "Mittel",
"more": "weitere",
"mountain": "Berg",
"must-be-at-least-n-characters-long": "Muss mindestens {n} Zeichen lang sein",
"must-be-at-most-n-characters-long": "Darf höchstens {n} Zeichen lang sein",
@@ -316,6 +317,7 @@
"shared-with": "Geteilt mit",
"shortest": "",
"show-in-overview": "In der Übersicht anzeigen",
"show-less": "Weniger anzeigen",
"show-on-map": "Auf der Karte anzeigen",
"slogan": "Speichere deine Abenteuer!",
"slope": "Steigung",

2
web/src/lib/i18n/locales/en.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Metric",
"moderate": "Moderate",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Must be at least {n} characters long",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Shared with",
"shortest": "",
"show-in-overview": "Show in overview",
"show-less": "",
"show-on-map": "Show on map",
"slogan": "Save your adventures!",
"slope": "Slope",

2
web/src/lib/i18n/locales/es.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Métrica",
"moderate": "Medio",
"more": "",
"mountain": "Montaña",
"must-be-at-least-n-characters-long": "Tiene que tener por lo menos {n} caracteres",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Compartido con",
"shortest": "",
"show-in-overview": "Mostrar en la panorámica",
"show-less": "",
"show-on-map": "Mostrar en mapa",
"slogan": "¡Guarda tus aventuras!",
"slope": "Pendiente",

2
web/src/lib/i18n/locales/fr.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Métrique",
"moderate": "Moyenne",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Doit être composé d'au moins {n} caractères",
"must-be-at-most-n-characters-long": "Doit être au maximum de {n} caractères",
@@ -316,6 +317,7 @@
"shared-with": "Partagé avec",
"shortest": "",
"show-in-overview": "Voir dans l'aperçu",
"show-less": "",
"show-on-map": "Voir sur la carte",
"slogan": "Sauvegarder vos aventures !",
"slope": "Pente",

2
web/src/lib/i18n/locales/hu.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Metrikus",
"moderate": "Mérsékelt",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Legalább {n} karakter hosszúnak kell lennie",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Shared with",
"shortest": "",
"show-in-overview": "Áttekintés",
"show-less": "",
"show-on-map": "Mutatás térképen",
"slogan": "Mentse el a kalandjait!",
"slope": "Slope",

2
web/src/lib/i18n/locales/it.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Metrico",
"moderate": "Moderato",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Deve essere lungo almeno {n} caratteri",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Condiviso con",
"shortest": "",
"show-in-overview": "Mostra nella panoramica",
"show-less": "",
"show-on-map": "Mostra sulla mappa",
"slogan": "Salva le tue avventure!",
"slope": "Pendenza",

2
web/src/lib/i18n/locales/nl.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Moeilijkheid",
"metric": "Metrisch",
"moderate": "Gemiddeld",
"more": "",
"mountain": "Berg",
"must-be-at-least-n-characters-long": "Minimaal {n} tekens",
"must-be-at-most-n-characters-long": "Mag maximaal {n} tekens lang zijn.",
@@ -316,6 +317,7 @@
"shared-with": "Gedeeld met",
"shortest": "",
"show-in-overview": "Tonen op overzicht",
"show-less": "",
"show-on-map": "Tonen op kaart",
"slogan": "Bewaar je avonturen!",
"slope": "helling",

2
web/src/lib/i18n/locales/pl.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Metryczne",
"moderate": "Średni",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Długość musi wynosić przynajmniej {n} znaków",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Udostępniony dla",
"shortest": "",
"show-in-overview": "Pokaż w przeglądzie",
"show-less": "",
"show-on-map": "Pokaż na mapie",
"slogan": "Zapisz swoją wyprawę!",
"slope": "Nachylenie",

2
web/src/lib/i18n/locales/pt.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "Métrica",
"moderate": "Moderado",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "Deve ter pelo menos {n} caracteres",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "Partilhado com",
"shortest": "",
"show-in-overview": "Mostrar na vista geral",
"show-less": "",
"show-on-map": "Mostrar no mapa",
"slogan": "Guarde as suas aventuras!",
"slope": "Inclinação",

2
web/src/lib/i18n/locales/zh.json
View File

@@ -199,6 +199,7 @@
"max-hiking-difficulty": "Max. Hiking Difficulty",
"metric": "公制",
"moderate": "中等",
"more": "",
"mountain": "Mountain",
"must-be-at-least-n-characters-long": "长度至少 {n} 字符",
"must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
"shared-with": "分享给",
"shortest": "",
"show-in-overview": "详情中展示",
"show-less": "",
"show-on-map": "地图中展示",
"slogan": "保存你的冒险！",
"slope": "坡度",