better styling
This commit is contained in:
@@ -43,7 +43,7 @@ class Login extends Shadow {
|
||||
.margin(1, em).padding(1, em)
|
||||
.fontSize(0.9, rem)
|
||||
.borderRadius(12, px)
|
||||
.background("var(--accent)")
|
||||
.background("var(--darkaccent)")
|
||||
.color("var(--text)")
|
||||
.border("1px solid var(--accent)")
|
||||
})
|
||||
@@ -72,7 +72,7 @@ class Login extends Shadow {
|
||||
}
|
||||
})
|
||||
})
|
||||
.background("var(--main)")
|
||||
.background("rgb(69, 20, 13)")
|
||||
.width(100, vw)
|
||||
.height(100, pct)
|
||||
.margin(0)
|
||||
|
||||
@@ -43,7 +43,11 @@
|
||||
--accent: #3D2622;
|
||||
--darkaccent: #240609;
|
||||
--text: #FADFB6;
|
||||
--divider: #523636;
|
||||
--darktext: #62473E;
|
||||
--headertext: #a2907d;
|
||||
--darkred: #6b2c1d;
|
||||
|
||||
|
||||
--home-src: /_/icons/homelight.svg;
|
||||
--home-selected-src: /_/icons/homelightselected.svg;
|
||||
|
||||
@@ -1,37 +1,16 @@
|
||||
import "../../components/TopBar.js"
|
||||
|
||||
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(--darkaccent)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
.fontSize("3xl")
|
||||
.fontWeight("bold")
|
||||
})
|
||||
.verticalAlign("center")
|
||||
.gap(0.5, em)
|
||||
.marginTop(2, em)
|
||||
TopBar()
|
||||
})
|
||||
.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)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import "../../components/TopBar.js"
|
||||
import "../../components/LoadingCircle.js"
|
||||
import "./EventCard.js"
|
||||
import server from "../../_/code/bridge/serverFunctions.js"
|
||||
@@ -37,18 +38,7 @@ class Events extends Shadow {
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
|
||||
|
||||
h1("Events")
|
||||
.color("var(--darkaccent)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
})
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("center")
|
||||
.gap(0.5, em)
|
||||
.marginTop(0.5, em)
|
||||
TopBar()
|
||||
|
||||
SearchBar()
|
||||
|
||||
@@ -61,7 +51,7 @@ class Events extends Shadow {
|
||||
}
|
||||
} else {
|
||||
h2("No Events")
|
||||
.color("var(--text)")
|
||||
.color("var(--divider)")
|
||||
.fontWeight("bold")
|
||||
.marginTop(7.5, em)
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
@@ -39,18 +39,7 @@ class Jobs extends Shadow {
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
|
||||
|
||||
h1("Jobs")
|
||||
.color("var(--darkaccent)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
})
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("center")
|
||||
.gap(0.5, em)
|
||||
.marginTop(0.5, em)
|
||||
TopBar()
|
||||
|
||||
// JobForm()
|
||||
|
||||
@@ -65,7 +54,7 @@ class Jobs extends Shadow {
|
||||
}
|
||||
} else {
|
||||
h2("No Jobs")
|
||||
.color("var(--text)")
|
||||
.color("var(--divider)")
|
||||
.fontWeight("bold")
|
||||
.marginTop(7.5, em)
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import "../../components/TopBar.js"
|
||||
import "./PeopleCard.js"
|
||||
|
||||
css(`
|
||||
@@ -24,18 +25,7 @@ class People extends Shadow {
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
img(`/db/images/${global.currentNetwork.logo}`, "2.5em", "2.5em")
|
||||
|
||||
h1("People")
|
||||
.color("var(--darkaccent)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
})
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("center")
|
||||
.gap(0.5, em)
|
||||
.marginTop(0.5, em)
|
||||
TopBar()
|
||||
|
||||
VStack(() => {
|
||||
if (this.people == "") {
|
||||
@@ -56,6 +46,7 @@ class People extends Shadow {
|
||||
.color("var(--darkbrown)")
|
||||
}
|
||||
})
|
||||
.gap(0.8, em)
|
||||
})
|
||||
.position("relative")
|
||||
.boxSizing("border-box")
|
||||
|
||||
@@ -8,28 +8,23 @@ class PeopleCard extends Shadow {
|
||||
HStack(() => {
|
||||
HStack(() => { })
|
||||
.boxSizing("border-box")
|
||||
.height(3.5, em)
|
||||
.width(3.5, em)
|
||||
.padding(0.5, em)
|
||||
.height(3, em)
|
||||
.width(3, em)
|
||||
.paddingHorizontal(0.5, em)
|
||||
.border("1px solid var(--accent)")
|
||||
.borderRadius(100, pct)
|
||||
.background("black")
|
||||
|
||||
VStack(() => {
|
||||
h3(this.person.first_name + " " + this.person.last_name)
|
||||
.color("var(--text)")
|
||||
.fontSize(1.2, em)
|
||||
.fontWeight("bold")
|
||||
p(this.person.first_name + " " + this.person.last_name)
|
||||
.color("var(--headertext)")
|
||||
.marginVertical(0, em)
|
||||
p("Member since " + this.convertDate(this.person.created))
|
||||
})
|
||||
.verticalAlign("center")
|
||||
.horizontalAlign("left")
|
||||
.gap(0.5, em)
|
||||
})
|
||||
.width(100, pct)
|
||||
.boxSizing("border-box")
|
||||
.padding(0.75, em)
|
||||
.paddingHorizontal(1.75, em)
|
||||
.gap(1, em)
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ class AppMenu extends Shadow {
|
||||
.display("grid")
|
||||
.gridTemplateColumns(`repeat(${apps.filter(a => a !== "Settings").length}, 1fr)`)
|
||||
.placeItems("center")
|
||||
.borderTop("0.5px solid #783131")
|
||||
.borderTop("0.5px solid var(--divider)")
|
||||
.height("auto")
|
||||
.zIndex(1)
|
||||
.paddingTop(0.5, em)
|
||||
|
||||
29
src/components/TopBar.js
Normal file
29
src/components/TopBar.js
Normal file
@@ -0,0 +1,29 @@
|
||||
class TopBar extends Shadow {
|
||||
render() {
|
||||
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(global.currentApp())
|
||||
.color("var(--headertext)")
|
||||
.textAlign("center")
|
||||
.fontFamily("Arial")
|
||||
.fontSize("3xl")
|
||||
.fontWeight("bold")
|
||||
})
|
||||
.paddingLeft(1, em)
|
||||
.paddingBottom(1.5, em)
|
||||
.verticalAlign("center")
|
||||
.gap(0.5, em)
|
||||
.marginTop(3, em)
|
||||
}
|
||||
}
|
||||
|
||||
register(TopBar)
|
||||
Reference in New Issue
Block a user