From 3bff75d37d6af54e0a57d5452d0bf5da3a014e23 Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Fri, 6 Jun 2025 21:12:26 +0100 Subject: [PATCH 1/3] feat(components): :lipstick: create basic UI structure --- src/app.css | 44 +++++++++++++++++-------- src/app.html | 1 + src/lib/components/header.svelte | 6 ++++ src/lib/components/logic/dev.svelte.ts | 19 +++++++++++ src/lib/components/logic/view.svelte.ts | 11 +++++++ src/lib/components/main.svelte | 19 +++++++++++ src/lib/components/view/dash.svelte | 29 ++++++++++++++++ src/lib/components/view/detail.svelte | 15 +++++++++ src/lib/components/view/list.svelte | 30 +++++++++++++++++ src/lib/types/ui.ts | 1 + src/lib/utils/random.ts | 3 ++ src/routes/+page.svelte | 11 ++++--- vite.config.ts | 5 ++- 13 files changed, 176 insertions(+), 18 deletions(-) create mode 100644 src/lib/components/header.svelte create mode 100644 src/lib/components/logic/dev.svelte.ts create mode 100644 src/lib/components/logic/view.svelte.ts create mode 100644 src/lib/components/main.svelte create mode 100644 src/lib/components/view/dash.svelte create mode 100644 src/lib/components/view/detail.svelte create mode 100644 src/lib/components/view/list.svelte create mode 100644 src/lib/types/ui.ts create mode 100644 src/lib/utils/random.ts diff --git a/src/app.css b/src/app.css index 55ed15e..851d538 100644 --- a/src/app.css +++ b/src/app.css @@ -2,22 +2,40 @@ @import '@fontsource/metropolis'; @theme { - --pink: #d600a8; - --black: #000000; - --white: #ffffff; - --light-pink: #ff2ed2; - --teal: #00a7a8; - --yellow: #ffcb00; - --orange: #ec5d2a; - --green: #29e2a3; - --purple: #7900d6; - --bright-blue: #2235e2; - --dark-purple: #4d1b9b; + --color-black: #000000; + --color-blue-bright: #2235e2; + --color-green: #29e2a3; + --color-orange: #ec5d2a; + --color-pink: #d600a8; + --color-pink-light: #ff2ed2; + --color-purple: #7900d6; + --color-purple-dark: #4d1b9b; + --color-teal: #00a7a8; + --color-white: #ffffff; + --color-yellow: #ffcb00; --font-family-sans: Metropolis, Arial; } body { - background-color: var(--white); - color: var(--black); + background-color: var(--color-white); + color: var(--color-black); font-family: var(--font-family-sans); } + +.dev { + margin: 1rem; + outline: 2px dashed var(--color-purple-dark); + padding: 1rem; +} + +.tile { + outline: 3px dashed var(--color-purple); +} + +.list { + outline: 1px dashed var(--color-pink); +} + +.button { + outline: 2px dashed var(--color-pink-light); +} diff --git a/src/app.html b/src/app.html index 77a5ff5..ae678f9 100644 --- a/src/app.html +++ b/src/app.html @@ -6,6 +6,7 @@ %sveltekit.head% +
%sveltekit.body%
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte new file mode 100644 index 0000000..3203585 --- /dev/null +++ b/src/lib/components/header.svelte @@ -0,0 +1,6 @@ + + +
+

header

+
\ No newline at end of file diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts new file mode 100644 index 0000000..073d7d0 --- /dev/null +++ b/src/lib/components/logic/dev.svelte.ts @@ -0,0 +1,19 @@ +let tileNum = $state(0); + +export function setTileNum(num: number) { + tileNum = num; +} + +export function getTileNum(): number { + return tileNum; +} + +let listNum = $state(0); + +export function setListNum(num: number) { + listNum = num; +} + +export function getListNum(): number { + return listNum; +} \ No newline at end of file diff --git a/src/lib/components/logic/view.svelte.ts b/src/lib/components/logic/view.svelte.ts new file mode 100644 index 0000000..c66ae19 --- /dev/null +++ b/src/lib/components/logic/view.svelte.ts @@ -0,0 +1,11 @@ +import type { View } from "$lib/types/ui"; + +let view = $state("dash"); + +export function setView(newView: View) { + view = newView; +}; + +export function getView(): View { + return view; +} \ No newline at end of file diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte new file mode 100644 index 0000000..0132e90 --- /dev/null +++ b/src/lib/components/main.svelte @@ -0,0 +1,19 @@ + + +
+

main

+ + {#if getView() === "dash"} + + {:else if getView() === "list"} + + {:else if getView() === "detail"} + + {/if} +
\ No newline at end of file diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte new file mode 100644 index 0000000..ec64363 --- /dev/null +++ b/src/lib/components/view/dash.svelte @@ -0,0 +1,29 @@ + + +
+

view/dash

+ +

There should be {tileCountNum} {tileCountText}

+ + {#each [...Array(tileCountNum)] as _, i} + {@const thisList = randomNum()} + + {/each} +
\ No newline at end of file diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte new file mode 100644 index 0000000..9d11a98 --- /dev/null +++ b/src/lib/components/view/detail.svelte @@ -0,0 +1,15 @@ + + +
+

view/detail

+ + +
\ No newline at end of file diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte new file mode 100644 index 0000000..f341f14 --- /dev/null +++ b/src/lib/components/view/list.svelte @@ -0,0 +1,30 @@ + + +
+

view/list

+ + + +

There should be {entries} List Items

+ + {#each [...Array(entries)] as _, i} + + {/each} +
\ No newline at end of file diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts new file mode 100644 index 0000000..7b55944 --- /dev/null +++ b/src/lib/types/ui.ts @@ -0,0 +1 @@ +export type View = "dash" | "list" | "detail"; \ No newline at end of file diff --git a/src/lib/utils/random.ts b/src/lib/utils/random.ts new file mode 100644 index 0000000..29d745c --- /dev/null +++ b/src/lib/utils/random.ts @@ -0,0 +1,3 @@ +export function randomNum() { + return Math.ceil(Math.random() * 10); +} \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c65b0ee..3350d16 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,4 +1,7 @@ -

Welcome to SvelteKit

-

- Visit svelte.dev/docs/kit to read the documentation -

+ + +
+
\ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index d2258dd..05c4998 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,7 +4,10 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ - plugins: [tailwindcss(), sveltekit()], + plugins: [ + tailwindcss(), + sveltekit() + ], test: { workspace: [ { From 81bf8c3466f447efe2013ed42730ecc768657210 Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sat, 7 Jun 2025 16:09:59 +0100 Subject: [PATCH 2/3] feat(components): :building_construction: move header from page to layout --- src/routes/+layout.svelte | 3 +++ src/routes/+page.svelte | 2 -- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b93e9ba..edb4470 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,10 @@ +
+ {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3350d16..6796c77 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,7 +1,5 @@ -
\ No newline at end of file From d889126e5270d1c6e07c8eb5384955506c12680a Mon Sep 17 00:00:00 2001 From: Jason Warren Date: Sat, 7 Jun 2025 16:23:07 +0100 Subject: [PATCH 3/3] style: :lipstick: dev move style tweaks --- src/app.css | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/app.css b/src/app.css index 851d538..897a8f1 100644 --- a/src/app.css +++ b/src/app.css @@ -24,18 +24,12 @@ body { .dev { margin: 1rem; - outline: 2px dashed var(--color-purple-dark); + outline: 2px dashed var(--color-teal); padding: 1rem; } -.tile { - outline: 3px dashed var(--color-purple); -} +.tile { outline-color: var(--color-blue-bright); } -.list { - outline: 1px dashed var(--color-pink); -} +.list { outline-color: var(--color-purple); } -.button { - outline: 2px dashed var(--color-pink-light); -} +.button { outline-color: var(--color-pink); }