sam/ForumMobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SearchBar component + Jobs changes + Events changes

Browse Source 
- 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
This commit is contained in:
matiasc18
2026-03-14 23:26:15 -04:00
parent 07f431e2a3
commit cb11d68fa7
7 changed files with 144 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Home.js
View File

@@ -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"

25
src/apps/Events/Events.js
View File

@@ -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)
}

1
src/apps/Forum/ForumPanel.js
View File

@@ -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")

78
src/apps/Jobs/JobForm.js Normal file
View File

@@ -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)

53
src/apps/Jobs/Jobs.js
View File

@@ -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)
}

1
src/components/AppWindow.js
View File

@@ -32,6 +32,7 @@ class AppWindow extends Shadow {
})
.height(100, pct)
.display("flex")
.position("relative")
.onNavigate(() => {
this.rerender()
})

41
src/components/SearchBar.js Normal file
View File

@@ -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)