From deb151075a90c476db33a6247752040e9e33237b Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Thu, 19 Mar 2026 10:59:25 +0000 Subject: [PATCH] Add OwlBoard API Library Add styling to UI Components --- package-lock.json | 19 +++++++ package.json | 4 +- src/lib/components/ui/Textbox.svelte | 1 + src/lib/components/ui/cards/BaseCard.svelte | 1 + .../components/ui/cards/pis/PisCode.svelte | 4 +- .../ui/cards/pis/PisStartEndCard.svelte | 5 +- src/routes/about/+page.svelte | 4 +- src/routes/pis/+page.svelte | 56 ++++++++++++++++--- 8 files changed, 81 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index cb41222..94c3817 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,13 @@ "name": "web-pwa", "version": "0.0.1", "dependencies": { + "@owlboard/owlboard-ts": "^3.0.0", "@tabler/icons-svelte": "^3.40.0" }, "devDependencies": { "@eslint/compat": "^2.0.2", "@eslint/js": "^9.39.2", + "@owlboard/owlboard-ts": "^3.0.0", "@playwright/test": "^1.58.1", "@sveltejs/adapter-static": "^3.0.10", "@sveltejs/kit": "^2.50.2", @@ -778,6 +780,23 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@owlboard/api-schema-types": { + "version": "3.0.1-alpha3", + "resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.1-alpha3/api-schema-types-3.0.1-alpha3.tgz", + "integrity": "sha512-5CVm1k/C++/VrtAw4NkvclDunH+RmYLnDZZMSWTM1mm+WlEVnmD+MVnTgC/FhcsAmsNHV8swm66RCqkCuhbOnA==", + "dev": true, + "license": "MIT" + }, + "node_modules/@owlboard/owlboard-ts": { + "version": "3.0.0", + "resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0/owlboard-ts-3.0.0.tgz", + "integrity": "sha512-ycmBQ8JEwSFDLeRg7pb+g+umljHQ/vqrZ+BIs7qmwZyOVyuCjzny6keiHdhMALiNBDD9yU9DzJpqxry78rCIYg==", + "dev": true, + "license": "GPL-3.0", + "dependencies": { + "@owlboard/api-schema-types": "^3.0.1-alpha3" + } + }, "node_modules/@playwright/test": { "version": "1.58.2", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz", diff --git a/package.json b/package.json index f7480f5..ce242e8 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "devDependencies": { "@eslint/compat": "^2.0.2", "@eslint/js": "^9.39.2", + "@owlboard/owlboard-ts": "^3.0.0", "@playwright/test": "^1.58.1", "@sveltejs/adapter-static": "^3.0.10", "@sveltejs/kit": "^2.50.2", @@ -41,6 +42,7 @@ "vitest-browser-svelte": "^2.0.2" }, "dependencies": { - "@tabler/icons-svelte": "^3.40.0" + "@tabler/icons-svelte": "^3.40.0", + "@owlboard/owlboard-ts": "^3.0.0" } } diff --git a/src/lib/components/ui/Textbox.svelte b/src/lib/components/ui/Textbox.svelte index 2b1c472..37018a9 100644 --- a/src/lib/components/ui/Textbox.svelte +++ b/src/lib/components/ui/Textbox.svelte @@ -72,6 +72,7 @@ transition: all 0.2s ease-in-out; outline: none; text-align: center; + box-shadow: var(--shadow-std); } .all-caps { diff --git a/src/lib/components/ui/cards/BaseCard.svelte b/src/lib/components/ui/cards/BaseCard.svelte index f593a84..10bc53e 100644 --- a/src/lib/components/ui/cards/BaseCard.svelte +++ b/src/lib/components/ui/cards/BaseCard.svelte @@ -60,6 +60,7 @@ font-family: 'URW Gothic', sans-serif; color: var(--color-brand); padding: 10px 0; + box-shadow: var(--shadow-std); } .header-content { diff --git a/src/lib/components/ui/cards/pis/PisCode.svelte b/src/lib/components/ui/cards/pis/PisCode.svelte index ec84e82..968a103 100644 --- a/src/lib/components/ui/cards/pis/PisCode.svelte +++ b/src/lib/components/ui/cards/pis/PisCode.svelte @@ -3,6 +3,8 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte'; import Textbox from '$lib/components/ui/Textbox.svelte'; import Button from '$lib/components/ui/Button.svelte'; +let { onsearch }: { onsearch: (c: string) => void } = $props(); + let codeValue = $state(''); function resetValues(): void { @@ -18,7 +20,7 @@ function resetValues(): void {
- +
diff --git a/src/lib/components/ui/cards/pis/PisStartEndCard.svelte b/src/lib/components/ui/cards/pis/PisStartEndCard.svelte index 4ab9c05..49dad3e 100644 --- a/src/lib/components/ui/cards/pis/PisStartEndCard.svelte +++ b/src/lib/components/ui/cards/pis/PisStartEndCard.svelte @@ -3,6 +3,9 @@ import BaseCard from '$lib/components/ui/cards/BaseCard.svelte'; import Textbox from '$lib/components/ui/Textbox.svelte'; import Button from '$lib/components/ui/Button.svelte'; +let { onsearch }: { onsearch: (s: string, e: string) => void } = $props(); + + let startValue = $state(''); let endValue = $state(''); @@ -23,7 +26,7 @@ function resetValues(): void {
- +
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index d77c5fa..9b0ad27 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -30,8 +30,8 @@

Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are - associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the - app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with + associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the + app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.

diff --git a/src/routes/pis/+page.svelte b/src/routes/pis/+page.svelte index 43efc49..40539c9 100644 --- a/src/routes/pis/+page.svelte +++ b/src/routes/pis/+page.svelte @@ -1,16 +1,46 @@ -

- - -
- -
- -
+{#if !resultsLoaded} +
+ + +
+{:else} +
+ {#if !results.length} +

No results found

+ {:else} +

Unable to load results

+ {/if} + +
+{/if} \ No newline at end of file