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

Adding location pin, location input

Browse Source
This commit is contained in:
metacryst
2025-11-11 14:19:56 -06:00
parent fa67271ae8
commit 02648859a8
9 changed files with 80 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/_/code/quill.js
View File

@@ -313,6 +313,22 @@ HTMLElement.prototype.padding = function(one, two, three = "px") {
return this 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") { HTMLElement.prototype.margin = function(direction, value, unit = "px") {
if (!value) { if (!value) {
this.style.margin = direction; this.style.margin = direction;
@@ -503,6 +519,20 @@ HTMLElement.prototype.gap = function(value, unit = "px") {
return this 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 */ /* Elements */
quill.setChildren = function(el, innerContent) { quill.setChildren = function(el, innerContent) {

17
ui/_/code/shared.css
View File

@@ -1,6 +1,6 @@
:root { :root {
--main: #FFDFB4; --main: #FFDFB4;
--accent: black; --accent: var(--darkbrown);
--tan: #FFDFB4; --tan: #FFDFB4;
--purple: #251D44; --purple: #251D44;
@@ -11,7 +11,7 @@
--orange: #FE9201; --orange: #FE9201;
--periwinkle: #655BAF; --periwinkle: #655BAF;
--accent2: var(--green); --accent2: var(--brown);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -84,3 +84,16 @@ button {
padding: 1em; padding: 1em;
box-shadow: none; 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);
}

13
ui/_/icons/locationPin.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 466.583 466.582"
xml:space="preserve">
<g>
<path d="M233.292,0c-85.1,0-154.334,69.234-154.334,154.333c0,34.275,21.887,90.155,66.908,170.834
c31.846,57.063,63.168,104.643,64.484,106.64l22.942,34.775l22.941-34.774c1.317-1.998,32.641-49.577,64.483-106.64
c45.023-80.68,66.908-136.559,66.908-170.834C387.625,69.234,318.391,0,233.292,0z M233.292,233.291c-44.182,0-80-35.817-80-80
s35.818-80,80-80c44.182,0,80,35.817,80,80S277.473,233.291,233.292,233.291z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 878 B

5
ui/public/index.html
View File

@@ -12,7 +12,8 @@
} }
.main-image { .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) { @media (max-width: 600px) {
.main-image { .main-image {
@@ -44,7 +45,7 @@
</script> </script>
</head> </head>
<body> <body>
<span id="title" class="link" onclick='window.location.href="/"'>hyperia <span id="title" class="link" onclick='window.location.href="/"' style="user-select: none;">hyperia
</span> </span>
<img class="main-image"> <img class="main-image">
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"> <div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">

12
ui/site/apps/Jobs/JobsSidebar.js
View File

@@ -3,14 +3,22 @@ class JobsSidebar extends Shadow {
VStack(() => { VStack(() => {
h3("Location") h3("Location")
.color("var(--accent2)") .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) .paddingTop(1, em)
.paddingLeft(3, em) .paddingLeft(3, em)
.paddingRight(3, em) .paddingRight(3, em)
.gap(1, em) .gap(1, em)
.borderRight("1px solid var(--accent2)")
.borderTop("1px solid var(--accent2)") .borderTop("1px solid var(--accent2)")
.minWidth(10, vw) .minWidth(10, vw)
} }

7
ui/site/apps/Market/MarketGrid.js
View File

@@ -26,6 +26,8 @@ class MarketGrid extends Shadow {
if (this.listings.length > 0) { if (this.listings.length > 0) {
ZStack(() => { ZStack(() => {
// BuyModal()
for (let i = 0; i < this.listings.length; i++) { for (let i = 0; i < this.listings.length; i++) {
const rating = this.listings[i].stars const rating = this.listings[i].stars
const percent = (rating / 5) const percent = (rating / 5)
@@ -74,6 +76,11 @@ class MarketGrid extends Shadow {
.marginBottom(0.5, em) .marginBottom(0.5, em)
button("Buy Now") button("Buy Now")
.onClick((finished) => {
if(finished) {
}
})
}) })
.padding(1, em) .padding(1, em)

0
ui/site/apps/Messages.js → ui/site/apps/Messages/Messages.js
View File

2
ui/site/components/AppWindow.js
View File

@@ -1,5 +1,5 @@
import "../apps/Jobs/Jobs.js" import "../apps/Jobs/Jobs.js"
import "../apps/Messages.js" import "../apps/Messages/Messages.js"
import "../apps/Market/Market.js" import "../apps/Market/Market.js"
class AppWindow extends Shadow { class AppWindow extends Shadow {

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

@@ -21,7 +21,7 @@ class Home extends Shadow {
.width(100, vw) .width(100, vw)
.height(100, vh) .height(100, vh)
.margin("0px") .margin("0px")
.backgroundImage("url('/_/images/the_return.webp')") .backgroundImage("/_/images/the_return.webp")
.backgroundSize("cover") .backgroundSize("cover")
.backgroundPosition("48% 65%") .backgroundPosition("48% 65%")
.backgroundRepeat("no-repeat") .backgroundRepeat("no-repeat")