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>

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

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

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>

34
web-app/src/routes/+layout.svelte
View File

@@ -1,8 +1,14 @@
<script lang="ts">
import "../app.css";
import { page } from "$app/stores";
const { data, children } = $props();
const isProjectRoute = $derived($page.url.pathname.startsWith("/website"));
const routeName = $derived(
$page.url.pathname === "/"
? "Dashboard"
: `${$page.url.pathname.charAt(1).toUpperCase()}${$page.url.pathname.slice(2)}`
);
</script>
<nav>
@@ -18,7 +24,7 @@
{#if !isProjectRoute}
<header>
<h1>{$page.url.pathname}</h1>
<h1>{routeName}</h1>
</header>
{/if}
@@ -42,28 +48,28 @@
margin-inline: auto;
}
nav {
display: flex;
align-items: center;
gap: 1rem;
overflow-x: auto;
}
nav > *:first-child {
margin-inline-end: auto;
}
footer {
text-align: center;
margin-block-start: auto;
}
.editor {
inline-size: min(100% - 2rem, 1536px);
block-size: calc(100vh - 7rem);
border: 0.0625rem solid hsl(0 0% 50%);
border: var(--border-primary);
overflow-y: auto;
display: flex;
padding-block: 0;
}
:global(section) {
display: flex;
flex-direction: column;
gap: 1rem;
}
:global(form) {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
</style>