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

improve styling, fix bottom bar underline bug

Browse Source
This commit is contained in:
metacryst
2026-03-16 01:09:48 -05:00
parent 834d5e763e
commit a626abe1c3
13 changed files with 113 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
readme.md
View File

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

26
src/Home/Home.js
View File

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

4
src/Home/Login.js
View File

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

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

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

41
src/apps/Announcements/Announcements.js Normal file
View File

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

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

@@ -29,20 +29,22 @@ class Events extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Events")
.color("var(--quillred)")
.color("var(--accentdark)")
.textAlign("center")
.marginBottom(0.25, em)
h3(global.currentNetwork.name)
.color("var(--quillred)")
.textAlign("center")
.margin(0)
.fontFamily("Bona")
.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)

4
src/apps/Jobs/JobForm.js
View File

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

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

@@ -31,22 +31,24 @@ class Jobs extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Jobs")
.color("var(--quillred)")
.color("var(--accentdark)")
.textAlign("center")
.marginBottom(0.25, em)
h3(global.currentNetwork.name)
.color("var(--quillred)")
.textAlign("center")
.margin(0)
.fontFamily("Bona")
.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]));

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

@@ -28,16 +28,17 @@ class People extends Shadow {
render() {
VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("People")
.color("rgb(158 136 105)")
.color("var(--accentdark)")
.textAlign("center")
.marginBottom(0.25, em)
h3(global.currentNetwork.name)
.color("var(--quillred)")
.textAlign("center")
.margin(0)
.marginBottom(0.5, em)
.fontFamily("Bona")
.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)

3
src/components/AppMenu.js
View File

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

3
src/components/AppWindow.js
View File

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

6
src/components/SearchBar.js
View File

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

7
vite.config.ts
View File

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