mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-28 09:19:37 +02:00
Refactor adventure page layout and add dynamic content
This commit is contained in:
parent
c09028ae40
commit
d4f94b436d
9 changed files with 165 additions and 78 deletions
|
@ -4,38 +4,31 @@
|
|||
import calendar from "$lib/assets/calendar.svg";
|
||||
import { goto } from "$app/navigation";
|
||||
import { desc } from "drizzle-orm";
|
||||
import type { Adventure } from "$lib/utils/types";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let type: String;
|
||||
|
||||
export let name: String | undefined = undefined;
|
||||
export let location: String | undefined = undefined;
|
||||
export let date: String | undefined = undefined;
|
||||
export let id: Number | undefined = undefined;
|
||||
export let regionId: String | undefined = undefined;
|
||||
export let visited: Boolean | undefined = undefined;
|
||||
export let adventure: Adventure;
|
||||
|
||||
// export let name: String | undefined = undefined;
|
||||
// export let location: String | undefined = undefined;
|
||||
// export let date: String | undefined = undefined;
|
||||
// export let id: Number | undefined = undefined;
|
||||
|
||||
function remove() {
|
||||
dispatch("remove", id);
|
||||
dispatch("remove", adventure.id);
|
||||
}
|
||||
function edit() {
|
||||
dispatch("edit", id);
|
||||
dispatch("edit", adventure.id);
|
||||
}
|
||||
function add() {
|
||||
dispatch("add", { name, location });
|
||||
}
|
||||
function markVisited() {
|
||||
dispatch("markVisited", regionId);
|
||||
visited = true;
|
||||
}
|
||||
function removeVisit() {
|
||||
dispatch("removeVisit", regionId);
|
||||
visited = false;
|
||||
dispatch("add", adventure);
|
||||
}
|
||||
|
||||
function moreInfo() {
|
||||
console.log(id);
|
||||
goto(`/adventure/${id}`);
|
||||
console.log(adventure.id);
|
||||
goto(`/adventure/${adventure.id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -43,17 +36,17 @@
|
|||
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
|
||||
>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title overflow-ellipsis">{name}</h2>
|
||||
{#if location && location !== ""}
|
||||
<h2 class="card-title overflow-ellipsis">{adventure.name}</h2>
|
||||
{#if adventure.location && adventure.location !== ""}
|
||||
<div class="inline-flex items-center">
|
||||
<iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
|
||||
<p class="ml-.5">{location}</p>
|
||||
<p class="ml-.5">{adventure.location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if date && date !== ""}
|
||||
{#if adventure.date && adventure.date !== ""}
|
||||
<div class="inline-flex items-center">
|
||||
<iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
|
||||
<p class="ml-1">{date}</p>
|
||||
<p class="ml-1">{adventure.date}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="card-actions justify-end">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue