From e17efce33897b2b6a8ad5bfd6be22121d771180b Mon Sep 17 00:00:00 2001 From: metacryst Date: Fri, 7 Nov 2025 20:14:38 -0600 Subject: [PATCH] Improving the 3 apps --- .gitignore | 3 +- ui/_/code/quill.js | 8 +- ui/site/apps/Forum.js | 49 ---------- ui/site/apps/Jobs/Jobs.js | 116 +++++++++++++++++++++++ ui/site/apps/Jobs/JobsGrid.js | 43 +++++++++ ui/site/apps/Jobs/JobsSidebar.js | 17 ++++ ui/site/apps/Market.js | 31 +++++- ui/site/apps/Messages.js | 141 ++++++++++++++++++++++++++-- ui/site/components/AppMenu.js | 5 +- ui/site/components/AppWindow.js | 8 +- ui/site/components/Home.js | 23 ++--- ui/site/components/ProfileButton.js | 2 +- ui/site/components/ProfileMenu.js | 2 +- 13 files changed, 364 insertions(+), 84 deletions(-) delete mode 100644 ui/site/apps/Forum.js create mode 100644 ui/site/apps/Jobs/Jobs.js create mode 100644 ui/site/apps/Jobs/JobsGrid.js create mode 100644 ui/site/apps/Jobs/JobsSidebar.js diff --git a/.gitignore b/.gitignore index 8f0bba0..0f72f16 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ db/* server/db/users.json server/.env abetaccredited.html -qrCodes/qr_codes \ No newline at end of file +qrCodes/qr_codes +.env \ No newline at end of file diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index 58f77c4..376deb9 100644 --- a/ui/_/code/quill.js +++ b/ui/_/code/quill.js @@ -1,6 +1,7 @@ /* Sam Russell Captured Sun + 11.7.25 - changed registerShadow() to register(), changed onClick() to be like onHover() 11.6.25 - adding default value for "button()" "children" parameter 10.29.25 - adding "gap()" and "label()" functions */ @@ -186,7 +187,7 @@ window.Shadow = class extends HTMLElement { super() } } -window.registerShadow = (el, tagname) => { +window.register = (el, tagname) => { if (typeof el.prototype.render !== 'function') { throw new Error("Element must have a render: " + el.prototype.constructor.name) } @@ -713,7 +714,10 @@ HTMLElement.prototype.onAppear = function(func) { }; HTMLElement.prototype.onClick = function(func) { - this._storeListener("click", func); + const onMouseDown = () => func.call(this, true); + const onMouseUp = () => func.call(this, false); + this._storeListener("mousedown", onMouseDown); + this._storeListener("mouseup", onMouseUp); return this; }; diff --git a/ui/site/apps/Forum.js b/ui/site/apps/Forum.js deleted file mode 100644 index cc8c232..0000000 --- a/ui/site/apps/Forum.js +++ /dev/null @@ -1,49 +0,0 @@ -css(` - forum- input::placeholder { - font-size: 0.9em; - color: var(--accent); - } -`) - -class Forum extends Shadow { - - render() { - ZStack(() => { - p("Coming Soon!") - .position("absolute") - .x(50, vw).y(50, vh) - .transform("translate(-50%, -50%)") - - HStack(() => { - input("Search...", "50vw") - .attr({ - "type": "text" - }) - .fontSize(1.1, em) - .paddingLeft(1.3, em) - .background("transparent") - .border("1px solid var(--accent)") - .outline("none") - .color("var(--accent)") - .borderRadius(10, px) - button("Search") - .marginLeft(2, em) - .borderRadius(10, px) - .background("transparent") - .border("1px solid var(--accent)") - .color("var(--accent)") - }) - .x(50, vw).y(5, vh) - .position("absolute") - .transform("translateX(-50%)") - }) - .width(100, "%") - .height(100, "%") - } - - connectedCallback() { - // Optional additional logic - } -} - -registerShadow(Forum) diff --git a/ui/site/apps/Jobs/Jobs.js b/ui/site/apps/Jobs/Jobs.js new file mode 100644 index 0000000..9f9d520 --- /dev/null +++ b/ui/site/apps/Jobs/Jobs.js @@ -0,0 +1,116 @@ +import "./JobsSidebar.js" +import "./JobsGrid.js" + +css(` + jobs- { + font-family: 'Bona'; + } + + jobs- input::placeholder { + font-family: 'Bona Nova'; + font-size: 0.9em; + color: var(--accent); + } + + input[type="checkbox"] { + appearance: none; /* remove default style */ + -webkit-appearance: none; + width: 1em; + height: 1em; + border: 1px solid var(--accent); + } + + input[type="checkbox"]:checked { + background-color: var(--red); + } +`) + +class Jobs extends Shadow { + jobs = [ + { + title: "Austin Chapter Lead", + salary: "1% of Local Tax Revenue", + location: "Austin" + }, + { + title: "San Marcos Chapter Lead", + salary: "1% of Local Tax Revenue" + } + ] + + render() { + ZStack(() => { + HStack(() => { + JobsSidebar() + + JobsGrid(this.jobs) + }) + .width(100, "%") + .x(0).y(13, vh) + + HStack(() => { + input("Search jobs...", "45vw") + .attr({ + "type": "text" + }) + .fontSize(1.1, em) + .paddingLeft(1.3, em) + .background("transparent") + .border("1px solid var(--periwinkle)") + .outline("none") + .color("var(--accent)") + .borderRadius(10, px) + + button("Search") + .marginLeft(2, em) + .borderRadius(10, px) + .background("transparent") + .border("1px solid var(--periwinkle)") + .color("var(--accent)") + .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + + button("+ Add Job") + .width(7, em) + .marginLeft(1, em) + .borderRadius(10, px) + .background("transparent") + .border("1px solid var(--periwinkle)") + .color("var(--accent)") + .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + .onClick((clicking) => { + console.log(this, "clicked") + }) + + }) + .x(55, vw).y(4, vh) + .position("absolute") + .transform("translateX(-50%)") + }) + .width(100, "%") + .height(100, "%") + } + + connectedCallback() { + // Optional additional logic + } +} + +register(Jobs) \ No newline at end of file diff --git a/ui/site/apps/Jobs/JobsGrid.js b/ui/site/apps/Jobs/JobsGrid.js new file mode 100644 index 0000000..9f577d7 --- /dev/null +++ b/ui/site/apps/Jobs/JobsGrid.js @@ -0,0 +1,43 @@ +class JobsGrid extends Shadow { + jobs; + + constructor(jobs) { + super() + this.jobs = jobs + } + + render() { + VStack(() => { + h3("Results") + .marginTop(0) + .marginBottom(1, em) + .marginLeft(0.4, em) + .color("var(--periwinkle)") + + if (this.jobs.length > 0) { + ZStack(() => { + for (let i = 0; i < this.jobs.length; i++) { + p(this.jobs[i].title) + .border("1px solid var(--periwinkle)") + .padding(1, em) + .borderRadius(5, "px") + } + }) + .display("grid") + .gridTemplateColumns("repeat(auto-fill, minmax(200px, 1fr))") + .gap(1, em) + } else { + p("No Jobs!") + } + }) + .height(100, vh) + .paddingLeft(2, em) + .paddingRight(2, em) + .paddingTop(2, em) + .gap(0, em) + .width(100, "%") + .borderTop("1px solid var(--periwinkle)") + } +} + +register(JobsGrid) diff --git a/ui/site/apps/Jobs/JobsSidebar.js b/ui/site/apps/Jobs/JobsSidebar.js new file mode 100644 index 0000000..016a06a --- /dev/null +++ b/ui/site/apps/Jobs/JobsSidebar.js @@ -0,0 +1,17 @@ +class JobsSidebar extends Shadow { + render() { + VStack(() => { + h3("Location") + + + }) + .paddingTop(1, em) + .paddingLeft(3, em) + .paddingRight(3, em) + .gap(1, em) + .borderRight("1px solid var(--periwinkle)") + .minWidth(10, vw) + } +} + +register(JobsSidebar) \ No newline at end of file diff --git a/ui/site/apps/Market.js b/ui/site/apps/Market.js index b6d88ee..292087c 100644 --- a/ui/site/apps/Market.js +++ b/ui/site/apps/Market.js @@ -100,7 +100,7 @@ class Market extends Shadow { .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--accent)") + .border("1px solid var(--periwinkle)") .outline("none") .color("var(--accent)") .borderRadius(10, px) @@ -109,21 +109,42 @@ class Market extends Shadow { .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--accent)") + .border("1px solid var(--periwinkle)") .color("var(--accent)") .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) button("+ Add Item") .width(7, em) .marginLeft(1, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--accent)") + .border("1px solid var(--periwinkle)") .color("var(--accent)") .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + .onClick((clicking) => { + console.log(this, "clicked") + }) }) - .x(55, vw).y(5, vh) + .x(55, vw).y(4, vh) .position("absolute") .transform("translateX(-50%)") }) @@ -136,4 +157,4 @@ class Market extends Shadow { } } -registerShadow(Market) +register(Market) diff --git a/ui/site/apps/Messages.js b/ui/site/apps/Messages.js index 6b2e101..6520fae 100644 --- a/ui/site/apps/Messages.js +++ b/ui/site/apps/Messages.js @@ -1,39 +1,138 @@ css(` + messages- { + font-family: 'Bona'; + } + messages- input::placeholder { + font-family: 'Bona Nova'; font-size: 0.9em; color: var(--accent); } + + input[type="checkbox"] { + appearance: none; /* remove default style */ + -webkit-appearance: none; + width: 1em; + height: 1em; + border: 1px solid var(--accent); + } + + input[type="checkbox"]:checked { + background-color: var(--red); + } `) class Messages extends Shadow { + friends = [] + conversations = [] render() { ZStack(() => { - p("Coming Soon!") + HStack(() => { + VStack(() => { + h3("Friends") + .marginTop(0) + .marginBottom(1, em) + .marginLeft(0.4, em) + + if (this.friends.length > 1) { + for(let i = 0; i < this.friends.length; i++) { + p(this.friends[i].name) + } + } else { + p("No Friends!") + } + }) + .height(100, vh) + .paddingLeft(2, em) + .paddingRight(2, em) + .paddingTop(2, em) + .gap(0, em) + .borderRight("1px solid var(--periwinkle)") + + VStack(() => { + h3("Conversations") + .marginTop(0) + .marginBottom(1, em) + .marginLeft(0.4, em) + + if (this.conversations.length > 1) { + for(let i = 0; i < this.conversations.length; i++) { + p(this.conversations[i].name) + } + } else { + p("No Conversations!") + } + }) + .height(100, vh) + .paddingLeft(2, em) + .paddingRight(2, em) + .paddingTop(2, em) + .gap(0, em) + .borderRight("1px solid var(--periwinkle)") + }) + .width(100, "%") + .x(0).y(13, vh) + .borderTop("1px solid var(--periwinkle)") + + p("0 Items") .position("absolute") .x(50, vw).y(50, vh) .transform("translate(-50%, -50%)") HStack(() => { - input("Search...", "50vw") + input("Search messages...", "45vw") .attr({ "type": "text" }) .fontSize(1.1, em) .paddingLeft(1.3, em) .background("transparent") - .border("1px solid var(--accent)") + .border("1px solid var(--periwinkle)") .outline("none") .color("var(--accent)") .borderRadius(10, px) + button("Search") .marginLeft(2, em) .borderRadius(10, px) .background("transparent") - .border("1px solid var(--accent)") + .border("1px solid var(--periwinkle)") .color("var(--accent)") + .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + + button("+ New Message") + .width(15, em) + .marginLeft(1, em) + .borderRadius(10, px) + .background("transparent") + .border("1px solid var(--periwinkle)") + .color("var(--accent)") + .fontFamily("Bona Nova") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + .onClick((clicking) => { + console.log(this, "clicked") + }) + }) - .x(50, vw).y(5, vh) + .x(55, vw).y(4, vh) .position("absolute") .transform("translateX(-50%)") }) @@ -41,9 +140,39 @@ class Messages extends Shadow { .height(100, "%") } + SidebarName(name) { + let firstLetter = name[0] + + HStack(() => { + div(firstLetter) + .display("flex") + .justifyContent("center") + .alignItems("center") + .width(1.5, em) + .height(1.5, em) + .border("1px solid var(--periwinkle)") + .borderRadius(100, "%") + p(name) + .marginLeft(1, em) + }) + .alignItems("center") + .padding(5, px) + .borderRadius(0.5, em) + .cursor("default") + .onHover(function (hovering) { + if(hovering) { + this.style.background = "var(--green)" + + } else { + this.style.background = "transparent" + + } + }) + } + connectedCallback() { // Optional additional logic } } -registerShadow(Messages) +register(Messages) \ No newline at end of file diff --git a/ui/site/components/AppMenu.js b/ui/site/components/AppMenu.js index 173b3b1..025729e 100644 --- a/ui/site/components/AppMenu.js +++ b/ui/site/components/AppMenu.js @@ -43,7 +43,7 @@ css(` } `) -registerShadow( +register( class AppMenu extends Shadow { selected; @@ -56,12 +56,13 @@ class AppMenu extends Shadow { render() { VStack(() => { HStack(() => { - p("Forum") p("Messages") p("Market") + p("Jobs") }) .justifyContent("center") .gap(1.5, em) + .paddingRight(2, em) img("_/images/divider.svg", "40vw") .attr({ diff --git a/ui/site/components/AppWindow.js b/ui/site/components/AppWindow.js index dbeafba..15705fa 100644 --- a/ui/site/components/AppWindow.js +++ b/ui/site/components/AppWindow.js @@ -1,4 +1,4 @@ -import "../apps/Forum.js" +import "../apps/Jobs/Jobs.js" import "../apps/Messages.js" import "../apps/Market.js" @@ -13,8 +13,8 @@ class AppWindow extends Shadow { render() { ZStack(() => { switch(this.app) { - case "Forum": - Forum() + case "Jobs": + Jobs() break; case "Messages": Messages() @@ -44,4 +44,4 @@ class AppWindow extends Shadow { } -registerShadow(AppWindow, "app-window") \ No newline at end of file +register(AppWindow, "app-window") \ No newline at end of file diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 8ef142c..3cf3b63 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -8,10 +8,10 @@ class Home extends Shadow { render() { ZStack(() => { - img("_/icons/logo.svg", "3.5em") + img("_/icons/logo.svg", "2.5em") .position("fixed") .left("3em") - .top("2em") + .top("3vh") .zIndex(3) // .onClick(() => { // window.navigateTo("/") @@ -32,9 +32,9 @@ class Home extends Shadow { AppWindow() AppMenu() break - case "/app/forum": - AppWindow("Forum") - AppMenu("Forum") + case "/app/jobs": + AppWindow("Jobs") + AppMenu("Jobs") break; case "/app/messages": AppWindow("Messages") @@ -55,20 +55,17 @@ class Home extends Shadow { a("/signout", "Sign Out") .position("fixed") - .top("3em") + .top("5vh") .right("2em") .background("transparent") - .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent)") + .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--periwinkle)") .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)") .borderRadius(5, px) .onHover(function (hovering) { - console.log('hovering', hovering, this) if(hovering) { - this.style.background = "var(--tan)" - this.style.color = "black" + this.style.background = "var(--green)" } else { this.style.background = "" - this.style.color = window.location.pathname === "/" ? "var(--tan)" : "var(--accent)" } }) .onNavigate(function () { @@ -77,7 +74,7 @@ class Home extends Shadow { this.style.border = "1px solid var(--tan)" this.style.color = "var(--tan)" } else { - this.style.border = "1px solid var(--accent)" + this.style.border = "1px solid var(--periwinkle)" this.style.color = "var(--accent)" } }) @@ -85,4 +82,4 @@ class Home extends Shadow { } } -registerShadow(Home) \ No newline at end of file +register(Home) \ No newline at end of file diff --git a/ui/site/components/ProfileButton.js b/ui/site/components/ProfileButton.js index 5fe0d3e..0fab814 100644 --- a/ui/site/components/ProfileButton.js +++ b/ui/site/components/ProfileButton.js @@ -40,4 +40,4 @@ class ProfileButton extends Shadow { } } -registerShadow(ProfileButton) \ No newline at end of file +register(ProfileButton) \ No newline at end of file diff --git a/ui/site/components/ProfileMenu.js b/ui/site/components/ProfileMenu.js index e911c2a..d36355d 100644 --- a/ui/site/components/ProfileMenu.js +++ b/ui/site/components/ProfileMenu.js @@ -49,4 +49,4 @@ class ProfileMenu extends Shadow { } } -registerShadow(ProfileMenu, "profile-menu") \ No newline at end of file +register(ProfileMenu, "profile-menu") \ No newline at end of file