From a626abe1c399e2ec18f2ca80b0ac2b33d3c911df Mon Sep 17 00:00:00 2001 From: metacryst Date: Mon, 16 Mar 2026 01:09:48 -0500 Subject: [PATCH] improve styling, fix bottom bar underline bug --- readme.md | 4 +++ src/Home/Home.js | 26 ++++++++-------- src/Home/Login.js | 4 +-- src/_/code/shared.css | 2 +- src/apps/Announcements/Announcements.js | 41 +++++++++++++++++++++++++ src/apps/Events/Events.js | 23 ++++++++------ src/apps/Jobs/JobForm.js | 4 +-- src/apps/Jobs/Jobs.js | 24 +++++++++------ src/apps/People/People.js | 22 +++++++------ src/components/AppMenu.js | 3 +- src/components/AppWindow.js | 3 +- src/components/SearchBar.js | 6 ++-- vite.config.ts | 7 ++++- 13 files changed, 113 insertions(+), 56 deletions(-) create mode 100644 src/apps/Announcements/Announcements.js diff --git a/readme.md b/readme.md index bed1d06..ccbc51f 100644 --- a/readme.md +++ b/readme.md @@ -16,6 +16,10 @@ npx cap open ios To Rerun: npm run build && npx cap copy ios +### Build and run (hitting prod server) +vite build +npx serve dist + ### Architecture In Development, API routes are routed using the vite.config.js. diff --git a/src/Home/Home.js b/src/Home/Home.js index be16584..0766edf 100644 --- a/src/Home/Home.js +++ b/src/Home/Home.js @@ -7,19 +7,19 @@ class Home extends Shadow { render() { ZStack(() => { - img("/_/icons/hamburger.svg", "3em") - .position("absolute") - .zIndex(2) - .left(1.5, em) - .top(1, em) - .onTouch(function (start) { - if(start) { - this.style.scale = "0.8" - } else if(start === false) { - this.style.scale = "" - $("sidebar-").toggle() - } - }) + // img("/_/icons/hamburger.svg", "3em") + // .position("absolute") + // .zIndex(2) + // .left(1.5, em) + // .top(1, em) + // .onTouch(function (start) { + // if(start) { + // this.style.scale = "0.8" + // } else if(start === false) { + // this.style.scale = "" + // $("sidebar-").toggle() + // } + // }) Sidebar() diff --git a/src/Home/Login.js b/src/Home/Login.js index 4885966..87a7739 100644 --- a/src/Home/Login.js +++ b/src/Home/Login.js @@ -7,14 +7,14 @@ class Login extends Shadow { .color("var(--text)") .border("1px solid var(--accent)") .fontSize(0.9, rem) - .backgroundColor("var(--accentdark)") + .backgroundColor("var(--darkaccent)") .borderRadius(12, px) .outline("none") .onTouch((start) => { if(start) { this.style.backgroundColor = "var(--accent)" } else { - this.style.backgroundColor = "var(--accentdark)" + this.style.backgroundColor = "var(--darkaccent)" } }) } diff --git a/src/_/code/shared.css b/src/_/code/shared.css index cbc0fdd..82d25f6 100644 --- a/src/_/code/shared.css +++ b/src/_/code/shared.css @@ -40,7 +40,7 @@ :root { --main: rgb(69, 20, 13); --accent: rgb(106, 44, 28); - --accentdark: rgb(37, 2, 5); + --darkaccent: #250709; --text: rgb(255, 225, 181); --home-src: /_/icons/homelight.svg; diff --git a/src/apps/Announcements/Announcements.js b/src/apps/Announcements/Announcements.js new file mode 100644 index 0000000..0a7c4d3 --- /dev/null +++ b/src/apps/Announcements/Announcements.js @@ -0,0 +1,41 @@ +class Announcements extends Shadow { + render() { + VStack(() => { + + HStack(() => { + img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em") + .onTouch(function (start) { + if(start) { + this.style.scale = "0.8" + } else if(start === false) { + this.style.scale = "" + $("sidebar-").toggle() + } + }) + + p("Announcements") + .color("var(--accentdark)") + .textAlign("center") + .fontFamily("Arial") + .fontSize("3xl") + .fontWeight("bold") + }) + .verticalAlign("center") + .gap(0.5, em) + .marginTop(2, em) + }) + .paddingVertical(1, em) + .boxSizing("border-box") + .backgroundColor("var(--main)") + .gap(0.5, em) + .boxSizing("border-box") + .width(100, pct) + .height(100, pct) + .horizontalAlign("center") + .minHeight(0) + } + + +} + +register(Announcements) \ No newline at end of file diff --git a/src/apps/Events/Events.js b/src/apps/Events/Events.js index 62441e2..145411b 100644 --- a/src/apps/Events/Events.js +++ b/src/apps/Events/Events.js @@ -29,20 +29,22 @@ class Events extends Shadow { render() { VStack(() => { - h1("Events") - .color("var(--quillred)") - .textAlign("center") - .marginBottom(0.25, em) - h3(global.currentNetwork.name) - .color("var(--quillred)") - .textAlign("center") - .margin(0) - .fontFamily("Bona") + HStack(() => { + img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em") + + h1("Events") + .color("var(--accentdark)") + .textAlign("center") + .fontFamily("Arial") + }) + .verticalAlign("center") + .gap(0.5, em) + .marginTop(0.5, em) SearchBar() VStack(() => { - if (this.events == "" || this.events == []) { + if (!this.events || this.events == []) { LoadingCircle() } else if (this.events.length > 0) { for (let i = 0; i < this.events.length; i++) { @@ -60,6 +62,7 @@ class Events extends Shadow { }) .overflowY("scroll") }) + .horizontalAlign("center") .boxSizing("border-box") .paddingVertical(1, em) .height(100, pct) diff --git a/src/apps/Jobs/JobForm.js b/src/apps/Jobs/JobForm.js index 9ef093c..ed93106 100644 --- a/src/apps/Jobs/JobForm.js +++ b/src/apps/Jobs/JobForm.js @@ -7,14 +7,14 @@ class JobForm extends Shadow { .color("var(--text)") .border("1px solid var(--accent)") .fontSize(0.9, rem) - .backgroundColor("var(--accentdark)") + .backgroundColor("var(--darkaccent)") .borderRadius(12, px) .outline("none") .onTouch((start) => { if (start) { this.style.backgroundColor = "var(--accent)" } else { - this.style.backgroundColor = "var(--accentdark)" + this.style.backgroundColor = "var(--darkaccent)" } }) } diff --git a/src/apps/Jobs/Jobs.js b/src/apps/Jobs/Jobs.js index dcfb9e8..b9643ea 100644 --- a/src/apps/Jobs/Jobs.js +++ b/src/apps/Jobs/Jobs.js @@ -31,22 +31,24 @@ class Jobs extends Shadow { render() { VStack(() => { - h1("Jobs") - .color("var(--quillred)") - .textAlign("center") - .marginBottom(0.25, em) - h3(global.currentNetwork.name) - .color("var(--quillred)") - .textAlign("center") - .margin(0) - .fontFamily("Bona") + HStack(() => { + img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em") + + h1("Jobs") + .color("var(--accentdark)") + .textAlign("center") + .fontFamily("Arial") + }) + .verticalAlign("center") + .gap(0.5, em) + .marginTop(0.5, em) // JobForm() SearchBar() VStack(() => { - if (this.jobs == "" || this.jobs == []) { + if (!this.jobs || this.jobs == []) { LoadingCircle() } else if (this.jobs.length > 0) { for (let i = 0; i < this.jobs.length; i++) { @@ -64,6 +66,7 @@ class Jobs extends Shadow { }) .overflowY("scroll") }) + .horizontalAlign("center") .boxSizing("border-box") .paddingVertical(1, em) .height(100, pct) @@ -83,6 +86,7 @@ class Jobs extends Shadow { } checkForUpdates(currentJobs, fetchedJobs) { + console.log(currentJobs, fetchedJobs) if (currentJobs.length !== fetchedJobs.length) return true; const currentMap = new Map(currentJobs.map(job => [job.id, job])); diff --git a/src/apps/People/People.js b/src/apps/People/People.js index 92585b5..1e8e357 100644 --- a/src/apps/People/People.js +++ b/src/apps/People/People.js @@ -28,16 +28,17 @@ class People extends Shadow { render() { VStack(() => { - h1("People") - .color("rgb(158 136 105)") - .textAlign("center") - .marginBottom(0.25, em) - h3(global.currentNetwork.name) - .color("var(--quillred)") - .textAlign("center") - .margin(0) - .marginBottom(0.5, em) - .fontFamily("Bona") + HStack(() => { + img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em") + + h1("People") + .color("var(--accentdark)") + .textAlign("center") + .fontFamily("Arial") + }) + .verticalAlign("center") + .gap(0.5, em) + .marginTop(0.5, em) if (this.people == "") { LoadingCircle() @@ -57,6 +58,7 @@ class People extends Shadow { .color("var(--darkbrown)") } }) + .horizontalAlign("center") .position("relative") .boxSizing("border-box") .paddingVertical(1, em) diff --git a/src/components/AppMenu.js b/src/components/AppMenu.js index 3336836..7f5e2ed 100644 --- a/src/components/AppMenu.js +++ b/src/components/AppMenu.js @@ -17,6 +17,7 @@ class AppMenu extends Shadow { image.style.borderBottom = "1px solid transparent" const app = image.attributes.app.value if (app === global.currentApp()) { + image.style.borderBottom = "1px solid var(--text)" image.src = util.cssVariable(this.images[app].src[1]) } else { image.src = util.cssVariable(this.images[app].src[0]) @@ -50,8 +51,6 @@ class AppMenu extends Shadow { .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent") .onTouch(async (done, e) => { if(done) { - console.log(e) - e.target.style.borderBottom = "1px solid var(--text)" global.openApp(app) this.onNewSelection() await Haptics.impact({ style: ImpactStyle.Light }); diff --git a/src/components/AppWindow.js b/src/components/AppWindow.js index 6366635..60d7454 100644 --- a/src/components/AppWindow.js +++ b/src/components/AppWindow.js @@ -3,6 +3,7 @@ import "../apps/Messages/Messages.js" import "../apps/Jobs/Jobs.js" import "../apps/People/People.js" import "../apps/Events/Events.js" +import "../apps/Announcements/Announcements.js" class AppWindow extends Shadow { render() { @@ -10,7 +11,7 @@ class AppWindow extends Shadow { let app = global.currentApp() switch(app) { case "Dashboard": - Forum() + Announcements() break; case "Messages": diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 9356e1a..d6e064c 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -10,8 +10,7 @@ class SearchBar extends Shadow { .boxSizing("border-box") .paddingHorizontal(1, em) .color("var(--accent)") - .background("#fff1dd") - .marginTop(0.75, em) + .background("var(--darkaccent)") .marginBottom(1, em) .border("1px solid black") .borderRadius(100, px) @@ -25,8 +24,7 @@ class SearchBar extends Shadow { .paddingVertical(0.75, em) .boxSizing("border-box") .paddingHorizontal(1, em) - .background("#fff1dd") - .marginTop(0.75, em) + .background("var(--darkaccent)") .marginBottom(1, em) .border("1px solid black") .borderRadius(15, px) diff --git a/vite.config.ts b/vite.config.ts index 4fe0899..50cd158 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,7 +6,8 @@ export default defineConfig({ outDir: '../dist', minify: false, emptyOutDir: true, - sourcemap: true + sourcemap: true, + target: 'esnext' // modern version of browsers, allows top-level await }, server: { proxy: { @@ -26,6 +27,10 @@ export default defineConfig({ "/api": { target: "http://localhost:10002", changeOrigin: true + }, + "/db": { + target: "http://localhost:10002", + changeOrigin: true } }, host: true,