mock shop page: search listings
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
+94
-54
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user