{this.state.name} {this.state.id}
+ ${this.state.tags
+ ? this.state.tags.map(tag => `
-
-
diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs
index 0f16b2f..32c7e2b 100644
--- a/client/public/components/storefront.mjs
+++ b/client/public/components/storefront.mjs
@@ -19,10 +19,10 @@ class StoreFront extends Component {
+
+
`;
}
@@ -55,6 +58,7 @@ class ProductList extends Component {
listing="${product.listing}"
price="${product.price}"
type="${product.type}"
+ tags="${JSON.stringify(product.tags).replace(/"/g, '"')}"
discount="${product.discount || ''}">
`;
}).join('')}
@@ -86,66 +90,49 @@ class ProductList extends Component {
border: none;
}
- .product-list-loader {
+ .product-list-loader-container-container {
display: flex;
justify-content: center;
}
- .lds-ellipsis {
- display: inline-block;
- position: relative;
- width: 80px;
- height: 80px;
- z-index: 0;
+ @keyframes grow-shrink {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.4);
+ }
+ 100% {
+ transform: scale(1);
+ }
}
- .lds-ellipsis div {
- position: absolute;
- top: 33px;
- width: 13px;
- height: 13px;
+
+ @keyframes shrink-grow {
+ 0% {
+ transform: scale(1.4);
+ }
+ 50% {
+ transform: scale(0.9);
+ }
+ 100% {
+ transform: scale(1.4);
+ }
+ }
+
+ .product-list-loader-container {
+ display: flex;
+ justify-content: center;
+ width: 100px;
border-radius: 50%;
- background: #7F5CFF;
- animation-timing-function: cubic-bezier(0, 1, 1, 0);
+ background-color: #D7C2FF;
+ /* grow and shrink sine wave */
+ animation-timing-function: ease-in-out;
+ animation: grow-shrink 1s infinite;
}
- .lds-ellipsis div:nth-child(1) {
- left: 8px;
- animation: lds-ellipsis1 0.6s infinite;
- }
- .lds-ellipsis div:nth-child(2) {
- left: 8px;
- animation: lds-ellipsis2 0.6s infinite;
- }
- .lds-ellipsis div:nth-child(3) {
- left: 32px;
- animation: lds-ellipsis2 0.6s infinite;
- }
- .lds-ellipsis div:nth-child(4) {
- left: 56px;
- animation: lds-ellipsis3 0.6s infinite;
- }
- @keyframes lds-ellipsis1 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
- }
- @keyframes lds-ellipsis3 {
- 0% {
- transform: scale(1);
- }
- 100% {
- transform: scale(0);
- }
- }
- @keyframes lds-ellipsis2 {
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(24px, 0);
- }
+
+ .product-list-loader {
+ animation-timing-function: ease-in-out;
+ animation: shrink-grow 1s infinite;
}
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
diff --git a/client/public/components/search.mjs b/client/public/components/search.mjs
index 7ea3839..c885dc5 100644
--- a/client/public/components/search.mjs
+++ b/client/public/components/search.mjs
@@ -103,7 +103,7 @@ class Search extends Component {
const res = /* html */`
+
+ 
+
+
+ 
+ 