From 02648859a8b26f8dbc08218c26cb76a2396cbff7 Mon Sep 17 00:00:00 2001 From: metacryst Date: Tue, 11 Nov 2025 14:19:56 -0600 Subject: [PATCH] Adding location pin, location input --- ui/_/code/quill.js | 30 +++++++++++++++++++++++++ ui/_/code/shared.css | 17 ++++++++++++-- ui/_/icons/locationPin.svg | 13 +++++++++++ ui/public/index.html | 5 +++-- ui/site/apps/Jobs/JobsSidebar.js | 12 ++++++++-- ui/site/apps/Market/MarketGrid.js | 7 ++++++ ui/site/apps/{ => Messages}/Messages.js | 0 ui/site/components/AppWindow.js | 2 +- ui/site/components/Home.js | 2 +- 9 files changed, 80 insertions(+), 8 deletions(-) create mode 100644 ui/_/icons/locationPin.svg rename ui/site/apps/{ => Messages}/Messages.js (100%) diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index ef9148a..23d06c1 100644 --- a/ui/_/code/quill.js +++ b/ui/_/code/quill.js @@ -313,6 +313,22 @@ HTMLElement.prototype.padding = function(one, two, three = "px") { return this } + HTMLElement.prototype.paddingVertical = function(value, unit = "px") { + if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); + this.style.paddingTop = value + unit + this.style.paddingBottom = value + unit + return this + } + + HTMLElement.prototype.paddingHorizontal = function(value, unit = "px") { + if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value)) + throw new Error(`Invalid value: ${value}. Expected a number.`); + this.style.paddingRight = value + unit + this.style.paddingLeft = value + unit + return this + } + HTMLElement.prototype.margin = function(direction, value, unit = "px") { if (!value) { this.style.margin = direction; @@ -503,6 +519,20 @@ HTMLElement.prototype.gap = function(value, unit = "px") { return this } +HTMLElement.prototype.backgroundImage = function (...values) { + const formatted = values + .map(v => { + if(v.includes("/") && !v.includes("gradient")) { + v = "url(" + v + ")" + } + return String(v).trim(); + }) + .join(", "); + + this.style.backgroundImage = formatted; + return this; +}; + /* Elements */ quill.setChildren = function(el, innerContent) { diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index 62165b6..5749d7f 100644 --- a/ui/_/code/shared.css +++ b/ui/_/code/shared.css @@ -1,6 +1,6 @@ :root { --main: #FFDFB4; - --accent: black; + --accent: var(--darkbrown); --tan: #FFDFB4; --purple: #251D44; @@ -11,7 +11,7 @@ --orange: #FE9201; --periwinkle: #655BAF; - --accent2: var(--green); + --accent2: var(--brown); } @media (prefers-color-scheme: dark) { @@ -84,3 +84,16 @@ button { padding: 1em; box-shadow: none; } + +input { + background-color: transparent; + border: 1px solid var(--accent2); + padding-left: 1em; + padding-top: 0.5em; + padding-bottom: 0.5em; + border-radius: 0.3em; +} + +input:focus { + outline: 1px solid var(--red); +} diff --git a/ui/_/icons/locationPin.svg b/ui/_/icons/locationPin.svg new file mode 100644 index 0000000..02c7690 --- /dev/null +++ b/ui/_/icons/locationPin.svg @@ -0,0 +1,13 @@ + + + + + + + + \ No newline at end of file diff --git a/ui/public/index.html b/ui/public/index.html index fab5fd2..a750596 100644 --- a/ui/public/index.html +++ b/ui/public/index.html @@ -12,7 +12,8 @@ } .main-image { - content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%) + content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%); + user-select: none; } @media (max-width: 600px) { .main-image { @@ -44,7 +45,7 @@ - hyperia + hyperia
diff --git a/ui/site/apps/Jobs/JobsSidebar.js b/ui/site/apps/Jobs/JobsSidebar.js index 8176c10..0cc61df 100644 --- a/ui/site/apps/Jobs/JobsSidebar.js +++ b/ui/site/apps/Jobs/JobsSidebar.js @@ -3,14 +3,22 @@ class JobsSidebar extends Shadow { VStack(() => { h3("Location") .color("var(--accent2)") + .marginBottom(0, em) - + HStack(() => { + input("Location", "100%") + .paddingLeft(3, em) + .paddingVertical(0.75, em) + .backgroundImage("/_/icons/locationPin.svg") + .backgroundRepeat("no-repeat") + .backgroundSize("18px 18px") + .backgroundPosition("10px center") + }) }) .paddingTop(1, em) .paddingLeft(3, em) .paddingRight(3, em) .gap(1, em) - .borderRight("1px solid var(--accent2)") .borderTop("1px solid var(--accent2)") .minWidth(10, vw) } diff --git a/ui/site/apps/Market/MarketGrid.js b/ui/site/apps/Market/MarketGrid.js index 151bc0d..69326c8 100644 --- a/ui/site/apps/Market/MarketGrid.js +++ b/ui/site/apps/Market/MarketGrid.js @@ -26,6 +26,8 @@ class MarketGrid extends Shadow { if (this.listings.length > 0) { ZStack(() => { + // BuyModal() + for (let i = 0; i < this.listings.length; i++) { const rating = this.listings[i].stars const percent = (rating / 5) @@ -74,6 +76,11 @@ class MarketGrid extends Shadow { .marginBottom(0.5, em) button("Buy Now") + .onClick((finished) => { + if(finished) { + + } + }) }) .padding(1, em) diff --git a/ui/site/apps/Messages.js b/ui/site/apps/Messages/Messages.js similarity index 100% rename from ui/site/apps/Messages.js rename to ui/site/apps/Messages/Messages.js diff --git a/ui/site/components/AppWindow.js b/ui/site/components/AppWindow.js index 858475d..4f5b665 100644 --- a/ui/site/components/AppWindow.js +++ b/ui/site/components/AppWindow.js @@ -1,5 +1,5 @@ import "../apps/Jobs/Jobs.js" -import "../apps/Messages.js" +import "../apps/Messages/Messages.js" import "../apps/Market/Market.js" class AppWindow extends Shadow { diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 4005cbc..7ef81da 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -21,7 +21,7 @@ class Home extends Shadow { .width(100, vw) .height(100, vh) .margin("0px") - .backgroundImage("url('/_/images/the_return.webp')") + .backgroundImage("/_/images/the_return.webp") .backgroundSize("cover") .backgroundPosition("48% 65%") .backgroundRepeat("no-repeat")