Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-25 15:59:38 +02:00
Code Issues Releases Activity

refactor: enhance UI components with improved styling and layout

Browse source 
- Updated CollectionCard, CountryCard, LodgingCard, NoteCard, RegionCard, TransportationCard, UserCard, and ShareModal components for better visual consistency and responsiveness.
- Introduced hover effects and transitions for a more interactive experience.
- Improved accessibility by ensuring proper alt text for images and using semantic HTML elements.
- Refactored date formatting logic into a utility function for reuse across components.
- Added new translations for profile viewing and joined date in the localization files.
This commit is contained in:
Sean Morley 2025-05-29 17:47:58 -04:00
parent 3acfc9f228
commit 81006af027
22 changed files with 534 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/src/lib/components/UserCard.svelte
View file

@ -4,6 +4,7 @@
import type { User } from '$lib/types';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { t } from 'svelte-i18n';
import Calendar from '~icons/mdi/calendar';
@ -14,49 +15,64 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
class="card w-full max-w-xs bg-base-200 text-base-content shadow-lg border border-base-300 hover:shadow-xl transition-all"
>
<div class="card-body">
<!-- Profile Picture and User Info -->
<div class="flex flex-col items-center">
{#if user.profile_pic}
<div class="avatar mb-4">
<div class="w-24 rounded-full ring ring-primary ring-offset-neutral ring-offset-2">
<img src={user.profile_pic} alt={user.username} />
<div class="card-body items-center text-center space-y-4">
<!-- Profile Picture -->
<div class="avatar">
<div class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
{#if user.profile_pic}
<img src={user.profile_pic} alt={user.username} />
{:else}
<div
class="bg-base-300 w-full h-full flex items-center justify-center text-xl font-semibold"
>
{user.first_name?.[0] || user.username?.[0]}{user.last_name?.[0] || user.username?.[1]}
</div>
</div>
{/if}
{/if}
</div>
</div>
<h2 class="card-title text-center text-lg font-bold">
<!-- User Info -->
<div>
<h2 class="text-lg font-bold leading-tight">
{user.first_name}
{user.last_name}
</h2>
<p class="text-sm text-center">{user.username}</p>
<p class="text-sm opacity-70">@{user.username}</p>
<!-- Admin Badge -->
{#if user.is_staff}
<div class="badge badge-primary mt-2">Admin</div>
<div class="badge badge-outline badge-primary mt-2">{$t('settings.admin')}</div>
{/if}
</div>
<!-- Member Since -->
<div class="flex items-center justify-center mt-4 space-x-2 text-sm">
<Calendar class="w-5 h-5 text-primary" />
<p>
{user.date_joined ? 'Joined ' + new Date(user.date_joined).toLocaleDateString() : ''}
</p>
<!-- Join Date -->
<div class="flex items-center gap-2 text-sm text-base-content/70">
<Calendar class="w-4 h-4 text-primary" />
<span>
{user.date_joined
? `${$t('adventures.joined')} ` + new Date(user.date_joined).toLocaleDateString()
: ''}
</span>
</div>
<!-- Card Actions -->
<div class="card-actions justify-center mt-6">
<!-- Actions -->
<div class="card-actions w-full justify-center pt-2">
{#if !sharing}
<button class="btn btn-primary" on:click={() => goto(`/profile/${user.username}`)}>
View Profile
<button
class="btn btn-sm btn-primary w-full"
on:click={() => goto(`/profile/${user.username}`)}
>
{$t('adventures.view_profile')}
</button>
{:else if shared_with && !shared_with.includes(user.uuid)}
<button class="btn btn-success" on:click={() => dispatch('share', user)}> Share </button>
<button class="btn btn-sm btn-success w-full" on:click={() => dispatch('share', user)}>
{$t('adventures.share')}
</button>
{:else}
<button class="btn btn-error" on:click={() => dispatch('unshare', user)}> Unshare </button>
<button class="btn btn-sm btn-error w-full" on:click={() => dispatch('unshare', user)}>
{$t('adventures.remove')}
</button>
{/if}
</div>
</div>