feat(frontend): apply itinerary UI and docs refinements
This commit is contained in:
@@ -405,11 +405,11 @@
|
||||
<input
|
||||
type="radio"
|
||||
name="order_by"
|
||||
value="rating"
|
||||
value="price"
|
||||
class="radio radio-primary radio-sm"
|
||||
checked={currentSort.order_by === 'rating'}
|
||||
checked={currentSort.order_by === 'price'}
|
||||
/>
|
||||
<span class="label-text text-sm">{$t('adventures.rating')}</span>
|
||||
<span class="label-text text-sm">{$t('adventures.price')}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -285,23 +285,6 @@
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="text-6xl font-bold mb-4 drop-shadow-lg">{adventure.name}</h1>
|
||||
|
||||
<!-- Rating -->
|
||||
{#if adventure.rating !== undefined && adventure.rating !== null}
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rating rating-lg">
|
||||
{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-hero"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
checked={star <= adventure.rating}
|
||||
disabled
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Info Badges -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
<a
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import AttachmentCard from '$lib/components/cards/AttachmentCard.svelte';
|
||||
import { getBasemapUrl, isAllDay, LODGING_TYPES_ICONS } from '$lib';
|
||||
import Star from '~icons/mdi/star';
|
||||
import StarOutline from '~icons/mdi/star-outline';
|
||||
import MapMarker from '~icons/mdi/map-marker';
|
||||
import CalendarRange from '~icons/mdi/calendar-range';
|
||||
import Eye from '~icons/mdi/eye';
|
||||
@@ -69,14 +67,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function renderStars(rating: number) {
|
||||
const stars = [];
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(i <= rating);
|
||||
}
|
||||
return stars;
|
||||
}
|
||||
|
||||
const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC';
|
||||
const getTimezoneLabel = (zone?: string | null) => zone ?? localTimeZone;
|
||||
const getTimezoneTip = (zone?: string | null) => {
|
||||
@@ -258,23 +248,6 @@
|
||||
<h1 class="text-6xl font-bold drop-shadow-lg">{lodging.name}</h1>
|
||||
</div>
|
||||
|
||||
<!-- Rating -->
|
||||
{#if lodging.rating !== undefined && lodging.rating !== null}
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rating rating-lg">
|
||||
{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-hero"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
checked={star <= lodging.rating}
|
||||
disabled
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Info Badges -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
{#if lodging.type}
|
||||
@@ -389,32 +362,20 @@
|
||||
zoom={13}
|
||||
>
|
||||
<DefaultMarker lngLat={[lodging.longitude, lodging.latitude]}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-2">
|
||||
<div class="text-lg font-bold text-black mb-1">{lodging.name}</div>
|
||||
<p class="font-semibold text-black text-sm mb-2">
|
||||
{$t(`lodging.${lodging.type}`)}
|
||||
{getLodgingIcon(lodging.type)}
|
||||
</p>
|
||||
{#if lodging.rating}
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
{#each renderStars(lodging.rating) as filled}
|
||||
{#if filled}
|
||||
<Star class="w-4 h-4 text-warning fill-current" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4 text-gray-400" />
|
||||
{/if}
|
||||
{/each}
|
||||
<span class="text-xs text-black ml-1">({lodging.rating}/5)</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if lodging.location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {lodging.location}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Popup>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-2">
|
||||
<div class="text-lg font-bold text-black mb-1">{lodging.name}</div>
|
||||
<p class="font-semibold text-black text-sm mb-2">
|
||||
{$t(`lodging.${lodging.type}`)}
|
||||
{getLodgingIcon(lodging.type)}
|
||||
</p>
|
||||
{#if lodging.location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {lodging.location}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
</MapLibre>
|
||||
</div>
|
||||
|
||||
@@ -746,25 +746,20 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{#if hoveredLocation.rating !== null && hoveredLocation.rating !== undefined}
|
||||
<div class="badge badge-neutral badge-sm">
|
||||
★ {hoveredLocation.rating}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Visits: {hoveredLocation.visits?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Media: {hoveredLocation.images?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Files: {hoveredLocation.attachments?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Trails: {hoveredLocation.trails?.length ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Visits: {hoveredLocation.visits?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Media: {hoveredLocation.images?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Files: {hoveredLocation.attachments?.length ?? 0}
|
||||
</div>
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
Trails: {hoveredLocation.trails?.length ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if hoveredLocation.visits && hoveredLocation.visits.length > 0}
|
||||
<div class="text-xs text-base-content/70">
|
||||
|
||||
@@ -15,8 +15,6 @@
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import AttachmentCard from '$lib/components/cards/AttachmentCard.svelte';
|
||||
import { getBasemapUrl, isAllDay, TRANSPORTATION_TYPES_ICONS } from '$lib';
|
||||
import Star from '~icons/mdi/star';
|
||||
import StarOutline from '~icons/mdi/star-outline';
|
||||
import MapMarker from '~icons/mdi/map-marker';
|
||||
import CalendarRange from '~icons/mdi/calendar-range';
|
||||
import OpenInNew from '~icons/mdi/open-in-new';
|
||||
@@ -67,14 +65,6 @@
|
||||
return '🚗';
|
||||
}
|
||||
|
||||
function renderStars(rating: number) {
|
||||
const stars = [];
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(i <= rating);
|
||||
}
|
||||
return stars;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (data.props.transportation) {
|
||||
transportation = data.props.transportation;
|
||||
@@ -395,23 +385,6 @@
|
||||
<h1 class="text-6xl font-bold drop-shadow-lg">{transportation.name}</h1>
|
||||
</div>
|
||||
|
||||
<!-- Rating -->
|
||||
{#if transportation.rating !== undefined && transportation.rating !== null}
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rating rating-lg">
|
||||
{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-hero"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
checked={star <= transportation.rating}
|
||||
disabled
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Info Badges -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
{#if transportation.type}
|
||||
@@ -553,20 +526,6 @@
|
||||
{$t('transportation.from_location')}
|
||||
{getTransportationIcon(transportation.type)}
|
||||
</p>
|
||||
{#if transportation.rating}
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
{#each renderStars(transportation.rating) as filled}
|
||||
{#if filled}
|
||||
<Star class="w-4 h-4 text-warning fill-current" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4 text-gray-400" />
|
||||
{/if}
|
||||
{/each}
|
||||
<span class="text-xs text-black ml-1">
|
||||
({transportation.rating}/5)
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.from_location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {transportation.from_location}
|
||||
@@ -591,20 +550,6 @@
|
||||
{$t('transportation.to_location')}
|
||||
{getTransportationIcon(transportation.type)}
|
||||
</p>
|
||||
{#if transportation.rating}
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
{#each renderStars(transportation.rating) as filled}
|
||||
{#if filled}
|
||||
<Star class="w-4 h-4 text-warning fill-current" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4 text-gray-400" />
|
||||
{/if}
|
||||
{/each}
|
||||
<span class="text-xs text-black ml-1">
|
||||
({transportation.rating}/5)
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.to_location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {transportation.to_location}
|
||||
|
||||
Reference in New Issue
Block a user