1
0
Fork 0
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:
Sean Morley 2024-09-30 18:16:08 -04:00
parent 6cb31aa125
commit 1eadac90f1
3 changed files with 30 additions and 23 deletions

View file

@ -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 -->

View file

@ -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>

View file

@ -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>