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

fix events icon, misc errors, new sidebar started

Browse Source
This commit is contained in:
metacryst
2026-03-20 09:27:56 -05:00
parent 41a9c9d269
commit 8fad5d7717
6 changed files with 254 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
readme.md
View File

@@ -1,35 +1,47 @@
### Run Web App
## Run in Browser
```npm run start```
### Build and Run (iOS App)
https://capacitorjs.com/docs/ios#adding-the-ios-platform
Add this option into the top level of capacitor.config.json if you want the ios app to call the dev server:
### Browser: Dev Frontend and Dev Backend (localhost)
This option should be at the top level of capacitor.config.json
"server": {
"url": "http://sam.local:5173",
"cleartext": true
},
Otherwise, it will call prod.
### Browser: Prod Frontend and Prod Backend
Run:
vite build
npx serve dist
To Install:
If you need to login again:
run localStorage.clear() in the browser dev tools console and then refresh the page.
## Run On Device
https://capacitorjs.com/docs/ios#adding-the-ios-platform
One-Time Install:
npm install @capacitor/ios
npx cap add ios
To Open XCode:
npx cap open ios
To Rerun:
Run this command to rebuild for iOS
npm run build && npx cap copy ios
### Build and run (In Browser, hitting prod server)
vite build
npx serve dist
### iOS: Dev Frontend and Dev Backend (localhost)
This option should be at the top level of capacitor.config.json
"server": {
"url": "http://sam.local:5173",
"cleartext": true
},
If you need to login again:
run localStorage.clear() in the browser dev tools console and then refresh the page.
### iOS: Dev Frontend with Prod Backend (frm.so)
Add "https://frm.so" to VITE_API_URL in .env.development
### iOS: Prod Frontend and Prod Backend (frm.so)
Remove the "server" object from capacitor.config
### Various Commands
npx cap config - this will list the full configuration currently being used

80
src/Home/Home.js
View File

@@ -4,6 +4,9 @@ import "../components/AppWindowContainer.js"
class Home extends Shadow {
dragStartX = null
sidebarOpen = false
render() {
ZStack(() => {
@@ -36,6 +39,83 @@ class Home extends Shadow {
.height(window.visualViewport.height - 20, px)
.position("fixed")
.top(20, px)
.borderLeft("1px solid var(--accent)")
.onTouch((start, e) => {
console.log(e)
if(this.sidebarOpen) {
this.sidebarOpenDrag(start, e)
} else {
this.sidebarClosedDrag(start, e)
}
})
}
sidebarOpenDrag(start, e) {
console.log("sidebaropendrag")
if(start) {
let fiveSixths = (window.outerWidth * 5) / 6
let amount = e.targetTouches[0].clientX
if(amount < fiveSixths) {
this.dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar)
}
} else {
if(!this.dragStartX) return;
let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX
if(endX < oneThird) {
this.style.transition = "left .2s"
this.style.left = `0px`
this.sidebarOpen = false
} else {
this.style.transition = "left .2s"
this.sidebarOpen = true
this.style.left = `${oneThird * 2}px`
}
this.style.transition = ""
this.dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar)
}
}
sidebarClosedDrag(start, e) {
console.log(e)
if(start) {
let oneTenth = window.outerWidth / 10
let amount = e.targetTouches[0].clientX
if(amount < oneTenth) {
this.dragStartX = e.touches[0].clientX
document.addEventListener("touchmove", this.moveSidebar)
}
} else {
if(!this.dragStartX) return;
let oneThird = window.outerWidth / 3
let endX = e.changedTouches[0].clientX
if(endX > oneThird) {
this.style.transition = "left .2s"
this.style.left = `${oneThird * 2}px`
this.sidebarOpen = true
} else {
this.sidebarOpen = false
this.style.left = "0px"
}
this.style.transition = ""
this.dragStartX = null
document.removeEventListener("touchmove", this.moveSidebar)
}
}
moveSidebar = (e) => {
let twoThirds = window.outerWidth * .66
let amount = e.targetTouches[0].clientX
if(e.targetTouches[0] && amount < twoThirds) {
console.log("dragtivated: ", amount, twoThirds)
this.style.left = `${amount}px`
}
}
}

273
src/Profile/Profile.js
View File

@@ -18,152 +18,153 @@ css(`
`)
class Profile extends Shadow {
constructor() {
super()
this.profile = global.profile
this.bioText = global.profile.bio ?? ""
}
constructor() {
super()
this.profile = global.profile
this.bioText = global.profile.bio ?? ""
}
render() {
ZStack(() => {
p("< Back")
.color("var(--darkred)")
.fontSize(1.5, em)
.position("absolute")
.fontFamily("Arial")
.top(2, rem)
.left(2, rem)
.zIndex(1001)
.onClick(() => {
$("appwindowcontainer-").closeProfile()
})
render() {
ZStack(() => {
p("< Back")
.color("var(--darkred)")
.fontSize(1.2, em)
.position("absolute")
.fontFamily("Arial")
.top(3, rem)
.left(2, rem)
.zIndex(1001)
.onClick((done) => {
if(done)
$("appwindowcontainer-").closeProfile()
})
form(() => {
input("Image Upload", "0px", "0px")
.attr({ name: "image-upload", type: "file" })
.display("none")
.visibility("hidden")
.onChange((e) => {
this.handleUpload(e.target.files[0]);
})
form(() => {
input("Image Upload", "0px", "0px")
.attr({ name: "image-upload", type: "file" })
.display("none")
.visibility("hidden")
.onChange((e) => {
this.handleUpload(e.target.files[0]);
})
VStack(() => {
HStack(() => {
if (global.profile.image_path) {
img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
.borderRadius(100, pct)
}
})
.boxSizing("border-box")
.height(10, em)
.width(10, em)
.border("1px solid var(--accent)")
.borderRadius(100, pct)
.background("var(--darkaccent)")
.onTap(() => {
const inputSelector = this.$('[name="image-upload"]');
inputSelector.click()
})
VStack(() => {
HStack(() => {
if (global.profile.image_path) {
img(`${util.HOST}${global.profile.image_path}`, "10em", "10em")
.borderRadius(100, pct)
}
})
.boxSizing("border-box")
.height(10, em)
.width(10, em)
.border("1px solid var(--accent)")
.borderRadius(100, pct)
.background("var(--darkaccent)")
.onTap(() => {
const inputSelector = this.$('[name="image-upload"]');
inputSelector.click()
})
h1(this.profile.first_name + " " + this.profile.last_name)
.color("var(--headertext")
.width(70, pct)
.textAlign("center")
.marginBottom(0.25, em)
h1(this.profile.first_name + " " + this.profile.last_name)
.color("var(--headertext")
.width(70, pct)
.textAlign("center")
.marginBottom(0.25, em)
p("Joined " + this.convertDate(this.profile.created))
.color("var(--headertext)")
.marginBottom(0.5, em)
p("Joined " + this.convertDate(this.profile.created))
.color("var(--headertext)")
.marginBottom(0.5, em)
h2("Bio")
.color("var(--headertext")
.margin(0)
.paddingVertical(0.9, em)
.borderTop("2px solid var(--divider)")
.width(70, pct)
.textAlign("center")
h2("Bio")
.color("var(--headertext")
.margin(0)
.paddingVertical(0.9, em)
.borderTop("2px solid var(--divider)")
.width(70, pct)
.textAlign("center")
textarea(this.bioText ? this.bioText : "Tap to start typing...")
.attr({ name: "bioinput" })
.padding(1, em)
.width(90, pct)
.height(15, em)
.boxSizing("border-box")
.background("var(--searchbackground)")
.color("var(--darktext)")
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
.borderRadius(12, px)
.fontFamily("Arial")
.fontSize(1.1, em)
.outline("none")
.onAppear((e) => {
if (this.bioText) {
$("profile- textarea").innerText = this.bioText
}
})
.lineHeight(1.2, em)
textarea(this.bioText ? this.bioText : "Tap to start typing...")
.attr({ name: "bioinput" })
.padding(1, em)
.width(90, pct)
.height(15, em)
.boxSizing("border-box")
.background("var(--searchbackground)")
.color("var(--darktext)")
.border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
.borderRadius(12, px)
.fontFamily("Arial")
.fontSize(1.1, em)
.outline("none")
.onAppear((e) => {
if (this.bioText) {
$("profile- textarea").innerText = this.bioText
}
})
.lineHeight(1.2, em)
button("Save Bio")
.padding(1, em)
.fontSize(1.1, em)
.borderRadius(12, px)
.background("var(--searchbackground)")
.color("var(--text)")
.border("1px solid var(--accent)")
.boxSizing("border-box")
.marginVertical(0.75, em)
})
.horizontalAlign("center")
.marginTop(5, em)
})
.onSubmit(async (e) => {
e.preventDefault();
const newBio = new FormData(e.target).get("bioinput");
if (newBio.trim() !== this.profile.bio.trim()) {
const result = await server.editBio(newBio, this.profile.id)
const { bio, updated_at } = result.data
global.profile.bio = bio
global.profile.updated_at = updated_at
this.profile = global.profile
}
})
})
.backgroundColor("var(--main)")
.overflowX("hidden")
.height(window.visualViewport.height - 20, px)
.boxSizing("border-box")
.width(100, pct)
.position("fixed")
.top(100, vh)
.zIndex(5)
.transition("top .3s")
.pointerEvents("none")
}
button("Save Bio")
.padding(1, em)
.fontSize(1.1, em)
.borderRadius(12, px)
.background("var(--searchbackground)")
.color("var(--text)")
.border("1px solid var(--accent)")
.boxSizing("border-box")
.marginVertical(0.75, em)
})
.horizontalAlign("center")
.marginTop(5, em)
})
.onSubmit(async (e) => {
e.preventDefault();
const newBio = new FormData(e.target).get("bioinput");
if (newBio.trim() !== this.profile.bio.trim()) {
const result = await server.editBio(newBio, this.profile.id)
const { bio, updated_at } = result.data
global.profile.bio = bio
global.profile.updated_at = updated_at
this.profile = global.profile
}
})
})
.backgroundColor("var(--main)")
.overflowX("hidden")
.height(window.visualViewport.height - 20, px)
.boxSizing("border-box")
.width(100, pct)
.position("fixed")
.top(100, vh)
.zIndex(5)
.transition("top .3s")
.pointerEvents("none")
}
async handleUpload(file) {
try {
const body = new FormData();
body.append('image', file);
const res = await util.authFetch(`${util.HOST}/profile/upload-image`, {
method: "POST",
credentials: "include",
headers: {
"Accept": "application/json"
},
body: body
});
async handleUpload(file) {
try {
const body = new FormData();
body.append('image', file);
const res = await util.authFetch(`${util.HOST}/profile/upload-image`, {
method: "POST",
credentials: "include",
headers: {
"Accept": "application/json"
},
body: body
});
if(res.status === 401) {
return res.status
}
if (!res.ok) return res.status;
const data = await res.json()
global.profile = data.member
console.log(global.profile)
} catch (err) { // Network error / Error reaching server
console.error(err);
}
}
if(res.status === 401) {
return res.status
}
if (!res.ok) return res.status;
const data = await res.json()
global.profile = data.member
console.log(global.profile)
} catch (err) { // Network error / Error reaching server
console.error(err);
}
}
convertDate(rawDate) {
const parsed = new Date(rawDate);

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

@@ -12,7 +12,7 @@
--quillred: #DE3F3F;
--brown: #812A18;
--sidebar: #3f914c;
--sidebar: #698b6f;
--divider: #523636;
--darkbrown: #3f0808;
--darkgrey: #5c4646;
@@ -20,7 +20,7 @@
--headertext: #433c36e2;
--searchbackground: #dfc9ac;
--loginButton: var(--main);
--loginBackground: var(--gold);
--loginBackground: #d96b6b;
--home-src: /_/icons/home.svg;
--home-selected-src: /_/icons/homelightselected.svg;

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

@@ -10,7 +10,8 @@ class PeopleCard extends Shadow {
render() {
HStack(() => {
HStack(() => {
if (!this.imgSrc.includes("null")) {
console.log(this.imgSrc)
if (this.imgSrc && !this.imgSrc.includes("null")) {
img(this.imgSrc, "3em", "3em")
.borderRadius(100, pct)
}
@@ -37,7 +38,9 @@ class PeopleCard extends Shadow {
}
connectedCallback() {
this.imgSrc = `${util.HOST}${this.person.image_path}`
if(this.person.image_path) {
this.imgSrc = `${util.HOST}${this.person.image_path}`
}
}
convertDate(rawDate) {

4
src/public/_/icons/events.svg
View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5.0 -10.0 110.0 135.0">
<path d="m39.043 13.828c-0.37891 0-0.74219 0.15234-1.0117 0.42188-0.26562 0.26953-0.41797 0.63281-0.41406 1.0117v3.8164h-8.7109c-3.3477 0-6.0938 2.7461-6.0938 6.0977v9.8281c-2.9883 13.051-8.9258 25.238-17.371 35.625-0.007812 0.007813-0.015625 0.019532-0.019531 0.03125l-0.39844 0.51562c-1.8281 2.3828-0.03125 6.0117 2.9727 6.0117h14.816v1.875c0 3.9102 3.1953 7.1094 7.1055 7.1094h58.688c3.9102 0 7.1094-3.1992 7.1094-7.1094v-43.777-0.058594-2.0742-0.035156-7.9414c0-3.3516-2.7461-6.0938-6.0977-6.0938h-8.6992v-3.8203c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797s-0.74219 0.15234-1.0078 0.42188c-0.26953 0.26953-0.41797 0.63281-0.41797 1.0117v3.8203l-37.582-0.003906v-3.8164c0-0.37891-0.14844-0.74609-0.41797-1.0156-0.26953-0.26953-0.63672-0.41797-1.0156-0.41797zm-10.137 8.1094h8.7109v3.8281c0.003906 0.78906 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.42187-0.63281 0.42187-1.0117v-3.8281h37.586v3.8281h-0.003906c0.003906 0.78516 0.64062 1.4219 1.4258 1.4258 0.37891 0 0.74219-0.14844 1.0117-0.41406 0.26953-0.26953 0.41797-0.63281 0.42188-1.0117v-3.8281h8.6992c1.8047 0 3.2383 1.4297 3.2383 3.2383v8.6172h-67.188v-0.60156-0.074218-7.9414c0-1.8047 1.4336-3.2344 3.2383-3.2383zm-3.5312 14.711h67.09c-3.0977 12.426-8.8789 24.031-16.969 33.98-0.011719 0.007813-0.019532 0.019532-0.03125 0.03125l-0.39062 0.51562c-1.5234 1.9883-3.8789 3.1562-6.3828 3.1562h-44.441c-0.003906-0.003906-0.011719-0.003906-0.015625-0.003906s-0.011719 0-0.015625 0.003906h-16.223c-0.82031 0-1.1953-0.76562-0.69922-1.4141l0.36719-0.48438 0.011719-0.019532c8.5-10.457 14.547-22.676 17.699-35.766zm67.477 8.707v33.707c0 2.3672-1.8828 4.2617-4.25 4.2617h-58.684c-2.3672 0-4.25-1.8945-4.25-4.2617v-1.875h43.027c3.3906 0 6.5859-1.582 8.6484-4.2734l0.36719-0.48437c6.5898-8.1016 11.703-17.266 15.141-27.074z" fill="#000000"/>
<svg width="92" height="73" viewBox="0 0 92 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.7556 0C34.3767 0 34.0134 0.15234 33.7439 0.42188C33.4782 0.69141 33.3259 1.05469 33.3298 1.43358V5.24998H24.6189C21.2712 5.24998 18.5251 7.99608 18.5251 11.3477V21.1758C15.5368 34.2268 9.5993 46.4138 1.1541 56.8008C1.14629 56.8086 1.13848 56.8203 1.13457 56.832L0.736131 57.3477C-1.09197 59.7305 0.704881 63.3593 3.70883 63.3593H18.5248V65.2343C18.5248 69.1445 21.7201 72.3438 25.6303 72.3438H84.3183C88.2285 72.3438 91.4277 69.1445 91.4277 65.2343V21.4574V21.3988V19.3246V19.2894V11.348C91.4277 7.9964 88.6816 5.2542 85.33 5.2542H76.6308V1.4339C76.6308 1.05499 76.4824 0.68781 76.2129 0.4183C75.9433 0.14877 75.5761 0.000329971 75.1973 0.000329971C74.8184 0.000329971 74.4551 0.15267 74.1895 0.42221C73.9199 0.69174 73.7715 1.05502 73.7715 1.43391V5.25421L36.1895 5.2503V1.4339C36.1895 1.05499 36.0411 0.687814 35.7715 0.418303C35.502 0.148773 35.1344 0 34.7556 0ZM24.6186 8.1094H33.3295V11.9375C33.3334 12.7266 33.9701 13.3594 34.7553 13.3633C35.1342 13.3633 35.4975 13.2149 35.767 12.9492C36.0365 12.6797 36.1888 12.3164 36.1888 11.9375V8.10944H73.7748V11.9375H73.7709C73.7748 12.7227 74.4115 13.3594 75.1967 13.3633C75.5756 13.3633 75.9389 13.2149 76.2084 12.9493C76.478 12.6798 76.6264 12.3165 76.6303 11.9376V8.10948H85.3295C87.1342 8.10948 88.5678 9.53918 88.5678 11.3478V19.965H21.3798V19.3634V19.2892V11.3478C21.3798 9.5431 22.8139 8.1133 24.6186 8.1094ZM21.0874 22.8204H88.1774C85.0797 35.2464 79.2985 46.8514 71.2084 56.8004C71.1966 56.8082 71.1888 56.8199 71.1771 56.8317L70.7865 57.3473C69.2631 59.3356 66.9076 60.5035 64.4037 60.5035H19.9627C19.9588 60.4996 19.951 60.4996 19.9471 60.4996C19.9432 60.4996 19.9353 60.4996 19.9314 60.5035H3.70844C2.88813 60.5035 2.51314 59.7379 3.00922 59.0894L3.37641 58.605L3.38813 58.5855C11.8881 48.1285 17.9354 35.9104 21.0874 22.8204ZM88.5644 31.5274V65.2344C88.5644 67.6016 86.6816 69.4961 84.3144 69.4961H25.6304C23.2632 69.4961 21.3804 67.6016 21.3804 65.2344V63.3594H64.4074C67.798 63.3594 70.9933 61.7774 73.0558 59.086L73.423 58.6016C80.0127 50.5 85.1264 41.3354 88.5644 31.5274Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB