thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add some base styles

Browse Source
This commit is contained in:
Thilo Hohlt
2024-08-02 15:33:18 +02:00
parent b0666f4a8c
commit c86bc68e5c
9 changed files with 520 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
web-app/src/routes/(authenticated)/+page.svelte
View File

@@ -3,6 +3,7 @@
import DateTime from "$lib/components/DateTime.svelte";
import { sortOptions } from "$lib/utils.js";
import { page } from "$app/stores";
import Modal from "$lib/components/Modal.svelte";
const { form, data } = $props();
</script>
@@ -18,21 +19,25 @@
<section>
<h2>Create website</h2>
<form method="POST" action="?/createWebsite" use:enhance>
<label>
Type:
<select name="content-type">
<option value="Blog">Blog</option>
<option value="Docs">Docs</option>
</select>
</label>
<label>
Title:
<input type="text" name="title" />
</label>
<Modal id="create-website" text="Create website">
<h3>Create website</h3>
<button type="submit">Submit</button>
</form>
<form method="POST" action="?/createWebsite" use:enhance>
<label>
Type:
<select name="content-type">
<option value="Blog">Blog</option>
<option value="Docs">Docs</option>
</select>
</label>
<label>
Title:
<input type="text" name="title" />
</label>
<button type="submit">Submit</button>
</form>
</Modal>
</section>
{#if data.totalWebsiteCount > 0}
@@ -69,52 +74,85 @@
<button type="submit">Submit</button>
</form>
{#each data.websites as { id, content_type, title, created_at }}
<article>
<h3>
<a href="/website/{id}">{title}</a>
</h3>
<p>
<strong>Type:</strong>
{content_type}
</p>
<p>
<strong>Created at:</strong>
<DateTime date={created_at} />
</p>
<details>
<summary>Update</summary>
<form
method="POST"
action="?/updateWebsite"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="id" value={id} />
<label>
Title
<input type="text" name="title" value={title} />
</label>
<div class="website-grid">
{#each data.websites as { id, content_type, title, created_at }}
<article class="website-card">
<h3>
<a href="/website/{id}">{title}</a>
</h3>
<ul>
<li>
<strong>Type:</strong>
{content_type}
</li>
<li>
<strong>Created at:</strong>
<DateTime date={created_at} />
</li>
</ul>
<div class="website-card__actions">
<Modal id="update-website-{id}" text="Update">
<h4>Update website</h4>
<button type="submit">Submit</button>
</form>
</details>
<details>
<summary>Delete</summary>
<p>
<strong>Caution!</strong>
Deleting this website will irretrievably erase all data.
</p>
<form method="POST" action="?/deleteWebsite" use:enhance>
<input type="hidden" name="id" value={id} />
<form
method="POST"
action="?/updateWebsite"
use:enhance={() => {
return async ({ update }) => {
await update({ reset: false });
};
}}
>
<input type="hidden" name="id" value={id} />
<label>
Title
<input type="text" name="title" value={title} />
</label>
<button type="submit">Permanently delete website</button>
</form>
</details>
</article>
{/each}
<button type="submit">Submit</button>
</form>
</Modal>
<Modal id="delete-website-{id}" text="Delete">
<h4>Delete website</h4>
<p>
<strong>Caution!</strong>
Deleting this website will irretrievably erase all data.
</p>
<form method="POST" action="?/deleteWebsite" use:enhance>
<input type="hidden" name="id" value={id} />
<button type="submit">Permanently delete website</button>
</form>
</Modal>
</div>
</article>
{/each}
</div>
</section>
{/if}
<style>
.website-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 35ch), 1fr));
margin-block-start: 1rem;
}
.website-card {
border: var(--border-primary);
display: flex;
flex-direction: column;
gap: 1rem;
padding-inline: 1rem;
padding-block: 2rem;
}
.website-card__actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
</style>