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

fixes TrailCard height

Browse Source
This commit is contained in:
Christian Beutel
2025-02-09 11:48:27 +01:00
parent d790f06216
commit 3173be8d79
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,17 +45,17 @@
</script> </script>
<div <div
class="trail-card relative rounded-2xl border border-input-border min-w-72 {fullWidth class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] {fullWidth
? '' ? ''
: 'lg:w-72'} cursor-pointer" : 'lg:w-72'} cursor-pointer flex flex-col"
{onmouseenter} {onmouseenter}
{onmouseleave} {onmouseleave}
role="listitem" role="listitem"
> >
<div <div
class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl" class="relative w-full basis-full max-h-48 overflow-hidden rounded-t-2xl"
> >
<img class="min-h-40 w-full" id="header-img" src={thumbnail} alt="" /> <img class="h-full w-full" id="header-img" src={thumbnail} alt="" />
</div> </div>
{#if (trail.public || trailIsShared) && pb.authStore.model} {#if (trail.public || trailIsShared) && pb.authStore.model}
<div <div
@@ -79,7 +79,7 @@
{/if} {/if}
<div class="p-4"> <div class="p-4">
<div> <div>
<h4 class="font-semibold text-lg">{trail.name}</h4> <h4 class="font-semibold text-lg line-clamp-2">{trail.name}</h4>
{#if trail.date} {#if trail.date}
<p class="text-xs text-gray-500 mb-3"> <p class="text-xs text-gray-500 mb-3">
{new Date(trail.date).toLocaleDateString(undefined, { {new Date(trail.date).toLocaleDateString(undefined, {

6
web/src/lib/util/maplibre_util.ts
View File

@@ -150,7 +150,7 @@ export function createPopupFromTrail(trail: Trail) {
// Create a list item element // Create a list item element
const listItem = document.createElement("li"); const listItem = document.createElement("li");
listItem.className = "flex gap-4 cursor-pointer text-content max-w-80"; listItem.className = "flex gap-4 cursor-pointer text-content max-w-72";
// Create the image container // Create the image container
const imageContainer = document.createElement("div"); const imageContainer = document.createElement("div");
@@ -158,7 +158,7 @@ export function createPopupFromTrail(trail: Trail) {
// Create the image element // Create the image element
const img = document.createElement("img"); const img = document.createElement("img");
img.className = "h-full max-w-20 object-cover"; img.className = "h-full w-28 object-cover";
img.src = thumbnail; // Set image source safely img.src = thumbnail; // Set image source safely
img.alt = ""; // Always include a safe alt attribute img.alt = ""; // Always include a safe alt attribute
imageContainer.appendChild(img); imageContainer.appendChild(img);
@@ -169,7 +169,7 @@ export function createPopupFromTrail(trail: Trail) {
// Add trail name // Add trail name
const trailName = document.createElement("h4"); const trailName = document.createElement("h4");
trailName.className = "font-semibold text-lg"; trailName.className = "font-semibold text-lg line-clamp-1";
trailName.textContent = trail.name; // Set trail name safely trailName.textContent = trail.name; // Set trail name safely
textContainer.appendChild(trailName); textContainer.appendChild(trailName);