mock shop page: search listings

This commit is contained in:
2026-02-05 11:02:29 -07:00
parent 02893511ba
commit 0924d0edb1
2 changed files with 94 additions and 65 deletions
-11
View File
@@ -268,9 +268,6 @@
.ml-\[1em\] { .ml-\[1em\] {
margin-left: 1em; margin-left: 1em;
} }
.box-border {
box-sizing: border-box;
}
.block { .block {
display: block; display: block;
} }
@@ -358,9 +355,6 @@
.list-none { .list-none {
list-style-type: none; list-style-type: none;
} }
.grid-cols-\[1fr_1fr\] {
grid-template-columns: 1fr 1fr;
}
.grid-cols-\[2fr_8fr_2fr\] { .grid-cols-\[2fr_8fr_2fr\] {
grid-template-columns: 2fr 8fr 2fr; grid-template-columns: 2fr 8fr 2fr;
} }
@@ -802,11 +796,6 @@
padding-block: calc(8vw - 0.5em); padding-block: calc(8vw - 0.5em);
} }
} }
.sm\:grid-cols-\[1fr_1fr\] {
@media (width >= 40rem) {
grid-template-columns: 1fr 1fr;
}
}
.md\:grid-cols-\[1fr_1fr\] { .md\:grid-cols-\[1fr_1fr\] {
@media (width >= 48rem) { @media (width >= 48rem) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -79,7 +79,7 @@
<h3 class="col-[span_2] text-center"> <h3 class="col-[span_2] text-center">
New Listing New Listing
</h3> </h3>
<label for="name"> <label for="name" class="self-center">
Name: Name:
</label> </label>
<input <input
@@ -90,7 +90,7 @@
placeholder="What's in a name..." placeholder="What's in a name..."
class="bg-accent p-[0.25em] rounded-sm" class="bg-accent p-[0.25em] rounded-sm"
/> />
<label for="sku"> <label for="sku" class="self-center">
SKU: SKU:
</label> </label>
<input <input
@@ -99,7 +99,7 @@
required required
class="bg-accent p-[0.25em] rounded-sm" class="bg-accent p-[0.25em] rounded-sm"
/> />
<label for="description"> <label for="description" class="self-center">
Description: Description:
</label> </label>
<input <input
@@ -160,7 +160,7 @@
<h3 class="col-[span_2] text-center"> <h3 class="col-[span_2] text-center">
Edit Listing Edit Listing
</h3> </h3>
<label for="name"> <label for="name" class="self-center">
Name: Name:
</label> </label>
<input <input
@@ -171,7 +171,7 @@
placeholder="What's in a name..." placeholder="What's in a name..."
class="bg-accent p-[0.25em] rounded-sm" class="bg-accent p-[0.25em] rounded-sm"
/> />
<label for="sku"> <label for="sku" class="self-center">
SKU: SKU:
</label> </label>
<input <input
@@ -180,7 +180,7 @@
required required
class="bg-accent p-[0.25em] rounded-sm" class="bg-accent p-[0.25em] rounded-sm"
/> />
<label for="description"> <label for="description" class="self-center">
Description: Description:
</label> </label>
<input <input
@@ -212,63 +212,103 @@
}} }}
</form> </form>
<ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]"> <div>
{{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }} <form
<li
id="listing-{{$listing.ListingID}}"
class=" class="
grid
grid-cols-[max-content_1fr]
gap-[0.5em]
mb-[1em]
p-[1em] p-[1em]
grid grid-cols-[max-content_1fr] gap-x-[1em]
bg-card bg-card
h-fit
rounded-lg rounded-lg
" "
_="
on click
send startEditingExistingListing(
listingID: '{{$listing.ListingID}}',
name: '{{$listing.Name}}',
sku: '{{$listing.SKU}}',
description: '{{$listing.Description}}'
) to #listings-container
send reset() to <li/> in the closest <ul/>
add .border-foreground to me
add .border to me
on reset
remove .border-foreground from me
remove .border from me
"
> >
<span> <label for="name" class="self-center">
Name: Find Listing
</span> </label>
<span> <input
{{ $listing.Name }} type="search"
</span> name="name"
class="bg-accent p-[0.25em] rounded-sm"
_="
on input
set term to event.target.value
if (not term)
remove .hidden from <li/> in next <ul/>
else
for li in (<li/> in the next <ul/>)
set name to the (innerHTML of the first .listing-name in li).trim()
if not name.includes(term)
add .hidden to li
else
remove .hidden from li
end
end
end
"
/>
</form>
<span> <ul class="max-h-[50em] overflow-y-auto flex flex-col gap-[1em]">
SKU: {{- range $listing := .Accounts.ListMockListingsForShop $acctID $platform $shopID }}
</span> <li
<span> id="listing-{{$listing.ListingID}}"
{{ $listing.SKU }} class="
</span> p-[1em]
grid grid-cols-[max-content_1fr] gap-x-[1em]
bg-card
rounded-lg
"
_="
on click
send startEditingExistingListing(
listingID: '{{$listing.ListingID}}',
name: '{{$listing.Name}}',
sku: '{{$listing.SKU}}',
description: '{{$listing.Description}}'
) to #listings-container
send reset() to <li/> in the closest <ul/>
add .border-foreground to me
add .border to me
<span> on reset
Description: remove .border-foreground from me
</span> remove .border from me
<span> "
{{ $listing.Description }} >
</span> <span>
Name:
</span>
<span class="listing-name">
{{ $listing.Name }}
</span>
<span> <span>
Count: SKU:
</span> </span>
<span> <span>
{{ $listing.Count }} {{ $listing.SKU }}
</span> </span>
</li>
{{- end }} <span>
</ul> Description:
</span>
<span>
{{ $listing.Description }}
</span>
<span>
Count:
</span>
<span>
{{ $listing.Count }}
</span>
</li>
{{- end }}
</ul>
</div>
</div> </div>
</section> </section>