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

Adding buttons to market

Browse Source
This commit is contained in:
metacryst
2025-11-06 02:22:44 -06:00
parent 8a8fb7f4b1
commit cb526b5ec0
5 changed files with 54 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ui/site/apps/Market.js
View File

@@ -19,7 +19,6 @@ css(`
input[type="checkbox"]:checked {
background-color: var(--red);
}
`)
@@ -29,6 +28,7 @@ class Market extends Shadow {
ZStack(() => {
HStack(() => {
VStack(() => {
HStack(() => {
input()
.attr({
@@ -41,6 +41,7 @@ class Market extends Shadow {
})
.marginLeft(0.5, em)
})
HStack(() => {
input()
.attr({
@@ -53,6 +54,32 @@ class Market extends Shadow {
})
.marginLeft(0.5, em)
})
HStack(() => {
input()
.attr({
"type": "checkbox",
"id": "new-check"
})
label("New")
.attr({
"for": "new-check"
})
.marginLeft(0.5, em)
})
HStack(() => {
input()
.attr({
"type": "checkbox",
"id": "used-check"
})
label("Used")
.attr({
"for": "used-check"
})
.marginLeft(0.5, em)
})
})
.paddingLeft(3, em)
.gap(1, em)
@@ -66,7 +93,7 @@ class Market extends Shadow {
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search for products...", "50vw")
input("Search for products...", "45vw")
.attr({
"type": "text"
})
@@ -77,6 +104,7 @@ class Market extends Shadow {
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
.marginLeft(2, em)
.borderRadius(10, px)
@@ -84,8 +112,18 @@ class Market extends Shadow {
.border("1px solid var(--accent)")
.color("var(--accent)")
.fontFamily("Bona Nova")
button("+ Add Item")
.width(7, em)
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent)")
.color("var(--accent)")
.fontFamily("Bona Nova")
})
.x(50, vw).y(5, vh)
.x(55, vw).y(5, vh)
.position("absolute")
.transform("translateX(-50%)")
})

8
ui/site/components/Home.js
View File

@@ -58,8 +58,8 @@ class Home extends Shadow {
.top("3em")
.right("2em")
.background("transparent")
.border("1px solid var(--tan)")
.color("var(--tan)")
.border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent)")
.color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
.borderRadius(5, px)
.onHover(function (hovering) {
console.log('hovering', hovering, this)
@@ -68,10 +68,11 @@ class Home extends Shadow {
this.style.color = "black"
} else {
this.style.background = ""
this.style.color = "var(--tan)"
this.style.color = window.location.pathname === "/" ? "var(--tan)" : "var(--accent)"
}
})
.onNavigate(function () {
console.log("navigate")
if(window.location.pathname === "/") {
this.style.border = "1px solid var(--tan)"
this.style.color = "var(--tan)"
@@ -81,7 +82,6 @@ class Home extends Shadow {
}
})
})
}
}