1, 4: Fixing 404 after logged out, adding market entry
This commit is contained in:
metacryst
117
ui/site/apps/Market/Market.js
Normal file
117
ui/site/apps/Market/Market.js
Normal file
@@ -0,0 +1,117 @@
|
||||
import "./MarketSidebar.js"
|
||||
import "./MarketGrid.js"
|
||||
|
||||
css(`
|
||||
market- {
|
||||
font-family: 'Bona';
|
||||
}
|
||||
|
||||
market- input::placeholder {
|
||||
font-family: 'Bona Nova';
|
||||
font-size: 0.9em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none; /* remove default style */
|
||||
-webkit-appearance: none;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: var(--red);
|
||||
}
|
||||
`)
|
||||
|
||||
class Market extends Shadow {
|
||||
|
||||
listings = [
|
||||
{
|
||||
title: "Shield Lapel Pin",
|
||||
stars: "5",
|
||||
reviews: 1,
|
||||
price: "$12",
|
||||
company: "Hyperia",
|
||||
type: "new",
|
||||
image: "/db/images/1"
|
||||
}
|
||||
]
|
||||
|
||||
render() {
|
||||
ZStack(() => {
|
||||
HStack(() => {
|
||||
MarketSidebar()
|
||||
|
||||
MarketGrid(this.listings)
|
||||
})
|
||||
.width(100, "%")
|
||||
.x(0).y(13, vh)
|
||||
|
||||
HStack(() => {
|
||||
input("Search for products...", "45vw")
|
||||
.attr({
|
||||
"type": "text"
|
||||
})
|
||||
.fontSize(1.1, em)
|
||||
.paddingLeft(1.3, em)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--periwinkle)")
|
||||
.outline("none")
|
||||
.color("var(--accent)")
|
||||
.borderRadius(10, px)
|
||||
|
||||
button("Search")
|
||||
.marginLeft(2, em)
|
||||
.borderRadius(10, px)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--periwinkle)")
|
||||
.color("var(--accent)")
|
||||
.fontFamily("Bona Nova")
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.background = "var(--green)"
|
||||
|
||||
} else {
|
||||
this.style.background = "transparent"
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
button("+ Add Item")
|
||||
.width(7, em)
|
||||
.marginLeft(1, em)
|
||||
.borderRadius(10, px)
|
||||
.background("transparent")
|
||||
.border("1px solid var(--periwinkle)")
|
||||
.color("var(--accent)")
|
||||
.fontFamily("Bona Nova")
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.background = "var(--green)"
|
||||
|
||||
} else {
|
||||
this.style.background = "transparent"
|
||||
|
||||
}
|
||||
})
|
||||
.onClick((clicking) => {
|
||||
console.log(this, "clicked")
|
||||
})
|
||||
|
||||
})
|
||||
.x(55, vw).y(4, vh)
|
||||
.position("absolute")
|
||||
.transform("translateX(-50%)")
|
||||
})
|
||||
.width(100, "%")
|
||||
.height(100, "%")
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Optional additional logic
|
||||
}
|
||||
}
|
||||
|
||||
register(Market)
|
||||
100
ui/site/apps/Market/MarketGrid.js
Normal file
100
ui/site/apps/Market/MarketGrid.js
Normal file
@@ -0,0 +1,100 @@
|
||||
class MarketGrid extends Shadow {
|
||||
listings;
|
||||
|
||||
constructor(listings) {
|
||||
super()
|
||||
this.listings = listings
|
||||
}
|
||||
|
||||
boldUntilFirstSpace(text) {
|
||||
if(!text) return
|
||||
const index = text.indexOf(' ');
|
||||
if (index === -1) {
|
||||
// No spaces — bold the whole thing
|
||||
return `<b>${text}</b>`;
|
||||
}
|
||||
return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
|
||||
}
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
h3("Results")
|
||||
.marginTop(0.1, em)
|
||||
.marginBottom(1, em)
|
||||
.marginLeft(0.4, em)
|
||||
.color("var(--periwinkle)")
|
||||
|
||||
if (this.listings.length > 0) {
|
||||
ZStack(() => {
|
||||
for (let i = 0; i < this.listings.length; i++) {
|
||||
const rating = this.listings[i].stars
|
||||
const percent = (rating / 5)
|
||||
|
||||
VStack(() => {
|
||||
img(this.listings[i].image)
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
p(this.listings[i].company)
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
p(this.listings[i].title)
|
||||
.fontSize(1.2, em)
|
||||
.fontWeight("bold")
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
HStack(() => {
|
||||
p(this.listings[i].stars)
|
||||
.marginRight(0.2, em)
|
||||
|
||||
ZStack(() => {
|
||||
div("★★★★★") // Empty stars (background)
|
||||
.color("#ccc")
|
||||
|
||||
div("★★★★★") // Filled stars (foreground, clipped by width)
|
||||
.color("#ffa500")
|
||||
.position("absolute")
|
||||
.top(0)
|
||||
.left(0)
|
||||
.whiteSpace("nowrap")
|
||||
.overflow("hidden")
|
||||
.width(percent * 5, em)
|
||||
})
|
||||
.display("inline-block")
|
||||
.position("relative")
|
||||
.fontSize(1.2, em)
|
||||
.lineHeight(1)
|
||||
|
||||
p(this.listings[i].reviews)
|
||||
.marginLeft(0.2, em)
|
||||
})
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
p(this.listings[i].price)
|
||||
.fontSize(1.75, em)
|
||||
.marginBottom(0.5, em)
|
||||
|
||||
button("Buy Now")
|
||||
|
||||
})
|
||||
.padding(1, em)
|
||||
.border("1px solid var(--periwinkle)")
|
||||
.borderRadius(5, "px")
|
||||
}
|
||||
})
|
||||
.display("grid")
|
||||
.gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
|
||||
.gap(1, em)
|
||||
} else {
|
||||
p("No Listings!")
|
||||
}
|
||||
})
|
||||
.height(100, vh)
|
||||
.paddingLeft(2, em)
|
||||
.paddingRight(2, em)
|
||||
.paddingTop(2, em)
|
||||
.gap(0, em)
|
||||
.width(100, "%")
|
||||
}
|
||||
}
|
||||
|
||||
register(MarketGrid)
|
||||
65
ui/site/apps/Market/MarketSidebar.js
Normal file
65
ui/site/apps/Market/MarketSidebar.js
Normal file
@@ -0,0 +1,65 @@
|
||||
class MarketSidebar extends Shadow {
|
||||
render() {
|
||||
VStack(() => {
|
||||
HStack(() => {
|
||||
input()
|
||||
.attr({
|
||||
"type": "checkbox",
|
||||
"id": "hyperia-check"
|
||||
})
|
||||
label("Hyperia-Made")
|
||||
.attr({
|
||||
"for": "hyperia-check"
|
||||
})
|
||||
.marginLeft(0.5, em)
|
||||
})
|
||||
|
||||
HStack(() => {
|
||||
input()
|
||||
.attr({
|
||||
"type": "checkbox",
|
||||
"id": "america-check"
|
||||
})
|
||||
label("America-Made")
|
||||
.attr({
|
||||
"for": "america-check"
|
||||
})
|
||||
.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)
|
||||
})
|
||||
})
|
||||
.paddingTop(12, vh)
|
||||
.paddingLeft(3, em)
|
||||
.paddingRight(3, em)
|
||||
.gap(1, em)
|
||||
.minWidth(10, vw)
|
||||
.userSelect('none')
|
||||
}
|
||||
}
|
||||
|
||||
register(MarketSidebar)
|
||||
Reference in New Issue
Block a user