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 @@