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

200
web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte
View File

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

71
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
View File

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