diff --git a/web-app/src/app.css b/web-app/src/app.css new file mode 100644 index 0000000..78287ea --- /dev/null +++ b/web-app/src/app.css @@ -0,0 +1,169 @@ +:root { + --bg-primary: white; + --bg-secondary: hsl(0 0% 95%); + --bg-tertiary: hsl(0 0% 90%); + + --color-text: black; + --color-text-invert: white; + --color-accent: hsl(210, 100%, 30%); + --color-success: hsl(105, 100%, 30%); + --color-error: hsl(0, 100%, 30%); + + --border-primary: 0.0625rem solid var(--bg-tertiary); + --border-radius: 0.125rem; + + color-scheme: light; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-primary: hsl(0 0% 15%); + --bg-secondary: hsl(0 0% 20%); + --bg-tertiary: hsl(0 0% 25%); + + --color-text: white; + --color-text-invert: black; + --color-accent: hsl(210, 100%, 80%); + --color-success: hsl(105, 100%, 80%); + --color-error: hsl(0, 100%, 80%); + + color-scheme: dark; + } +} + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + line-height: 1.5; + font-family: system-ui, sans-serif; + background-color: var(--bg-primary); + display: flex; + flex-direction: column; + min-block-size: 100vh; +} + +section { + display: flex; + flex-direction: column; + gap: 1rem; +} + +section + section { + margin-block-start: 2rem; +} + +button, +label, +select, +summary, +[role="button"], +[role="option"] { + cursor: pointer; +} + +input, +button, +textarea, +select, +a[role="button"] { + font: inherit; + color: inherit; + border: var(--border-primary); + border-radius: var(--border-radius); + padding-inline: 0.5rem; + padding-block: 0.25rem; +} + +input, +textarea, +select { + background-color: var(--bg-primary); +} + +a { + color: var(--color-accent); +} + +a[role="button"] { + display: inline-block; + max-inline-size: fit-content; + text-decoration: none; +} + +button, +a[role="button"] { + background-color: var(--bg-secondary); +} + +:is(button, a[role="button"]):hover { + background-color: var(--bg-tertiary); +} + +img, +picture, +svg, +video { + max-inline-size: 100%; + block-size: auto; +} + +ul, +ol { + list-style: none; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +h1, +h2, +h3, +h4 { + line-height: 1.2; + text-wrap: balance; +} + +form[method="POST"] { + display: flex; + flex-direction: column; + gap: 1rem; +} + +form > button[type="submit"] { + max-inline-size: 30ch; +} + +form[method="GET"] { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr)); + align-items: start; +} + +form[method="GET"] > button[type="submit"] { + align-self: end; +} + +form > label { + display: flex; + flex-direction: column; + gap: 0.25rem; + max-inline-size: 30ch; +} + +form > label:has(textarea) { + max-inline-size: 65ch; +} diff --git a/web-app/src/app.html b/web-app/src/app.html index 66aee01..84ffad1 100644 --- a/web-app/src/app.html +++ b/web-app/src/app.html @@ -4,7 +4,6 @@ - %sveltekit.head% diff --git a/web-app/src/lib/components/Modal.svelte b/web-app/src/lib/components/Modal.svelte new file mode 100644 index 0000000..6fe7b3e --- /dev/null +++ b/web-app/src/lib/components/Modal.svelte @@ -0,0 +1,52 @@ + + +{text} + +
+
+ {@render children()} + Close +
+ +
+ + diff --git a/web-app/src/lib/components/WebsiteEditor.svelte b/web-app/src/lib/components/WebsiteEditor.svelte index c767c95..517815d 100644 --- a/web-app/src/lib/components/WebsiteEditor.svelte +++ b/web-app/src/lib/components/WebsiteEditor.svelte @@ -12,10 +12,10 @@

{title}

-
+
+ {@render children()}
@@ -34,11 +34,22 @@ .operations { inline-size: 50%; - border-inline-end: 0.0625rem solid hsl(0 0% 50%); + border-inline-end: var(--border-primary); resize: horizontal; overflow-y: auto; } + .operations__nav { + margin-block: 1rem 2rem; + } + + .operations__nav > a { + display: inline-block; + padding-inline: 0.5rem; + padding-block: 0.25rem; + overflow-x: auto; + } + .preview { flex-grow: 1; } diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte index f8b8d16..e1be125 100644 --- a/web-app/src/routes/(authenticated)/+page.svelte +++ b/web-app/src/routes/(authenticated)/+page.svelte @@ -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(); @@ -18,21 +19,25 @@

Create website

-
- - + +

Create website

- - +
+ + + + +
+
{#if data.totalWebsiteCount > 0} @@ -69,52 +74,85 @@ - {#each data.websites as { id, content_type, title, created_at }} -
-

- {title} -

-

- Type: - {content_type} -

-

- Created at: - -

-
- Update -
{ - return async ({ update }) => { - await update({ reset: false }); - }; - }} - > - - +
+ {#each data.websites as { id, content_type, title, created_at }} +
+

+ {title} +

+
    +
  • + Type: + {content_type} +
    • +
  • + Created at: + +
    • +
+
+ +

Update website

- - -
-
- Delete -

- Caution! - Deleting this website will irretrievably erase all data. -

-
- + { + return async ({ update }) => { + await update({ reset: false }); + }; + }} + > + + - -
-
-
- {/each} + + + + +

Delete website

+ +

+ Caution! + Deleting this website will irretrievably erase all data. +

+
+ + + +
+ + + + {/each} + {/if} + + diff --git a/web-app/src/routes/(authenticated)/account/+page.svelte b/web-app/src/routes/(authenticated)/account/+page.svelte index b10ee3e..fce0127 100644 --- a/web-app/src/routes/(authenticated)/account/+page.svelte +++ b/web-app/src/routes/(authenticated)/account/+page.svelte @@ -1,5 +1,6 @@ @@ -36,12 +37,21 @@

Delete account

-
- + +

Delete account

- - +

+ Caution! + Deleting your account will irretrievably erase all data. +

+ +
+ + + +
+
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte index 302db35..38f75af 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/+page.svelte @@ -20,114 +20,114 @@ previewContent={data.home.main_content} >
-

Settings

+

Global

+
{ + return async ({ update }) => { + await update({ reset: false }); + }; + }} + > + + + -
-

Global

- { - return async ({ update }) => { - await update({ reset: false }); - }; - }} - > - - - + + +
- - -
+
+

Header

-
-

Header

+
{ + return async ({ update }) => { + await update({ reset: false }); + }; + }} + > + + + - { - return async ({ update }) => { - await update({ reset: false }); - }; - }} - > - - - + +
+
- - -
+
+

Home

-
-

Home

+
{ + return async ({ update }) => { + await update({ reset: false }); + }; + }} + > + - { - return async ({ update }) => { - await update({ reset: false }); - }; - }} - > - -
-
+ + +
-
-

Footer

+
+

Footer

-
{ - return async ({ update }) => { - await update({ reset: false }); - }; - }} - > - -
-
+
{ + return async ({ update }) => { + await update({ reset: false }); + }; + }} + > + + + +
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte index 2d1a6f8..84eb8f0 100644 --- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte +++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte @@ -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(); @@ -23,14 +24,18 @@

Create article

-
- + +

Create article

- - +
+ + + +
+
{#if data.totalArticleCount > 0} @@ -60,23 +65,49 @@ {#each data.articles as { id, title }} -
+

{title}

- Edit -
- Delete -

- Caution! - Deleting this article will irretrievably erase all data. -

-
- - -
-
+
+ Edit + +

Delete article

+ +

+ Caution! + Deleting this article will irretrievably erase all data. +

+ +
+ + + +
+ +
{/each} {/if} + + diff --git a/web-app/src/routes/+layout.svelte b/web-app/src/routes/+layout.svelte index 74896a1..746027d 100644 --- a/web-app/src/routes/+layout.svelte +++ b/web-app/src/routes/+layout.svelte @@ -1,8 +1,14 @@