alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more localization

Browse Source
This commit is contained in:
Sean Morley
2024-10-28 15:10:14 -04:00
parent 91c0ec8c07
commit 8068fe93f7
8 changed files with 265 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/routes/adventures/+page.svelte
View File

@@ -7,6 +7,7 @@
import CategoryFilterDropdown from '$lib/components/CategoryFilterDropdown.svelte';
import NotFound from '$lib/components/NotFound.svelte';
import type { Adventure } from '$lib/types';
import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus';
@@ -174,7 +175,7 @@
tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
<p class="text-center font-bold text-lg">Create new...</p>
<p class="text-center font-bold text-lg">{$t('adventures.create_new')}</p>
<button
class="btn btn-primary"
on:click={() => {
@@ -182,7 +183,7 @@
adventureToEdit = null;
}}
>
Adventure</button
{$t('adventures.adventure')}</button
>
<!-- <button
@@ -198,8 +199,8 @@
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Page content -->
<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
<p class="text-center">This search returned {count} results.</p>
<h1 class="text-center font-bold text-4xl mb-6">{$t('navbar.my_adventures')}</h1>
<p class="text-center">{count} {$t('adventures.count_txt')}</p>
{#if adventures.length === 0}
<NotFound error={undefined} />
{/if}
@@ -208,7 +209,7 @@
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
on:click={toggleSidebar}
>
{sidebarOpen ? 'Close Filters' : 'Open Filters'}
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
</button>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
@@ -250,8 +251,8 @@
<form method="get">
<CategoryFilterDropdown bind:types={typeString} />
<div class="divider"></div>
<h3 class="text-center font-bold text-lg mb-4">Sort</h3>
<p class="text-lg font-semibold mb-2">Order Direction</p>
<h3 class="text-center font-bold text-lg mb-4">{$t('adventures.sort')}</h3>
<p class="text-lg font-semibold mb-2">{$t('adventures.order_direction')}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
@@ -259,7 +260,7 @@
name="order_direction"
id="asc"
value="asc"
aria-label="Ascending"
aria-label={$t('adventures.ascending')}
checked={currentSort.order === 'asc'}
/>
<input
@@ -268,55 +269,55 @@
name="order_direction"
id="desc"
value="desc"
aria-label="Descending"
aria-label={$t('adventures.descending')}
checked={currentSort.order === 'desc'}
/>
</div>
<br />
<p class="text-lg font-semibold mt-2 mb-2">Order By</p>
<div class="flex join overflow-auto">
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.order_by')}</p>
<div class="flex flex-wrap gap-2">
<input
class="join-item btn btn-neutral"
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="updated_at"
value="updated_at"
aria-label="Updated"
aria-label={$t('adventures.updated')}
checked={currentSort.order_by === 'updated_at'}
/>
<input
class="join-item btn btn-neutral"
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="name"
aria-label="Name"
aria-label={$t('adventures.name')}
value="name"
checked={currentSort.order_by === 'name'}
/>
<input
class="join-item btn btn-neutral"
class="btn btn-neutral text-wrap"
type="radio"
value="date"
name="order_by"
id="date"
aria-label="Date"
aria-label={$t('adventures.date')}
checked={currentSort.order_by === 'date'}
/>
<input
class="join-item btn btn-neutral"
class="btn btn-neutral text-wrap"
type="radio"
name="order_by"
id="rating"
aria-label="Rating"
aria-label={$t('adventures.rating')}
value="rating"
checked={currentSort.order_by === 'rating'}
/>
</div>
<br />
<p class="text-lg font-semibold mt-2 mb-2">Sources</p>
<p class="text-lg font-semibold mt-2 mb-2">{$t('adventures.sources')}</p>
<label class="label cursor-pointer">
<span class="label-text">Include Collection Adventures</span>
<span class="label-text">{$t('adventures.collection_adventures')}</span>
<input
type="checkbox"
name="include_collections"
@@ -325,7 +326,7 @@
checked={currentSort.includeCollections}
/>
</label>
<button type="submit" class="btn btn-success mt-4">Filter</button>
<button type="submit" class="btn btn-success mt-4">{$t('adventures.filter')}</button>
</form>
</div>
</ul>
@@ -333,6 +334,6 @@
</div>
<svelte:head>
<title>Adventures</title>
<title>{$t('navbar.adventures')}</title>
<meta name="description" content="View your completed and planned adventures." />
</svelte:head>

30
frontend/src/routes/adventures/[id]/+page.svelte
View File

@@ -49,14 +49,15 @@
<img src={Lost} alt="Lost" class="w-1/2" />
</div>
<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Adventure not Found
{$t('adventures.not_found')}
</h1>
<p class="mt-4 text-muted-foreground">
The adventure you were looking for could not be found. Please try a different adventure or
check back later.
{$t('adventures.not_found_desc')}
</p>
<div class="mt-6">
<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
<button class="btn btn-primary" on:click={() => goto('/')}
>{$t('adventures.homepage')}</button
>
</div>
</div>
</div>
@@ -258,18 +259,18 @@
></div>
<div class="grid gap-8">
<div>
<h2 class="text-2xl font-bold mt-4">Adventure Details</h2>
<h2 class="text-2xl font-bold mt-4">{$t('adventures.adventure_details')}</h2>
<div class="grid gap-4 mt-4">
<div class="grid md:grid-cols-2 gap-4">
<div>
<p class="text-sm text-muted-foreground">Adventure Type</p>
<p class="text-sm text-muted-foreground">{$t('adventures.adventure_type')}</p>
<p class="text-base font-medium">
{$t(`adventures.activities.${adventure.type}`)}
</p>
</div>
{#if data.props.collection}
<div>
<p class="text-sm text-muted-foreground">Collection</p>
<p class="text-sm text-muted-foreground">{$t('adventures.collection')}</p>
<a
class="text-base font-medium link"
href="/collections/{data.props.collection.id}">{data.props.collection.name}</a
@@ -281,7 +282,9 @@
<p class="text-sm text-muted-foreground">Visits</p>
<p class="text-base font-medium">
{adventure.visits.length}
{adventure.visits.length > 1 ? 'visits' : 'visit' + ':'}
{adventure.visits.length > 1
? $t('adventures.visits')
: $t('adventures.visit') + ':'}
</p>
<!-- show each visit start and end date as well as notes -->
{#each adventure.visits as visit}
@@ -310,11 +313,11 @@
{#if adventure.longitude && adventure.latitude}
<div class="grid md:grid-cols-2 gap-4">
<div>
<p class="text-sm text-muted-foreground">Latitude</p>
<p class="text-sm text-muted-foreground">{$t('adventures.latitude')}</p>
<p class="text-base font-medium">{adventure.latitude}° N</p>
</div>
<div>
<p class="text-sm text-muted-foreground">Longitude</p>
<p class="text-sm text-muted-foreground">{$t('adventures.longitude')}</p>
<p class="text-base font-medium">{adventure.longitude}° W</p>
</div>
</div>
@@ -336,13 +339,6 @@
<p class="font-semibold text-black text-md">
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
</p>
<p>
<!-- {adventure.date
? new Date(adventure.date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})
: ''} -->
</p>
{#if adventure.visits.length > 0}
<p class="text-black text-sm">
{#each adventure.visits as visit}

28
frontend/src/routes/collections/+page.svelte
View File

@@ -6,6 +6,7 @@
import NewCollection from '$lib/components/NewCollection.svelte';
import NotFound from '$lib/components/NotFound.svelte';
import type { Collection } from '$lib/types';
import { t } from 'svelte-i18n';
import Plus from '~icons/mdi/plus';
@@ -142,7 +143,7 @@
tabindex="0"
class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
>
<p class="text-center font-bold text-lg">Create new...</p>
<p class="text-center font-bold text-lg">{$t(`adventures.create_new`)}</p>
<button
class="btn btn-primary"
on:click={() => {
@@ -150,7 +151,7 @@
newType = 'visited';
}}
>
Collection</button
{$t(`adventures.collection`)}</button
>
<!-- <button
@@ -166,8 +167,8 @@
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Page content -->
<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
<p class="text-center">This search returned {count} results.</p>
<h1 class="text-center font-bold text-4xl mb-6">{$t(`adventures.my_collections`)}</h1>
<p class="text-center">{count} {$t(`adventures.count_txt`)}</p>
{#if collections.length === 0}
<NotFound error={undefined} />
{/if}
@@ -176,7 +177,7 @@
class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
on:click={toggleSidebar}
>
{sidebarOpen ? 'Close Filters' : 'Open Filters'}
{sidebarOpen ? $t(`adventures.close_filters`) : $t(`adventures.open_filters`)}
</button>
<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
@@ -217,8 +218,8 @@
<!-- Sidebar content here -->
<div class="form-control">
<form action="?/get" method="post" use:enhance={handleSubmit}>
<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
<p class="text-lg font-semibold mb-2">Order Direction</p>
<h3 class="text-center font-semibold text-lg mb-4">{$t(`adventures.sort`)}</h3>
<p class="text-lg font-semibold mb-2">{$t(`adventures.order_direction`)}</p>
<div class="join">
<input
class="join-item btn btn-neutral"
@@ -226,7 +227,7 @@
name="order_direction"
id="asc"
value="asc"
aria-label="Ascending"
aria-label={$t(`adventures.ascending`)}
checked
/>
<input
@@ -235,7 +236,7 @@
name="order_direction"
id="desc"
value="desc"
aria-label="Descending"
aria-label={$t(`adventures.descending`)}
/>
</div>
<br />
@@ -249,13 +250,16 @@
value="name"
hidden
/>
<button type="submit" class="btn btn-success btn-primary mt-4">Sort</button>
<button type="submit" class="btn btn-success btn-primary mt-4"
>{$t(`adventures.sort`)}</button
>
</form>
<div class="divider"></div>
<button
type="submit"
class="btn btn-neutral btn-primary mt-4"
on:click={() => goto('/collections/archived')}>Archived Collections</button
on:click={() => goto('/collections/archived')}
>{$t(`adventures.archived_collections`)}</button
>
</div>
</ul>
@@ -263,6 +267,6 @@
</div>
<svelte:head>
<title>Collections</title>
<title>{$t(`navbar.collections`)}</title>
<meta name="description" content="View your adventure collections." />
</svelte:head>