From 0d5792a99a83adbda952637a366f0a71cc734220 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Fri, 23 May 2025 11:23:24 -0400 Subject: [PATCH] Refactor adventure page layout and enhance UI components - Updated the layout of the adventure page to improve visual hierarchy and user experience. - Reorganized the structure of the hero section, including image navigation and quick info cards. - Enhanced the display of adventure details, including user info, visit history, and sun times. - Improved the handling of attachments and external links with better styling and accessibility. - Added functionality for copying coordinates and links to the clipboard. - Refined the map section to provide clearer location information and improved marker display. - Cleaned up unused imports and optimized the code for better readability. --- .../src/routes/adventures/[id]/+page.svelte | 971 +++++++++--------- 1 file changed, 490 insertions(+), 481 deletions(-) diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte index 4d5d335..34144bb 100644 --- a/frontend/src/routes/adventures/[id]/+page.svelte +++ b/frontend/src/routes/adventures/[id]/+page.svelte @@ -1,12 +1,12 @@ {#if notFound} -
-
-
- Lost -
-

- {$t('adventures.not_found')} -

-

- {$t('adventures.not_found_desc')} -

-
- +
+
+
+ Lost +

{$t('adventures.not_found')}

+

{$t('adventures.not_found_desc')}

+
@@ -159,537 +142,563 @@ {/if} {#if !adventure && !notFound} -
- +
+
+ +
{/if} {#if adventure} {#if data.user && data.user.uuid == adventure.user_id} -
- +
{/if} -
-
-
-
- {#if adventure.images && adventure.images.length > 0} -
- {#each adventure.images as image, i} - - - -
- - - (image_url = image.image)}> - {adventure.name} +
+ {#if adventure.images && adventure.images.length > 0} +
+
+ {#each adventure.images as image, i} +
+ +
+ {/each} + +
+
+

{adventure.name}

+ + + {#if adventure.rating !== undefined && adventure.rating !== null} +
+
+ {#each Array.from({ length: 5 }, (_, i) => i + 1) as star} + - - -
- {#each adventure.images as _, i} - - {/each} -
+ {/each}
- {/each} -
- {/if} - -
-
-
-

{adventure.name}

-
- {#if adventure.rating !== undefined && adventure.rating !== null} -
-
- {#each Array.from({ length: 5 }, (_, i) => i + 1) as star} - - {/each} -
-
- {/if} -
-
-
- {#if adventure.user} -
- {#if adventure.user.profile_pic} -
-
- {adventure.user.username} -
-
- {:else} -
-
- {adventure.user.first_name - ? adventure.user.first_name.charAt(0) - : adventure.user.username.charAt(0)}{adventure.user.last_name - ? adventure.user.last_name.charAt(0) - : ''} -
-
- {/if} + {/if} -
- {#if adventure.user.public_profile} - - {adventure.user.first_name || adventure.user.username}{' '} - {adventure.user.last_name} - - {:else} - - {adventure.user.first_name || adventure.user.username}{' '} - {adventure.user.last_name} - - {/if} -
-
- {/if} -
- - - - - {adventure.is_public ? 'Public' : 'Private'} + +
+
+ {adventure.category?.display_name} + {adventure.category?.icon}
- {#if adventure.location} -
- - - - - {adventure.location} +
+ πŸ“ {adventure.location}
{/if} - {#if adventure.activity_types && adventure.activity_types?.length > 0} -
- - - - {adventure.activity_types.join(', ')} -
- {/if} - {#if adventure.link} -
- - - - - - {adventure.link.length > 45 - ? `${adventure.link.slice(0, 45)}...` - : adventure.link} - + {#if adventure.visits.length > 0} +
+ 🎯 {adventure.visits.length} + {adventure.visits.length === 1 ? 'Visit' : 'Visits'}
{/if}
- {#if adventure.description} -

-
- {@html DOMPurify.sanitize(renderMarkdown(adventure.description))} -
+ + + {#if adventure.images.length > 1} +
+ {#each adventure.images as _, i} + + {/each} +
{/if}
-
-
-
-

{$t('adventures.adventure_details')}

-
-
-
-

{$t('adventures.adventure_type')}

-

- {adventure.category?.display_name + ' ' + adventure.category?.icon} -

+
+ {:else} + +
+
+
+

{adventure.name}

+ {#if adventure.rating !== undefined && adventure.rating !== null} +
+
+ {#each Array.from({ length: 5 }, (_, i) => i + 1) as star} + + {/each}
- {#if data.props.collection} -
-

{$t('adventures.collection')}

- {data.props.collection.name} + {/if} +
+
+
+ {/if} +
+ + +
+
+ +
+ + {#if adventure.user} +
+
+
+ {#if adventure.user.profile_pic} +
+
+ {adventure.user.username} +
+
+ {:else} +
+
+ + {adventure.user.first_name + ? adventure.user.first_name.charAt(0) + : adventure.user.username.charAt(0)}{adventure.user.last_name + ? adventure.user.last_name.charAt(0) + : ''} + +
{/if} - {#if adventure.visits.length > 0} -
-

Visits

-

- {adventure.visits.length} - {adventure.visits.length > 1 - ? $t('adventures.visits') - : $t('adventures.visit') + ':'} -

- - {#each adventure.visits as visit} -
- {#if isAllDay(visit.start_date)} -

- All Day - {visit.start_date.split('T')[0]} – {visit.end_date.split('T')[0]} -

- {:else} -

- {#if visit.timezone} - - πŸ•“ {visit.timezone}
- {DateTime.fromISO(visit.start_date, { zone: 'utc' }) - .setZone(visit.timezone) - .toLocaleString(DateTime.DATETIME_MED)} – - {DateTime.fromISO(visit.end_date, { zone: 'utc' }) - .setZone(visit.timezone) - .toLocaleString(DateTime.DATETIME_MED)} - {:else} - - πŸ•“ Local Time
- {DateTime.fromISO(visit.start_date).toLocaleString( - DateTime.DATETIME_MED - )} – - {DateTime.fromISO(visit.end_date).toLocaleString( - DateTime.DATETIME_MED - )} - {/if} -

- {/if} +
+
+ {#if adventure.user.public_profile} + + {adventure.user.first_name || adventure.user.username} + {adventure.user.last_name || ''} + + {:else} + {adventure.user.first_name || adventure.user.username} + {adventure.user.last_name || ''} + {/if} +
+
+
+ {adventure.is_public ? '🌍 Public' : 'πŸ”’ Private'} +
+ {#if data.props.collection} +
+ πŸ“š {data.props.collection.name} +
+ {/if} +
+
+
+
+
+ {/if} - {#if visit.notes} -

"{visit.notes}"

+ + {#if adventure.description} +
+
+

πŸ“ Description

+
+ {@html DOMPurify.sanitize(renderMarkdown(adventure.description))} +
+
+
+ {/if} + + + {#if adventure.visits.length > 0} +
+
+

🎯 Visit History

+
+ {#each adventure.visits as visit, index} +
+
+
+ {#if index < adventure.visits.length - 1} +
+ {/if} +
+
+
+
+ {#if isAllDay(visit.start_date)} +
+ All Day + + {visit.start_date.split('T')[0]} – {visit.end_date.split('T')[0]} + +
+ {:else} +
+
+ πŸ•“ Timed + {#if visit.timezone} + {visit.timezone} + {/if} +
+
+ {#if visit.timezone} + Start: + {DateTime.fromISO(visit.start_date, { zone: 'utc' }) + .setZone(visit.timezone) + .toLocaleString(DateTime.DATETIME_MED)}
+ End: + {DateTime.fromISO(visit.end_date, { zone: 'utc' }) + .setZone(visit.timezone) + .toLocaleString(DateTime.DATETIME_MED)} + {:else} + Start: + {DateTime.fromISO(visit.start_date).toLocaleString( + DateTime.DATETIME_MED + )}
+ End: + {DateTime.fromISO(visit.end_date).toLocaleString( + DateTime.DATETIME_MED + )} + {/if} +
+
+ {/if} + {#if visit.notes} +
+

"{visit.notes}"

+
+ {/if} +
+
+
+
+ {/each} +
+
+
+ {/if} + + + {#if (adventure.longitude && adventure.latitude) || geojson} +
+
+

πŸ—ΊοΈ Location & Route

+ + {#if adventure.longitude && adventure.latitude} + +
+
+
+

🎯 Coordinates

+
GPS
+
+ +
+
+
Latitude
+
{adventure.latitude}Β°
+
+
+
+ Longitude +
+
{adventure.longitude}Β°
+
+
+ + + {#if adventure.city || adventure.region || adventure.country} +
+ {#if adventure.city} + + {/if} + {#if adventure.region} + + {/if} + {#if adventure.country} + {/if}
- {/each} -
- {/if} -
- {#if (adventure.longitude && adventure.latitude) || geojson} - {#if adventure.longitude && adventure.latitude} -
-
-

{$t('adventures.latitude')}

-

{adventure.latitude}Β° N

-
-
-

{$t('adventures.longitude')}

-

{adventure.longitude}Β° W

-
-
- {/if} - {#if adventure.longitude && adventure.latitude} -
-

{$t('adventures.open_in_maps')}:

-
+ {/if} + + +
Apple + 🍎 Apple + Google + 🌍 Google + OSM + πŸ—ΊοΈ OSM + +
+ + +
+ +
- {/if} +
+ {/if} + +
- {#if geojson} - {/if} - - - {#if adventure.longitude && adventure.latitude} -
{adventure.name}
-

- {adventure.category?.display_name + ' ' + adventure.category?.icon} -

- {#if adventure.visits.length > 0} -

- {#each adventure.visits as visit} -

-

- {#if isAllDay(visit.start_date)} - All Day - {visit.start_date.split('T')[0]} – {visit.end_date.split( - 'T' - )[0]} - {:else} - - Local: - {DateTime.fromISO(visit.start_date).toLocaleString( - DateTime.DATETIME_MED - )} – - {DateTime.fromISO(visit.end_date).toLocaleString( - DateTime.DATETIME_MED - )} - - {/if} -

- - {#if !isAllDay(visit.start_date) && visit.timezone} -

- {visit.timezone}: - {DateTime.fromISO(visit.start_date, { zone: 'utc' }) - .setZone(visit.timezone) - .toLocaleString(DateTime.DATETIME_MED)} – - {DateTime.fromISO(visit.end_date, { zone: 'utc' }) - .setZone(visit.timezone) - .toLocaleString(DateTime.DATETIME_MED)} -

- {/if} - - {#if visit.notes} -

- "{visit.notes}" -

- {/if} -
- {/each} +
+
{adventure.name}
+

+ {adventure.category?.display_name + ' ' + adventure.category?.icon}

- {/if} + {#if adventure.visits.length > 0} +
+ {adventure.visits.length} visit{adventure.visits.length !== 1 + ? 's' + : ''} +
+ {/if} +
{/if} - {/if} +
+
+ {/if} +
- - -
- {#if adventure.sun_times && adventure.sun_times.length > 0} -

{$t('adventures.additional_info')}

- {#if adventure.sun_times && adventure.sun_times.length > 0} -
- -
- - {$t('adventures.sunrise_sunset')} - - -
- -
-
- - {#each adventure.sun_times as sun_time} -
-
-

Date

-

- {new Date(sun_time.date).toLocaleDateString()} -

-
-
-

Sunrise

-

- {sun_time.sunrise} -

-
-
-

Sunset

-

- {sun_time.sunset} -

-
-
- {/each} -
-
-
- {/if} - {/if} - - {#if adventure.attachments && adventure.attachments.length > 0} + +
+ +
+
+

ℹ️ Quick Info

+
+ {#if adventure.activity_types && adventure.activity_types?.length > 0}
- -

- {$t('adventures.attachments')} -
- -
-

- -
- {#if adventure.attachments && adventure.attachments.length > 0} -
- {#each adventure.attachments as attachment} - - {/each} -
- {/if} +
Activities
+
+ {#each adventure.activity_types as activity} + {activity} + {/each}
{/if} - {#if adventure.images && adventure.images.length > 0} + {#if adventure.link}
-

{$t('adventures.images')}

-
- {#if adventure.images && adventure.images.length > 0} -
- {#each adventure.images as image} -
- - - - -
(image_url = image.image)} - >
- {#if image.is_primary} -
- {$t('adventures.primary')} -
- {/if} -
- {/each} -
- {/if} -
+
External Link
+ + {adventure.link.length > 30 + ? `${adventure.link.slice(0, 30)}...` + : adventure.link} +
{/if}
+ + + {#if adventure.sun_times && adventure.sun_times.length > 0} +
+
+

+ πŸŒ… Sun Times + +

+
+ {#each adventure.sun_times as sun_time} +
+
+ {new Date(sun_time.date).toLocaleDateString()} +
+
+ Sunrise: {sun_time.sunrise} β€’ Sunset: {sun_time.sunset} +
+
+ {/each} +
+
+
+ {/if} + + + {#if adventure.attachments && adventure.attachments.length > 0} +
+
+

+ πŸ“Ž Attachments +
+ +
+

+
+ {#each adventure.attachments as attachment} + + {/each} +
+
+
+ {/if} + + + {#if adventure.images && adventure.images.length > 1} +
+
+

πŸ–ΌοΈ Gallery

+
+ {#each adventure.images as image} +
+
(image_url = image.image)} + on:keydown={(e) => e.key === 'Enter' && (image_url = image.image)} + role="button" + tabindex="0" + >
+ {#if image.is_primary} +
+ Primary +
+ {/if} +
+ {/each} +
+
+
+ {/if}
-
+
{/if} - {data.props.adventure && data.props.adventure.name + <title> + {data.props.adventure && data.props.adventure.name ? `${data.props.adventure.name}` - : 'Adventure'} + : 'Adventure'} +