From cb11d68fa75cb3ee43c0b79b0f1e615ff4b265bb Mon Sep 17 00:00:00 2001 From: matiasc18 Date: Sat, 14 Mar 2026 23:26:15 -0400 Subject: [PATCH] SearchBar component + Jobs changes + Events changes - Added SearchBar.js to components (repeated in Jobs and Events) - Set .position("relative") on AppWindow for LoadingCircles and future fixed/absolute elements - Refactored Events.js and Jobs.js - Added unfinished JobForm.js for editing/adding Jobs, preliminary designs/setup --- src/Home.js | 4 +- src/apps/Events/Events.js | 25 ++---------- src/apps/Forum/ForumPanel.js | 1 - src/apps/Jobs/JobForm.js | 78 ++++++++++++++++++++++++++++++++++++ src/apps/Jobs/Jobs.js | 53 +++++++++--------------- src/components/AppWindow.js | 1 + src/components/SearchBar.js | 41 +++++++++++++++++++ 7 files changed, 144 insertions(+), 59 deletions(-) create mode 100644 src/apps/Jobs/JobForm.js create mode 100644 src/components/SearchBar.js diff --git a/src/Home.js b/src/Home.js index c7f0d9a..21baeba 100644 --- a/src/Home.js +++ b/src/Home.js @@ -11,8 +11,8 @@ class Home extends Shadow { img("/_/icons/hamburger.svg", "3em") .position("absolute") .zIndex(2) - .left(2, em) - .top(2, em) + .left(1.5, em) + .top(1, em) .onTouch(function (start) { if(start) { this.style.scale = "0.8" diff --git a/src/apps/Events/Events.js b/src/apps/Events/Events.js index ac1203d..6fc61f4 100644 --- a/src/apps/Events/Events.js +++ b/src/apps/Events/Events.js @@ -1,5 +1,6 @@ import "../../components/LoadingCircle.js" import "./EventCard.js" +import "../../components/SearchBar.js" css(` events- { @@ -39,31 +40,14 @@ class Events extends Shadow { h1("Events") .color("var(--quillred)") .textAlign("center") - .marginBottom(0) + .marginBottom(0.25, em) h3(global.currentNetwork.name) .color("var(--quillred)") .textAlign("center") .margin(0) .fontFamily("Bona") - input("Search (coming soon!)", "80%") - .attr({ - "type": "text", - "disabled": "true" - }) - .paddingVertical(0.75, em) - .boxSizing("border-box") - .paddingHorizontal(1, em) - .color("var(--accent)") - .background("#fff1dd") - .marginTop(0.25, em) - .marginBottom(0.5, em) - .border("1px solid black") - .borderRadius(100, px) - .fontFamily("Arial") - .fontSize(1, em) - .outline("none") - .cursor("not-allowed") + SearchBar() if (this.events == "") { LoadingCircle() @@ -81,11 +65,8 @@ class Events extends Shadow { .textAlign("center") } }) - .position("relative") .boxSizing("border-box") .paddingVertical(1, em) - .horizontalAlign("center") - .gap(0.5, em) .height(100, pct) .width(100, pct) } diff --git a/src/apps/Forum/ForumPanel.js b/src/apps/Forum/ForumPanel.js index dfe0afc..b548e83 100644 --- a/src/apps/Forum/ForumPanel.js +++ b/src/apps/Forum/ForumPanel.js @@ -108,7 +108,6 @@ class ForumPanel extends Shadow { .gap(1, em) .fontSize(1.1, em) .boxSizing("border-box") - .position("relative") .flex("1 1 auto") .minHeight(0) .overflowY("auto") diff --git a/src/apps/Jobs/JobForm.js b/src/apps/Jobs/JobForm.js new file mode 100644 index 0000000..9ef093c --- /dev/null +++ b/src/apps/Jobs/JobForm.js @@ -0,0 +1,78 @@ +import util from "../../util.js" + +class JobForm extends Shadow { + inputStyles(el) { + return el + .background("var(--main)") + .color("var(--text)") + .border("1px solid var(--accent)") + .fontSize(0.9, rem) + .backgroundColor("var(--accentdark)") + .borderRadius(12, px) + .outline("none") + .onTouch((start) => { + if (start) { + this.style.backgroundColor = "var(--accent)" + } else { + this.style.backgroundColor = "var(--accentdark)" + } + }) + } + + render() { + form(() => { + VStack(() => { + input("Title", "70vw") + .attr({ name: "title", type: "text" }) + .margin(1, em) + .padding(1, em) + .styles(this.inputStyles) + input("Location", "70vw") + .attr({ name: "location", type: "text" }) + .margin(1, em) + .padding(1, em) + .styles(this.inputStyles) + input("Company", "70vw") + .attr({ name: "company", type: "text" }) + .margin(1, em) + .padding(1, em) + .styles(this.inputStyles) + input("salary", "70vw") + .attr({ name: "salary", type: "number" }) + .margin(1, em) + .padding(1, em) + .styles(this.inputStyles) + input("Description", "70vw") + .attr({ name: "description", type: "text" }) + .margin(1, em) + .padding(1, em) + .styles(this.inputStyles) + button("==>") + .margin(1, em) + .padding(1, em) + .fontSize(0.9, rem) + .borderRadius(12, px) + .background("var(--accent)") + .color("var(--text)") + .border("1px solid var(--accent)") + }) + }) + .position("absolute") + .height(90, pct) + .width(95, pct) + .top(50, pct).left(50, pct) + .center() + .background("var(--main)") + .zIndex(100) + .borderTopLeftRadius("10px") + .borderTopRightRadius("10px") + .boxSizing("border-box") + .transform(`translate(-50%, -45%)`) + } + + tryThis() { + console.log("hello2") + } +} + +register(JobForm) \ No newline at end of file diff --git a/src/apps/Jobs/Jobs.js b/src/apps/Jobs/Jobs.js index ace77b0..c185bfa 100644 --- a/src/apps/Jobs/Jobs.js +++ b/src/apps/Jobs/Jobs.js @@ -1,6 +1,8 @@ import "./JobsSidebar.js" import "./JobsGrid.js" import "./JobCard.js" +import "./JobForm.js" +import "../../components/SearchBar.js" css(` jobs- { @@ -43,45 +45,28 @@ class Jobs extends Shadow { .margin(0) .fontFamily("Bona") - input("Search (coming soon!)", "80%") - .attr({ - "type": "text", - "disabled": "true" - }) - .paddingVertical(0.75, em) - .boxSizing("border-box") - .paddingHorizontal(1, em) - .color("var(--accent)") - .background("#fff1dd") - .marginTop(0.75, em) - .marginBottom(1, em) - .border("1px solid black") - .borderRadius(100, px) - .fontFamily("Arial") - .fontSize(1, em) - .outline("none") - .cursor("not-allowed") + // JobForm() - if (this.jobs == "") { - LoadingCircle() - } else if (this.jobs.length > 0) { - for (let i = 0; i < this.jobs.length; i++) { - JobCard(this.jobs[i]) - .borderTop(i == 0 ? "1px solid var(--divider)" : "") - } - } else { - h2("No Jobs") - .color("var(--brown)") - .fontWeight("bold") - .marginTop(7.5, em) - .marginBottom(0.5, em) - .textAlign("center") + SearchBar() + + if (this.jobs == "") { + LoadingCircle() + } else if (this.jobs.length > 0) { + for (let i = 0; i < this.jobs.length; i++) { + JobCard(this.jobs[i]) + .borderTop(i == 0 ? "1px solid var(--divider)" : "") } + } else { + h2("No Jobs") + .color("var(--brown)") + .fontWeight("bold") + .marginTop(7.5, em) + .marginBottom(0.5, em) + .textAlign("center") + } }) - .position("relative") .boxSizing("border-box") .paddingVertical(1, em) - .horizontalAlign("center") .height(100, pct) .width(100, pct) } diff --git a/src/components/AppWindow.js b/src/components/AppWindow.js index 6b1e9f8..1278214 100644 --- a/src/components/AppWindow.js +++ b/src/components/AppWindow.js @@ -32,6 +32,7 @@ class AppWindow extends Shadow { }) .height(100, pct) .display("flex") + .position("relative") .onNavigate(() => { this.rerender() }) diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 0000000..9356e1a --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,41 @@ +class SearchBar extends Shadow { + render() { + HStack(() => { + input("Search (coming soon!)", "80%") + .attr({ + "type": "text", + "disabled": "true" + }) + .paddingVertical(0.75, em) + .boxSizing("border-box") + .paddingHorizontal(1, em) + .color("var(--accent)") + .background("#fff1dd") + .marginTop(0.75, em) + .marginBottom(1, em) + .border("1px solid black") + .borderRadius(100, px) + .fontFamily("Arial") + .fontSize(1, em) + .outline("none") + .cursor("not-allowed") + + p("+") + .fontWeight("bolder") + .paddingVertical(0.75, em) + .boxSizing("border-box") + .paddingHorizontal(1, em) + .background("#fff1dd") + .marginTop(0.75, em) + .marginBottom(1, em) + .border("1px solid black") + .borderRadius(15, px) + }) + .width(100, pct) + .horizontalAlign("center") + .verticalAlign("center") + .gap(0.5, em) + } +} + +register(SearchBar) \ No newline at end of file