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: To Rerun:
npm run build && npx cap copy ios npm run build && npx cap copy ios
### Build and run (hitting prod server)
vite build
npx serve dist
### Architecture ### Architecture
In Development, API routes are routed using the vite.config.js. 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() { render() {
ZStack(() => { ZStack(() => {
img("/_/icons/hamburger.svg", "3em") // img("/_/icons/hamburger.svg", "3em")
.position("absolute") // .position("absolute")
.zIndex(2) // .zIndex(2)
.left(1.5, em) // .left(1.5, em)
.top(1, em) // .top(1, em)
.onTouch(function (start) { // .onTouch(function (start) {
if(start) { // if(start) {
this.style.scale = "0.8" // this.style.scale = "0.8"
} else if(start === false) { // } else if(start === false) {
this.style.scale = "" // this.style.scale = ""
$("sidebar-").toggle() // $("sidebar-").toggle()
} // }
}) // })
Sidebar() Sidebar()

4
src/Home/Login.js
View File

@@ -7,14 +7,14 @@ class Login extends Shadow {
.color("var(--text)") .color("var(--text)")
.border("1px solid var(--accent)") .border("1px solid var(--accent)")
.fontSize(0.9, rem) .fontSize(0.9, rem)
.backgroundColor("var(--accentdark)") .backgroundColor("var(--darkaccent)")
.borderRadius(12, px) .borderRadius(12, px)
.outline("none") .outline("none")
.onTouch((start) => { .onTouch((start) => {
if(start) { if(start) {
this.style.backgroundColor = "var(--accent)" this.style.backgroundColor = "var(--accent)"
} else { } else {
this.style.backgroundColor = "var(--accentdark)" this.style.backgroundColor = "var(--darkaccent)"
} }
}) })
} }

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

@@ -40,7 +40,7 @@
:root { :root {
--main: rgb(69, 20, 13); --main: rgb(69, 20, 13);
--accent: rgb(106, 44, 28); --accent: rgb(106, 44, 28);
--accentdark: rgb(37, 2, 5); --darkaccent: #250709;
--text: rgb(255, 225, 181); --text: rgb(255, 225, 181);
--home-src: /_/icons/homelight.svg; --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() { render() {
VStack(() => { VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Events") h1("Events")
.color("var(--quillred)") .color("var(--accentdark)")
.textAlign("center") .textAlign("center")
.marginBottom(0.25, em) .fontFamily("Arial")
h3(global.currentNetwork.name) })
.color("var(--quillred)") .verticalAlign("center")
.textAlign("center") .gap(0.5, em)
.margin(0) .marginTop(0.5, em)
.fontFamily("Bona")
SearchBar() SearchBar()
VStack(() => { VStack(() => {
if (this.events == "" || this.events == []) { if (!this.events || this.events == []) {
LoadingCircle() LoadingCircle()
} else if (this.events.length > 0) { } else if (this.events.length > 0) {
for (let i = 0; i < this.events.length; i++) { for (let i = 0; i < this.events.length; i++) {
@@ -60,6 +62,7 @@ class Events extends Shadow {
}) })
.overflowY("scroll") .overflowY("scroll")
}) })
.horizontalAlign("center")
.boxSizing("border-box") .boxSizing("border-box")
.paddingVertical(1, em) .paddingVertical(1, em)
.height(100, pct) .height(100, pct)

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

@@ -7,14 +7,14 @@ class JobForm extends Shadow {
.color("var(--text)") .color("var(--text)")
.border("1px solid var(--accent)") .border("1px solid var(--accent)")
.fontSize(0.9, rem) .fontSize(0.9, rem)
.backgroundColor("var(--accentdark)") .backgroundColor("var(--darkaccent)")
.borderRadius(12, px) .borderRadius(12, px)
.outline("none") .outline("none")
.onTouch((start) => { .onTouch((start) => {
if (start) { if (start) {
this.style.backgroundColor = "var(--accent)" this.style.backgroundColor = "var(--accent)"
} else { } 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() { render() {
VStack(() => { VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("Jobs") h1("Jobs")
.color("var(--quillred)") .color("var(--accentdark)")
.textAlign("center") .textAlign("center")
.marginBottom(0.25, em) .fontFamily("Arial")
h3(global.currentNetwork.name) })
.color("var(--quillred)") .verticalAlign("center")
.textAlign("center") .gap(0.5, em)
.margin(0) .marginTop(0.5, em)
.fontFamily("Bona")
// JobForm() // JobForm()
SearchBar() SearchBar()
VStack(() => { VStack(() => {
if (this.jobs == "" || this.jobs == []) { if (!this.jobs || this.jobs == []) {
LoadingCircle() LoadingCircle()
} else if (this.jobs.length > 0) { } else if (this.jobs.length > 0) {
for (let i = 0; i < this.jobs.length; i++) { for (let i = 0; i < this.jobs.length; i++) {
@@ -64,6 +66,7 @@ class Jobs extends Shadow {
}) })
.overflowY("scroll") .overflowY("scroll")
}) })
.horizontalAlign("center")
.boxSizing("border-box") .boxSizing("border-box")
.paddingVertical(1, em) .paddingVertical(1, em)
.height(100, pct) .height(100, pct)
@@ -83,6 +86,7 @@ class Jobs extends Shadow {
} }
checkForUpdates(currentJobs, fetchedJobs) { checkForUpdates(currentJobs, fetchedJobs) {
console.log(currentJobs, fetchedJobs)
if (currentJobs.length !== fetchedJobs.length) return true; if (currentJobs.length !== fetchedJobs.length) return true;
const currentMap = new Map(currentJobs.map(job => [job.id, job])); 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() { render() {
VStack(() => { VStack(() => {
HStack(() => {
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
h1("People") h1("People")
.color("rgb(158 136 105)") .color("var(--accentdark)")
.textAlign("center") .textAlign("center")
.marginBottom(0.25, em) .fontFamily("Arial")
h3(global.currentNetwork.name) })
.color("var(--quillred)") .verticalAlign("center")
.textAlign("center") .gap(0.5, em)
.margin(0) .marginTop(0.5, em)
.marginBottom(0.5, em)
.fontFamily("Bona")
if (this.people == "") { if (this.people == "") {
LoadingCircle() LoadingCircle()
@@ -57,6 +58,7 @@ class People extends Shadow {
.color("var(--darkbrown)") .color("var(--darkbrown)")
} }
}) })
.horizontalAlign("center")
.position("relative") .position("relative")
.boxSizing("border-box") .boxSizing("border-box")
.paddingVertical(1, em) .paddingVertical(1, em)

3
src/components/AppMenu.js
View File

@@ -17,6 +17,7 @@ class AppMenu extends Shadow {
image.style.borderBottom = "1px solid transparent" image.style.borderBottom = "1px solid transparent"
const app = image.attributes.app.value const app = image.attributes.app.value
if (app === global.currentApp()) { if (app === global.currentApp()) {
image.style.borderBottom = "1px solid var(--text)"
image.src = util.cssVariable(this.images[app].src[1]) image.src = util.cssVariable(this.images[app].src[1])
} else { } else {
image.src = util.cssVariable(this.images[app].src[0]) 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") .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
.onTouch(async (done, e) => { .onTouch(async (done, e) => {
if(done) { if(done) {
console.log(e)
e.target.style.borderBottom = "1px solid var(--text)"
global.openApp(app) global.openApp(app)
this.onNewSelection() this.onNewSelection()
await Haptics.impact({ style: ImpactStyle.Light }); 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/Jobs/Jobs.js"
import "../apps/People/People.js" import "../apps/People/People.js"
import "../apps/Events/Events.js" import "../apps/Events/Events.js"
import "../apps/Announcements/Announcements.js"
class AppWindow extends Shadow { class AppWindow extends Shadow {
render() { render() {
@@ -10,7 +11,7 @@ class AppWindow extends Shadow {
let app = global.currentApp() let app = global.currentApp()
switch(app) { switch(app) {
case "Dashboard": case "Dashboard":
Forum() Announcements()
break; break;
case "Messages": case "Messages":

6
src/components/SearchBar.js
View File

@@ -10,8 +10,7 @@ class SearchBar extends Shadow {
.boxSizing("border-box") .boxSizing("border-box")
.paddingHorizontal(1, em) .paddingHorizontal(1, em)
.color("var(--accent)") .color("var(--accent)")
.background("#fff1dd") .background("var(--darkaccent)")
.marginTop(0.75, em)
.marginBottom(1, em) .marginBottom(1, em)
.border("1px solid black") .border("1px solid black")
.borderRadius(100, px) .borderRadius(100, px)
@@ -25,8 +24,7 @@ class SearchBar extends Shadow {
.paddingVertical(0.75, em) .paddingVertical(0.75, em)
.boxSizing("border-box") .boxSizing("border-box")
.paddingHorizontal(1, em) .paddingHorizontal(1, em)
.background("#fff1dd") .background("var(--darkaccent)")
.marginTop(0.75, em)
.marginBottom(1, em) .marginBottom(1, em)
.border("1px solid black") .border("1px solid black")
.borderRadius(15, px) .borderRadius(15, px)

7
vite.config.ts
View File

@@ -6,7 +6,8 @@ export default defineConfig({
outDir: '../dist', outDir: '../dist',
minify: false, minify: false,
emptyOutDir: true, emptyOutDir: true,
sourcemap: true sourcemap: true,
target: 'esnext' // modern version of browsers, allows top-level await
}, },
server: { server: {
proxy: { proxy: {
@@ -26,6 +27,10 @@ export default defineConfig({
"/api": { "/api": {
target: "http://localhost:10002", target: "http://localhost:10002",
changeOrigin: true changeOrigin: true
},
"/db": {
target: "http://localhost:10002",
changeOrigin: true
} }
}, },
host: true, host: true,