Mobile improvements
This commit is contained in:
@@ -30,70 +30,32 @@ class Forum extends Shadow {
|
||||
|
||||
render() {
|
||||
ZStack(() => {
|
||||
HStack(() => {
|
||||
VStack(() => {
|
||||
img("/_/icons/logo.svg", "2em")
|
||||
.padding(0.8, em)
|
||||
.borderRadius(12, px)
|
||||
.marginHorizontal(1, em)
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.background = "var(--darkbrown)"
|
||||
} else {
|
||||
this.style.background = ""
|
||||
}
|
||||
})
|
||||
.opacity(0)
|
||||
VStack(() => {
|
||||
|
||||
img("/_/icons/place/austin.svg", "2em")
|
||||
.padding(0.8, em)
|
||||
.borderRadius(12, px)
|
||||
.marginHorizontal(1, em)
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.background = "var(--darkbrown)"
|
||||
} else {
|
||||
this.style.background = ""
|
||||
}
|
||||
})
|
||||
.opacity(0)
|
||||
ForumPanel()
|
||||
|
||||
})
|
||||
.height(100, vh)
|
||||
.paddingLeft(2, em)
|
||||
.paddingRight(2, em)
|
||||
.gap(1, em)
|
||||
.marginTop(20, vh)
|
||||
|
||||
VStack(() => {
|
||||
|
||||
ForumPanel()
|
||||
|
||||
input("Message Hyperia", "98%")
|
||||
.paddingVertical(1, em)
|
||||
.paddingLeft(2, pct)
|
||||
.color("var(--accent)")
|
||||
.background("var(--darkbrown)")
|
||||
.marginBottom(6, em)
|
||||
.border("none")
|
||||
.fontSize(1, em)
|
||||
.onKeyDown(function (e) {
|
||||
if (e.key === "Enter") {
|
||||
window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
|
||||
this.value = ""
|
||||
}
|
||||
})
|
||||
})
|
||||
.gap(0.5, em)
|
||||
.width(100, pct)
|
||||
.height(100, vh)
|
||||
.alignHorizontal("center")
|
||||
.alignVertical("end")
|
||||
input("Message Hyperia", "98%")
|
||||
.paddingVertical(1, em)
|
||||
.paddingLeft(2, pct)
|
||||
.color("var(--accent)")
|
||||
.background("var(--darkbrown)")
|
||||
.marginBottom(6, em)
|
||||
.border("none")
|
||||
.fontSize(1, em)
|
||||
.onKeyDown(function (e) {
|
||||
if (e.key === "Enter") {
|
||||
window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
|
||||
this.value = ""
|
||||
}
|
||||
})
|
||||
})
|
||||
.width(100, "%")
|
||||
.height(87, vh)
|
||||
.x(0).y(0, vh)
|
||||
.gap(0.5, em)
|
||||
.width(100, pct)
|
||||
.height(100, vh)
|
||||
.alignHorizontal("center")
|
||||
.alignVertical("end")
|
||||
})
|
||||
.onAppear(() => document.body.style.backgroundColor = "var(--darkbrown)")
|
||||
.width(100, pct)
|
||||
.height(100, pct)
|
||||
}
|
||||
|
||||
@@ -54,14 +54,12 @@ class ForumPanel extends Shadow {
|
||||
.paddingLeft(4, pct)
|
||||
.backgroundColor("var(--darkbrown)")
|
||||
.onAppear(async () => {
|
||||
console.log("appear")
|
||||
requestAnimationFrame(() => {
|
||||
this.scrollTop = this.scrollHeight
|
||||
});
|
||||
let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
|
||||
if(!res) console.error("failed to get messages")
|
||||
if(res.msg.length > 0 && this.messages.length === 0) {
|
||||
console.log("rerendering", res.msg)
|
||||
this.messages = res.msg
|
||||
this.rerender()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user