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

Styled Jobs and Events like Figma mockups

Browse Source 
- Modified some darkmode css values to match those on the figma
- Fixed misnamed calls to var(--darkaccent) from var(--accentdark)
- Commented out trash/delete button on EventCard and JobCard for now
- Hid scrollbar on Events/Jobs
- Fixed mis-centered People list
- Fixed colors in searchbar in events/jobs
This commit is contained in:
matiasc18
2026-03-16 21:40:03 -04:00
parent 69b359d9a1
commit 8452841460
9 changed files with 146 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/_/code/shared.css
View File

@@ -1,6 +1,7 @@
:root {
--main: #FFE9C8;
--accent: #60320c;
--darkaccent: #250709;
--text: #340000;
--yellow: #f1f3c3;
--bone: #fff2e7;
@@ -38,10 +39,11 @@
@media (prefers-color-scheme: dark) {
:root {
--main: rgb(69, 20, 13);
--accent: rgb(106, 44, 28);
--darkaccent: #250709;
--text: rgb(255, 225, 181);
--main: #2A150E;
--accent: #3D2622;
--darkaccent: #240609;
--text: #FADFB6;
--darktext: #62473E;
--home-src: /_/icons/homelight.svg;
--home-selected-src: /_/icons/homelightselected.svg;

2
src/apps/Announcements/Announcements.js
View File

@@ -14,7 +14,7 @@ class Announcements extends Shadow {
})
p("Announcements")
.color("var(--accentdark)")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
.fontSize("3xl")

60
src/apps/Events/EventCard.js
View File

@@ -1,6 +1,13 @@
import util from "../../util"
import server from "../../_/code/bridge/serverFunctions.js"
css(`
eventcard- p {
font-size: 0.85em;
color: var(--darktext);
}
`)
class EventCard extends Shadow {
constructor(event) {
super()
@@ -11,44 +18,37 @@ class EventCard extends Shadow {
VStack(() => {
HStack(() => {
h3(this.event.title)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
.color("var(--text)")
.fontSize(1.3, em)
.fontWeight("normal")
.margin(0, em)
if (this.event.creator_id === global.profile.id) {
img(util.cssVariable("trash-src"), "1.5em")
.marginRight(0.5, em)
.onTap(() => {
this.deleteEvent(this.event)
})
}
// Delete button
// if (this.event.creator_id === global.profile.id) {
// img(util.cssVariable("trash-src"), "1.5em")
// .marginRight(0.5, em)
// .onTap(() => {
// this.deleteEvent(this.event)
// })
// }
})
.justifyContent("space-between")
.verticalAlign("center")
HStack(() => {
img(util.cssVariable("pin-src"), "1.3em")
p(this.event.location)
})
.gap(0.3, em)
.verticalAlign("center")
HStack(() => {
img(util.cssVariable("time-src"), "1.2em")
.marginTop(0.75, em)
p(this.convertDate(this.event.time_start))
.marginTop(0.25, em)
p(this.event.description)
.marginTop(0.75, em)
})
.gap(0.4, em)
.verticalAlign("center")
p("<b>Description: </b>" + " " + this.event.description)
})
.maxHeight(12.5, em)
.padding(0.75, em)
.gap(0, em)
.borderBottom("1px solid var(--divider)")
.verticalAlign("center")
.gap(0.5, em)
.paddingVertical(1.5, em)
.paddingHorizontal(3.5, em)
.marginHorizontal(1, em)
.borderRadius(10, px)
.background("var(--darkaccent)")
.border("1px solid var(--accent)")
.boxSizing("border-box")
}
async deleteEvent(event) {

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

@@ -6,18 +6,26 @@ import "../../components/SearchBar.js"
css(`
events- {
font-family: 'Arial';
scrollbar-width: none;
-ms-overflow-style: none;
}
events- h1 {
font-family: 'Bona';
}
events- p {
color: var(--accent);
events- .VStack::-webkit-scrollbar {
display: none;
width: 0px;
height: 0px;
}
events- p b {
color: var(--darkbrown);
events- .VStack::-webkit-scrollbar-thumb {
background: transparent;
}
events- .VStack::-webkit-scrollbar-track {
background: transparent;
}
`)
@@ -33,11 +41,12 @@ class Events extends Shadow {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Events")
.color("var(--accentdark)")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
@@ -49,11 +58,10 @@ class Events extends Shadow {
} else if (this.events.length > 0) {
for (let i = 0; i < this.events.length; i++) {
EventCard(this.events[i])
.borderTop(i == 0 ? "1px solid var(--divider)" : "")
}
} else {
h2("No Events")
.color("var(--brown)")
.color("var(--text)")
.fontWeight("bold")
.marginTop(7.5, em)
.marginBottom(0.5, em)
@@ -61,10 +69,9 @@ class Events extends Shadow {
}
})
.overflowY("scroll")
.gap(0.75, em)
})
.horizontalAlign("center")
.boxSizing("border-box")
.paddingVertical(1, em)
.height(100, pct)
.width(100, pct)
}

70
src/apps/Jobs/JobCard.js
View File

@@ -1,6 +1,13 @@
import util from "../../util.js"
import server from "../../_/code/bridge/serverFunctions.js"
css(`
jobcard- p {
font-size: 0.85em;
color: var(--darktext);
}
`)
class JobCard extends Shadow {
constructor(job) {
super()
@@ -11,43 +18,52 @@ class JobCard extends Shadow {
VStack(() => {
HStack(() => {
h3(this.job.title)
.color("var(--brown)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
.color("var(--text)")
.fontSize(1.3, em)
.fontWeight("normal")
.margin(0, em)
if (this.job.creator_id === global.profile.id) {
img(util.cssVariable("trash-src"), "1.5em")
.marginRight(0.5, em)
.onTap(() => {
this.deleteJob(this.job)
})
}
// Delete button
// if (this.job.creator_id === global.profile.id) {
// img(util.cssVariable("trash-src"), "1.5em")
// .marginRight(0.5, em)
// .onTap(() => {
// this.deleteJob(this.job)
// })
// }
})
.justifyContent("space-between")
.verticalAlign("center")
HStack(() => {
img(util.cssVariable("pin-src"), "1.3em")
p(this.job.company)
.marginTop(0.75, em)
p(this.job.location)
.marginTop(0.25, em)
p(this.salaryLabel(this.job.salary_number, this.job.salary_period))
.marginTop(0.75, em)
})
.gap(0.3, em)
.verticalAlign("center")
p("<b>Company: </b>" + " " + this.job.company)
p("<b>Salary: </b>" + " " + this.job.salary)
p("<b>Description: </b>" + " " + this.job.description)
})
.width(100, pct)
.maxHeight(12.5, em)
.padding(0.75, em)
.gap(0, em)
.borderBottom("1px solid var(--divider)")
.textAlign("left")
.gap(0.5, em)
.paddingVertical(1.5, em)
.paddingHorizontal(3.5, em)
.marginHorizontal(1, em)
.borderRadius(10, px)
.background("var(--darkaccent)")
.border("1px solid var(--accent)")
.boxSizing("border-box")
}
salaryLabel(number, period) {
const formattedNumber = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(Number(number));
if (period === "one-time") {
return `One-time payment of $${formattedNumber}`
} else {
return `$${formattedNumber}/${period}`
}
}
async deleteJob(job) {
const result = await server.deleteJob(job.id, job.network_id, global.profile.id)
if (result.data === null) {

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

@@ -8,18 +8,26 @@ import server from "../../_/code/bridge/serverFunctions.js"
css(`
jobs- {
font-family: 'Arial';
scrollbar-width: none;
-ms-overflow-style: none;
}
jobs- h1 {
font-family: 'Bona';
}
jobs- p {
color: var(--accent);
jobs- .VStack::-webkit-scrollbar {
display: none;
width: 0px;
height: 0px;
}
jobs- p b {
color: var(--darkbrown);
jobs- .VStack::-webkit-scrollbar-thumb {
background: transparent;
}
jobs- .VStack::-webkit-scrollbar-track {
background: transparent;
}
`)
@@ -35,11 +43,12 @@ class Jobs extends Shadow {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Jobs")
.color("var(--accentdark)")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
@@ -53,11 +62,10 @@ class Jobs extends Shadow {
} 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)")
.color("var(--text)")
.fontWeight("bold")
.marginTop(7.5, em)
.marginBottom(0.5, em)
@@ -65,10 +73,9 @@ class Jobs extends Shadow {
}
})
.overflowY("scroll")
.gap(0.75, em)
})
.horizontalAlign("center")
.boxSizing("border-box")
.paddingVertical(1, em)
.height(100, pct)
.width(100, pct)
}

13
src/apps/People/People.js
View File

@@ -10,11 +10,7 @@ css(`
}
people- p {
color: var(--accent);
}
people- p b {
color: var(--darkbrown);
color: var(--darktext);
}
`)
@@ -32,14 +28,16 @@ class People extends Shadow {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("People")
.color("var(--accentdark)")
.color("var(--darkaccent)")
.textAlign("center")
.fontFamily("Arial")
})
.verticalAlign("center")
.horizontalAlign("center")
.gap(0.5, em)
.marginTop(0.5, em)
VStack(() => {
if (this.people == "") {
LoadingCircle()
} else if (this.people.length > 0) {
@@ -58,10 +56,9 @@ class People extends Shadow {
.color("var(--darkbrown)")
}
})
.horizontalAlign("center")
})
.position("relative")
.boxSizing("border-box")
.paddingVertical(1, em)
.height(100, pct)
.width(100, pct)
}

9
src/apps/People/PeopleCard.js
View File

@@ -17,17 +17,20 @@ class PeopleCard extends Shadow {
VStack(() => {
h3(this.person.first_name + " " + this.person.last_name)
.color("var(--brown)")
.color("var(--text)")
.fontSize(1.2, em)
.fontWeight("bold")
.marginVertical(0, em)
p("<b>Member since: </b>" + " " + this.convertDate(this.person.created))
p("Member since " + this.convertDate(this.person.created))
})
.verticalAlign("center")
.horizontalAlign("left")
.gap(0.5, em)
})
.height(3.5, em)
.width(100, pct)
.boxSizing("border-box")
.padding(0.75, em)
.paddingHorizontal(1.75, em)
.gap(1, em)
}

7
src/components/SearchBar.js
View File

@@ -9,10 +9,10 @@ class SearchBar extends Shadow {
.paddingVertical(0.75, em)
.boxSizing("border-box")
.paddingHorizontal(1, em)
.color("var(--accent)")
.background("var(--darkaccent)")
.color("gray")
.marginBottom(1, em)
.border("1px solid black")
.border("1px solid var(--accent")
.borderRadius(100, px)
.fontFamily("Arial")
.fontSize(1, em)
@@ -25,8 +25,9 @@ class SearchBar extends Shadow {
.boxSizing("border-box")
.paddingHorizontal(1, em)
.background("var(--darkaccent)")
.color("var(--accent)")
.marginBottom(1, em)
.border("1px solid black")
.border("1px solid var(--accent)")
.borderRadius(15, px)
})
.width(100, pct)