mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-24 07:19:36 +02:00
Refactor input and button layout in ActivityComplete component
This commit is contained in:
parent
6cb31aa125
commit
1eadac90f1
3 changed files with 30 additions and 23 deletions
|
@ -49,18 +49,21 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input
|
<div class="flex gap-2">
|
||||||
type="text"
|
<input
|
||||||
class="input input-bordered w-full"
|
type="text"
|
||||||
placeholder="Add an activity"
|
class="input input-bordered w-full"
|
||||||
bind:value={inputVal}
|
placeholder="Add an activity"
|
||||||
on:keydown={(e) => {
|
bind:value={inputVal}
|
||||||
if (e.key === 'Enter') {
|
on:keydown={(e) => {
|
||||||
e.preventDefault();
|
if (e.key === 'Enter') {
|
||||||
addActivity();
|
e.preventDefault();
|
||||||
}
|
addActivity();
|
||||||
}}
|
}
|
||||||
/>
|
}}
|
||||||
|
/>
|
||||||
|
<button type="button" class="btn btn-neutral" on:click={addActivity}>Add</button>
|
||||||
|
</div>
|
||||||
{#if inputVal && filteredItems.length > 0}
|
{#if inputVal && filteredItems.length > 0}
|
||||||
<ul class="absolute z-10 w-full bg-base-100 shadow-lg max-h-60 overflow-auto">
|
<ul class="absolute z-10 w-full bg-base-100 shadow-lg max-h-60 overflow-auto">
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
|
|
@ -533,9 +533,14 @@
|
||||||
class="textarea textarea-bordered w-full h-32"
|
class="textarea textarea-bordered w-full h-32"
|
||||||
></textarea>
|
></textarea>
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<button type="button" class="btn btn-neutral" on:click={generateDesc}
|
<div
|
||||||
>Generate Description</button
|
class="tooltip tooltip-right"
|
||||||
|
data-tip="Pulls excerpt from Wikipedia article matching the name of the adventure."
|
||||||
>
|
>
|
||||||
|
<button type="button" class="btn btn-neutral" on:click={generateDesc}
|
||||||
|
>Generate Description</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<p class="text-red-500">{wikiError}</p>
|
<p class="text-red-500">{wikiError}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -558,13 +563,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
<div class="collapse collapse-plus bg-base-200 mb-4 overflow-visible">
|
||||||
<input type="checkbox" />
|
<input type="checkbox" />
|
||||||
<div class="collapse-title text-xl font-medium">
|
<div class="collapse-title text-xl font-medium">
|
||||||
Activity Types ({adventure.activity_types?.length || 0})
|
Activity Types ({adventure.activity_types?.length || 0})
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content">
|
<div class="collapse-content">
|
||||||
<label for="activity_types">Activity Types</label><br />
|
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="activity_types"
|
id="activity_types"
|
||||||
|
@ -583,7 +587,7 @@
|
||||||
Visits ({adventure.visits.length})
|
Visits ({adventure.visits.length})
|
||||||
</div>
|
</div>
|
||||||
<div class="collapse-content">
|
<div class="collapse-content">
|
||||||
<p>hello</p>
|
<p>Coming soon!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -185,7 +185,7 @@
|
||||||
>{adventure.is_public ? 'Public' : 'Private'}</span
|
>{adventure.is_public ? 'Public' : 'Private'}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
{#if adventure.date}
|
<!-- {#if adventure.date}
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
@ -215,7 +215,7 @@
|
||||||
: ''}</span
|
: ''}</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if} -->
|
||||||
{#if adventure.location}
|
{#if adventure.location}
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<svg
|
<svg
|
||||||
|
@ -304,11 +304,11 @@
|
||||||
></div>
|
></div>
|
||||||
<div class="grid gap-8">
|
<div class="grid gap-8">
|
||||||
<div>
|
<div>
|
||||||
<h2 class="text-2xl font-bold mt-4">Trip Details</h2>
|
<h2 class="text-2xl font-bold mt-4">Adventure Details</h2>
|
||||||
<div class="grid gap-4 mt-4">
|
<div class="grid gap-4 mt-4">
|
||||||
<div class="grid md:grid-cols-2 gap-4">
|
<div class="grid md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-sm text-muted-foreground">Trip Type</p>
|
<p class="text-sm text-muted-foreground">Adventure Type</p>
|
||||||
<p class="text-base font-medium">
|
<p class="text-base font-medium">
|
||||||
{adventure.type[0].toLocaleUpperCase() + adventure.type.slice(1)}
|
{adventure.type[0].toLocaleUpperCase() + adventure.type.slice(1)}
|
||||||
</p>
|
</p>
|
||||||
|
@ -353,11 +353,11 @@
|
||||||
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
|
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
{adventure.date
|
<!-- {adventure.date
|
||||||
? new Date(adventure.date).toLocaleDateString(undefined, {
|
? new Date(adventure.date).toLocaleDateString(undefined, {
|
||||||
timeZone: 'UTC'
|
timeZone: 'UTC'
|
||||||
})
|
})
|
||||||
: ''}
|
: ''} -->
|
||||||
</p>
|
</p>
|
||||||
</Popup>
|
</Popup>
|
||||||
</DefaultMarker>
|
</DefaultMarker>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue