stubbed mock shop creation forms

This commit is contained in:
2026-01-29 20:49:28 -07:00
parent 12ba219ef9
commit 2eaa0fcf3a
30 changed files with 360 additions and 23 deletions
+168
View File
@@ -215,6 +215,9 @@
max-width: 96rem;
}
}
.m-\[0\.5em\] {
margin: 0.5em;
}
.m-\[1em\] {
margin: 1em;
}
@@ -266,6 +269,9 @@
.mb-\[3em\] {
margin-bottom: 3em;
}
.ml-\[1em\] {
margin-left: 1em;
}
.block {
display: block;
}
@@ -335,6 +341,9 @@
.flex-shrink {
flex-shrink: 1;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
@@ -374,12 +383,45 @@
.list-none {
list-style-type: none;
}
.grid-cols-\[1fr_1fr_1fr\] {
grid-template-columns: 1fr 1fr 1fr;
}
.grid-cols-\[1fr_2fr_1fr\] {
grid-template-columns: 1fr 2fr 1fr;
}
.grid-cols-\[1fr_10fr_1fr\] {
grid-template-columns: 1fr 10fr 1fr;
}
.grid-cols-\[1fr_max-content-1fr\] {
grid-template-columns: 1fr max-content-1fr;
}
.grid-cols-\[1fr_max-content\] {
grid-template-columns: 1fr max-content;
}
.grid-cols-\[1fr_max-content_1fr\] {
grid-template-columns: 1fr max-content 1fr;
}
.grid-cols-\[1fr_max-content_calc\(1fr\+1px\)\] {
grid-template-columns: 1fr max-content calc(1fr + 1px);
}
.grid-cols-\[2fr_8fr_2fr\] {
grid-template-columns: 2fr 8fr 2fr;
}
.grid-cols-\[6rem_10fr_6rem\] {
grid-template-columns: 6rem 10fr 6rem;
}
.grid-cols-\[calc\(1fr\+1px\)_max-content_calc\(1fr\+1px\)\] {
grid-template-columns: calc(1fr + 1px) max-content calc(1fr + 1px);
}
.grid-cols-\[max-content_max-content\] {
grid-template-columns: max-content max-content;
}
.flex-col {
flex-direction: column;
}
.content-center {
align-content: center;
}
.items-center {
align-items: center;
}
@@ -392,6 +434,15 @@
.justify-start {
justify-content: flex-start;
}
.gap-\[0\.5em\] {
gap: 0.5em;
}
.gap-\[0\.25em\] {
gap: 0.25em;
}
.gap-\[1e\] {
gap: 1e;
}
.gap-\[1em\] {
gap: 1em;
}
@@ -422,6 +473,10 @@
.rounded-sm {
border-radius: calc(var(--radius) - 4px);
}
.border-\[1em\] {
border-style: var(--tw-border-style);
border-width: 1em;
}
.border-\[1px\] {
border-style: var(--tw-border-style);
border-width: 1px;
@@ -438,6 +493,22 @@
--tw-border-style: dotted;
border-style: dotted;
}
.border-solid {
--tw-border-style: solid;
border-style: solid;
}
.border-accent {
border-color: var(--accent);
}
.border-card {
border-color: var(--card);
}
.border-card-foreground {
border-color: var(--card-foreground);
}
.border-input {
border-color: var(--input);
}
.border-sidebar-border {
border-color: var(--sidebar-border);
}
@@ -456,6 +527,21 @@
.bg-card {
background-color: var(--card);
}
.bg-foreground {
background-color: var(--foreground);
}
.bg-input {
background-color: var(--input);
}
.bg-muted {
background-color: var(--muted);
}
.bg-primary {
background-color: var(--primary);
}
.bg-secondary {
background-color: var(--secondary);
}
.p-\[0\.5em\] {
padding: 0.5em;
}
@@ -832,6 +918,12 @@
float: right;
}
}
.after\:ml-\[1em\] {
&::after {
content: var(--tw-content);
margin-left: 1em;
}
}
.after\:text-\[1em\] {
&::after {
content: var(--tw-content);
@@ -857,6 +949,13 @@
line-height: 1em;
}
}
.after\:leading-\[2em\] {
&::after {
content: var(--tw-content);
--tw-leading: 2em;
line-height: 2em;
}
}
.after\:font-\[2em\] {
&::after {
content: var(--tw-content);
@@ -956,6 +1055,35 @@
}
}
}
.group-open\/create-mock-shop\:after\:content-\[\'-\'\] {
&:is(:where(.group\/create-mock-shop):is([open], :popover-open, :open) *) {
&::after {
--tw-content: '-';
content: var(--tw-content);
}
}
}
.group-open\/create-mock-store\:after\:content-\[\'-\'\] {
&:is(:where(.group\/create-mock-store):is([open], :popover-open, :open) *) {
&::after {
--tw-content: '-';
content: var(--tw-content);
}
}
}
.group-open\/link-shops\:after\:content-\[\'-\'\] {
&:is(:where(.group\/link-shops):is([open], :popover-open, :open) *) {
&::after {
--tw-content: '-';
content: var(--tw-content);
}
}
}
.open\:mb-\[2em\] {
&:is([open], :popover-open, :open) {
margin-bottom: 2em;
}
}
.open\:grid {
&:is([open], :popover-open, :open) {
display: grid;
@@ -1023,6 +1151,14 @@
}
}
}
.open\:details-content\:border-t-\[0\.2rem\] {
&:is([open], :popover-open, :open) {
&::details-content {
border-top-style: var(--tw-border-style);
border-top-width: 0.2rem;
}
}
}
.open\:details-content\:border-t-\[0\.25rem\] {
&:is([open], :popover-open, :open) {
&::details-content {
@@ -1031,6 +1167,30 @@
}
}
}
.open\:details-content\:border-t-\[0\.125rem\] {
&:is([open], :popover-open, :open) {
&::details-content {
border-top-style: var(--tw-border-style);
border-top-width: 0.125rem;
}
}
}
.open\:details-content\:border-t-\[0\.175rem\] {
&:is([open], :popover-open, :open) {
&::details-content {
border-top-style: var(--tw-border-style);
border-top-width: 0.175rem;
}
}
}
.open\:details-content\:border-t-\[0\.225rem\] {
&:is([open], :popover-open, :open) {
&::details-content {
border-top-style: var(--tw-border-style);
border-top-width: 0.225rem;
}
}
}
.open\:details-content\:border-r-0 {
&:is([open], :popover-open, :open) {
&::details-content {
@@ -1137,6 +1297,14 @@
}
}
}
.open\:after\:content-\[\'-\'\] {
&:is([open], :popover-open, :open) {
&::after {
--tw-content: '-';
content: var(--tw-content);
}
}
}
.hover\:scale-110 {
&:hover {
@media (hover: hover) {
@@ -1 +0,0 @@
<em>Coming soon!</em>
@@ -1 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1 +0,0 @@
<em>Coming soon!</em>
@@ -0,0 +1,12 @@
amazon.html.tmpl
big_cartel.html.tmpl
ebay.html.tmpl
ecwid.html.tmpl
shopify.html.tmpl
square_online.html.tmpl
squarespace.html.tmpl
tiktok.html.tmpl
walmart_marketplace.html.tmpl
wix.html.tmpl
woo_commerce.html.tmpl
zoho.html.tmpl
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -1,2 +0,0 @@
<em>Coming soon!</em>
@@ -0,0 +1,164 @@
{{- $acctID := .PathParams.acctID }}
{{- $platform := .PathParams.platform }}
<details
open
class="
flex flex-col items-center
open:mb-[2em]
group/create-mock-shop
details-content:opacity-[0]
open:details-content:opacity-[1]
details-content:transform-[translate(0px,-2em)]
open:details-content:transform-[translate(0px,0px)]
details-content:border-transparent
open:details-content:border-dotted
open:details-content:border-x-[0px]
open:details-content:border-x-transparent
open:details-content:border-b-[0px]
open:details-content:border-b-transparent
open:details-content:border-t-background
open:details-content:border-t-[0.225rem]
details-content:outline-transparent
details-content:transition-[opacity_transform]
"
>
<summary
class="
flex-grow
p-[0.5em]
grid
grid-cols-[2fr_8fr_2fr]
gap-[1em]
list-none
after:content-['+']
group-open/create-mock-shop:after:content-['-']
after:font-bold
after:text-[2em]
after:leading-[1em]
cursor-pointer
"
>
<h4 class="inline-block col-2 content-center">
Mock Shops
</h4>
</summary>
<form class="px-[2em] py-[0.5em]">
<div
class="
grid grid-cols-[max-content_max-content]
gap-[0.25em]
p-[0.5em]
"
>
<label>
Name:
</label>
<input
type="text"
name="name"
class="
ml-[1em]
bg-card
border-input border-[1px] rounded
"
/>
<!--label>
TODO:
</label>
<input
type="text"
name="name"
class="
ml-[1em]
bg-card
border-input border-[1px] rounded
"
/-->
</div>
{{/* TODO: make a css button class for this */}}
<button class="
border-thin
bg-card
rounded-sm
p-[0.5em]
font-semibold
cursor-pointer
hover:underline
hover:bg-accent
disabled:bg-accent-secondary
disabled:cursor-not-allowed
disabled:no-underline
{{/*mt-[1em] mb-[1em]*/}}
">
Create
</button>
</form>
</details>
<details
open
class="
flex flex-col items-center
group/link-shops
details-content:opacity-[0]
open:details-content:opacity-[1]
details-content:transform-[translate(0px,-2em)]
open:details-content:transform-[translate(0px,0px)]
details-content:border-transparent
open:details-content:border-dotted
open:details-content:border-x-[0px]
open:details-content:border-x-transparent
open:details-content:border-b-[0px]
open:details-content:border-b-transparent
open:details-content:border-t-background
open:details-content:border-t-[0.225rem]
details-content:outline-transparent
details-content:transition-[opacity_transform]
"
>
<summary
class="
flex-grow
p-[0.5em]
grid
grid-cols-[2fr_8fr_2fr]
gap-[1em]
list-none
after:content-['+']
group-open/link-shops:after:content-['-']
after:font-bold
after:text-[2em]
after:leading-[1em]
cursor-pointer
"
>
<h4 class="inline-block col-2 content-center">
Link Shops
</h4>
</summary>
{{ component ( printf "/accounts/%d/shops/link-sections/%s/links/%s" $acctID $platform $platform ) }}
</details>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -4,10 +4,10 @@
{{- if $etsyUser }}
<h3>Etsy User: {{ $etsyUser.UserID }}; Shop ID: {{ $etsyUser.ShopID }}</h3>
{{- else }}
<h3>
<h3 class="m-[0.5em] px-[2em] italic">
{{/* TODO: create this link dynamically, not EVERYTIME THE PAGE IS LOADED */}}
<a href="{{ printf "/webhooks/etsy/%d/new-account-link" $acctID.AccountID }}">
Link Your Etsy Store!
Link Your Store!
</a>
</h3>
{{- end }}
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -0,0 +1 @@
<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>
@@ -51,6 +51,7 @@
class="
group
{{/* TODO: make custom class for all this */}}
details-content:opacity-[0]
open:details-content:opacity-[1]
@@ -58,7 +58,7 @@
border-sidebar-border
"
>
<details class="flex flex-col items-stretch">
<details class="flex flex-col items-stretch" open>
<summary class="list-none cursor-pointer self-center">
{{-
component "tutorial-tooltip"