diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs
index 6d2ed19..72e9e21 100644
--- a/client/public/components/compact-listing.mjs
+++ b/client/public/components/compact-listing.mjs
@@ -10,18 +10,53 @@ class CompactProductListing extends Component {
Render() {
return {
template: `
-
- {this.state.name}
- {this.state.desc}
- £{this.state.price}
+
+
+

+
+
+
{this.state.name}
+
+ ${this.state.discount
+ ? '
£{this.state.price}£{this.state.discount}'
+ : '
£{this.state.price}'}
+
+
+
`,
style: `
- compact-listing-component {
+ .product-listing {
display: flex;
- text-align: center;
- width: 200px;
flex-direction: column;
- margin: 10px;
+ margin: 7px;
+ max-width: 320px;
+ }
+ .product-listing-image {
+ display: block;
+ margin: 0 auto;
+ max-width: 320px;
+ }
+ .product-listing-info {
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+ max-width: 320px;
+ }
+ .product-listing-name {
+ font-size: 1.2em;
+ font-weight: bold;
+ }
+ .product-listing-price {
+ font-size: 1.1em;
+ }
+ .product-listing-price-full {
+ text-decoration: line-through;
+ font-size: 0.9em;
+ }
+ .product-listing-price-new {
+ font-weight: bold;
+ color: red;
+ font-size: 1.1em;
}
`,
};
diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs
index 6f4d460..0749b6b 100644
--- a/client/public/components/product-list.mjs
+++ b/client/public/components/product-list.mjs
@@ -17,18 +17,19 @@ class ProductList extends Component {
${products.data.map(product => {
return `
+ price="${product.price}"
+ discount="${product.discount || ''}">
`;
- })}
+ }).join('')}
`,
style: `
.product-list {
display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
margin: 0 auto;
- max-width: 800px;
}
`,
state: {
diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html
index b8079bd..b90b2a9 100644
--- a/client/public/components/templates/navbar.html
+++ b/client/public/components/templates/navbar.html
@@ -27,19 +27,19 @@