mirror of
https://github.com/thiloho/archtika.git
synced 2025-11-22 10:51:36 +01:00
Add some base styles
This commit is contained in:
Thilo Hohlt
@@ -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>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from "$app/forms";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
|
||||
const { data, form } = $props();
|
||||
</script>
|
||||
@@ -36,12 +37,21 @@
|
||||
<section>
|
||||
<h2>Delete account</h2>
|
||||
|
||||
<form method="POST" action="?/deleteAccount" use:enhance>
|
||||
<label>
|
||||
Password:
|
||||
<input type="password" name="password" required />
|
||||
</label>
|
||||
<Modal id="delete-account" text="Delete account">
|
||||
<h3>Delete account</h3>
|
||||
|
||||
<button type="submit">Delete account</button>
|
||||
</form>
|
||||
<p>
|
||||
<strong>Caution!</strong>
|
||||
Deleting your account will irretrievably erase all data.
|
||||
</p>
|
||||
|
||||
<form method="POST" action="?/deleteAccount" use:enhance>
|
||||
<label>
|
||||
Password:
|
||||
<input type="password" name="password" required />
|
||||
</label>
|
||||
|
||||
<button type="submit">Permanently delete account</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</section>
|
||||
|
||||
@@ -20,114 +20,114 @@
|
||||
previewContent={data.home.main_content}
|
||||
>
|
||||
<section>
|
||||
<h2>Settings</h2>
|
||||
<h2>Global</h2>
|
||||
<form
|
||||
action="?/updateGlobal"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Light accent color:
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color-light"
|
||||
value={data.globalSettings.accent_color_light_theme}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Light accent color:
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color-dark"
|
||||
value={data.globalSettings.accent_color_dark_theme}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Favicon:
|
||||
<input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
|
||||
</label>
|
||||
|
||||
<section>
|
||||
<h3>Global</h3>
|
||||
<form
|
||||
action="?/updateGlobal"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Light accent color:
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color-light"
|
||||
value={data.globalSettings.accent_color_light_theme}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Light accent color:
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color-dark"
|
||||
value={data.globalSettings.accent_color_dark_theme}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Favicon:
|
||||
<input type="file" name="favicon" accept={ALLOWED_MIME_TYPES.join(", ")} />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Header</h2>
|
||||
|
||||
<section>
|
||||
<h3>Header</h3>
|
||||
<form
|
||||
action="?/updateHeader"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Logo type:
|
||||
<select name="logo-type">
|
||||
<option value="text" selected={"text" === data.header.logo_type}>Text</option>
|
||||
<option value="image" selected={"image" === data.header.logo_type}>Image</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Logo text:
|
||||
<input type="text" name="logo-text" value={data.header.logo_text} />
|
||||
</label>
|
||||
<label>
|
||||
Logo image:
|
||||
<input type="file" name="logo-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
|
||||
</label>
|
||||
|
||||
<form
|
||||
action="?/updateHeader"
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Logo type:
|
||||
<select name="logo-type">
|
||||
<option value="text" selected={"text" === data.header.logo_type}>Text</option>
|
||||
<option value="image" selected={"image" === data.header.logo_type}>Image</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Logo text:
|
||||
<input type="text" name="logo-text" value={data.header.logo_text} />
|
||||
</label>
|
||||
<label>
|
||||
Logo image:
|
||||
<input type="file" name="logo-image" accept={ALLOWED_MIME_TYPES.join(", ")} />
|
||||
</label>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Home</h2>
|
||||
|
||||
<section>
|
||||
<h3>Home</h3>
|
||||
<form
|
||||
action="?/updateHome"
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Main content:
|
||||
<textarea name="main-content">{data.home.main_content}</textarea>
|
||||
</label>
|
||||
|
||||
<form
|
||||
action="?/updateHome"
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Main content:
|
||||
<textarea name="main-content">{data.home.main_content}</textarea>
|
||||
</label>
|
||||
</form>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Footer</h3>
|
||||
<section>
|
||||
<h2>Footer</h2>
|
||||
|
||||
<form
|
||||
action="?/updateFooter"
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Additional text:
|
||||
<textarea name="additional-text">{data.footer.additional_text}</textarea>
|
||||
</label>
|
||||
</form>
|
||||
</section>
|
||||
<form
|
||||
action="?/updateFooter"
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
return async ({ update }) => {
|
||||
await update({ reset: false });
|
||||
};
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
Additional text:
|
||||
<textarea name="additional-text">{data.footer.additional_text}</textarea>
|
||||
</label>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</WebsiteEditor>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { sortOptions } from "$lib/utils.js";
|
||||
import { page } from "$app/stores";
|
||||
import { enhance } from "$app/forms";
|
||||
import Modal from "$lib/components/Modal.svelte";
|
||||
|
||||
const { data, form } = $props();
|
||||
</script>
|
||||
@@ -23,14 +24,18 @@
|
||||
<section>
|
||||
<h2>Create article</h2>
|
||||
|
||||
<form method="POST" action="?/createArticle" use:enhance>
|
||||
<label>
|
||||
Title:
|
||||
<input type="text" name="title" />
|
||||
</label>
|
||||
<Modal id="create-article" text="Create article">
|
||||
<h3>Create article</h3>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<form method="POST" action="?/createArticle" use:enhance>
|
||||
<label>
|
||||
Title:
|
||||
<input type="text" name="title" />
|
||||
</label>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</section>
|
||||
|
||||
{#if data.totalArticleCount > 0}
|
||||
@@ -60,23 +65,49 @@
|
||||
</form>
|
||||
|
||||
{#each data.articles as { id, title }}
|
||||
<article>
|
||||
<article class="article-card">
|
||||
<h3>{title}</h3>
|
||||
<a href="/website/{data.website.id}/articles/{id}">Edit</a>
|
||||
<details>
|
||||
<summary>Delete</summary>
|
||||
<p>
|
||||
<strong>Caution!</strong>
|
||||
Deleting this article will irretrievably erase all data.
|
||||
</p>
|
||||
<form method="POST" action="?/deleteArticle" use:enhance>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
|
||||
<button type="submit">Permanently delete article</button>
|
||||
</form>
|
||||
</details>
|
||||
<div class="article-card__actions">
|
||||
<a href="/website/{data.website.id}/articles/{id}">Edit</a>
|
||||
<Modal id="delete-article-{id}" text="Delete">
|
||||
<h4>Delete article</h4>
|
||||
|
||||
<p>
|
||||
<strong>Caution!</strong>
|
||||
Deleting this article will irretrievably erase all data.
|
||||
</p>
|
||||
|
||||
<form method="POST" action="?/deleteArticle" use:enhance>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
|
||||
<button type="submit">Permanently delete article</button>
|
||||
</form>
|
||||
</Modal>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
</WebsiteEditor>
|
||||
|
||||
<style>
|
||||
.article-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 2rem;
|
||||
row-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.article-card:nth-of-type(1) {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.article-card__actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user