product listings

Former-commit-id: 8d87475b4577694132df338d5183a5edde6dbf5c

client/public/components/compact-listing.mjs

@@ -10,18 +10,53 @@ class CompactProductListing extends Component {
     Render() {
         return {
             template: `
-                <img src="{this.state.image}"></img>
-                {this.state.name} <p>
-                {this.state.desc} <p>
-                £{this.state.price}
+                <div class="product-listing">
+                    <div class="product-listing-image">
+                        <img src="{this.state.image}">
+                    </div>
+                    <div class="product-listing-info">
+                        <div class="product-listing-name">{this.state.name}</div>
+
+                        ${this.state.discount
+                            ? '<span class="product-listing-price-full">£{this.state.price}</span><span class="product-listing-price-new">£{this.state.discount}</span>'
+                             : '<span class="product-listing-price">£{this.state.price}</span>'}
+
+                    </div>
+                </div>
             `,
             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;
                 }
             `,
         };

client/public/components/product-list.mjs

@@ -17,18 +17,19 @@ class ProductList extends Component {
                 <div class="product-list">
                     ${products.data.map(product => {
                         return `<compact-listing-component name="${product.name}"
-                                    desc="${product.description}"
                                     image="${product.image}"
-                                    price="${product.price}"></compact-listing-component>
+                                    price="${product.price}"
+                                    discount="${product.discount || ''}"></compact-listing-component>
                         `;
-                    })}
+                    }).join('')}
                 </div>
             `,
             style: `
                 .product-list {
                     display: flex;
+                    justify-content: space-evenly;
+                    flex-wrap: wrap;
                     margin: 0 auto;
-                    max-width: 800px;
                 }
             `,
             state: {

client/public/components/templates/navbar.html

@@ -27,19 +27,19 @@
                 </ul>
             </li>
             <li class="menu-item"><a class="nav-link" href="#">My Account</a>
-        </ul>
-        <ul class="secondary-menu menu push-down">
-            
-            <span class="search-wrapper">
-                <input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
-            </span>
-
-            <img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="27px" stroke="#222" stroke-width="2px" alt="">
-            
-            <span id="cart-wrapper">
-                <img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="30px" stroke="#222" stroke-width="2px" alt="">
-                <span id="cart-number" class="menu-item">5</span>
-            </span>
+                <ul class="primary-menu secondary-menu menu push-down">
+                    
+                    <span class="search-wrapper">
+                        <input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
+                    </span>
+        
+                    <img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="27px" stroke="#222" stroke-width="2px" alt="">
+                    
+                    <span id="cart-wrapper">
+                        <img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="30px" stroke="#222" stroke-width="2px" alt="">
+                        <span id="cart-number" class="menu-item">5</span>
+                    </span>
+                </ul>
         </ul>
     </div>
 

client/public/global.css

@@ -37,13 +37,8 @@ content-margin {
 @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     limited-margin {
         width: 90%;
-        padding-left: 1em;
-        padding-right: 1em;
-    }
-    content-margin {
-        width: 90%;
-        padding-left: 2em;
-        padding-right: 2em;
+        /* padding-left: 1em;
+        padding-right: 1em; */
     }
 }
 

db/image/0.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:6fb20220571d719c21b348a4fb2697bb25f1d3629e317b93bb12e0d8c29df67e
-size 969172739

db/image/1.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:39cce49c2b08db10690e6dbdd5c90d7bd732392645225af3ff01967912592b5b
-size 978392963

db/image/2.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:eb76405cb8d491ff883ad57cca2c91bd31d575bac4c7dc2e2629275ed36c253f
-size 1019840244

db/image/3.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:4c44991b1d3d5755c7c98428021ccf657c30337424d877ec487371785379e010
-size 998324354

db/image/4.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e2736b022f6b63358f396024799a0642e80762ccd7b75d0382fa92989eacb165
-size 971438151

db/image/5.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:44132b34229096d5a393179527af4d673684bf51ce9a69ee8115053bed670159
-size 1018434330

db/image/6.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e1cca83ab09f639000c034e93f431b9f5564391f7348b7c86be6692c7e0db919
-size 1007458122

db/image/7.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:8307204d755d62ff4740eccdea82cd7174beffb8bd8f6ec847798a7ae5eec081
-size 983908427

db/image/8.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:60e8db8df71be316e8c595fa71681c6c831ef545b038ef375a627cff8ef5a361
-size 986151083

db/image/9.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:b4ffbb714f2f07e17aa64323a33000efaf7748c2aab31bda545c7546c824c6b5
-size 1002302585

db/image/a.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:15af4d1d35fd8ed60764ed068e3be1293619244e80eea4e672203140ba4a1301
-size 979253154

db/image/b.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:868d32ba5b8a8f11f35c27d8f8d1707293674f18830922058d50d325ae9c4004
-size 1009976899

db/image/c.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:90f96f74d081679b5279862299a6910a11cbc791d371e95b56c8b56a16e4efb2
-size 974228333

db/image/compressor.sh

@@ -1,7 +0,0 @@
-
-for f in *; do
-    if [ -d "$f" ]; then
-        echo $f
-        tar -czvf $f.tar.gz "$f"/
-    fi
-done

db/image/d.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:289c78c17f34ecfbfe7aaac3f9756806ae54f4c957018882b2e638d6f5c2b8e5
-size 1020586118

db/image/decompressor.sh

@@ -1,4 +0,0 @@
-
-for d in *.tar.gz ; do
-    tar -xvzf "$d".tar.gz -C some_custom_folder_name
-done

db/image/e.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c1fa91e64c837584894fbdbd6b94b65d672aa4538aea6ee85748e35be30b1403
-size 1008906926

db/image/f.tar.gz

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:dfba2d65311ee7b407b69419c837c45f70f0cede955a824bb5722e3f61c04aa3
-size 998828122

src/routes/sets-router.js

@@ -7,24 +7,53 @@ function Featured(req, res, next) {
         data: [
             {
                 id: '1',
-                name: 'Brick 1',
-                description: 'Brick 1 description',
+                name: 'Tail 4 x 1 x 3',
                 price: '1.00',
-                image: 'https://via.placeholder.com/300x300',
+                discount: '0.50',
+                image: 'https://via.placeholder.com/320x320',
             },
             {
                 id: '2',
-                name: 'Brick 2',
-                description: 'Brick 2 description',
+                name: 'Mini Doll Hips and Skirt Full Length with Stars Pattern (Ariel)',
                 price: '2.00',
-                image: 'https://via.placeholder.com/300x300',
+                image: 'https://via.placeholder.com/320x320',
             },
             {
                 id: '3',
-                name: 'Brick 3',
-                description: 'Brick 3 description',
+                name: 'Minecraft Polar Bear Baby - Brick Built',
                 price: '3.00',
-                image: 'https://via.placeholder.com/300x300',
+                discount: '0.50',
+                image: 'https://via.placeholder.com/320x320',
+            },
+            {
+                id: '3',
+                name: 'Cardboard Sleeve 46931 with Contents',
+                price: '3.00',
+                image: 'https://via.placeholder.com/320x320',
+            },
+            {
+                id: '3',
+                name: 'Arch 1 x 2 Inverted',
+                price: '3.00',
+                image: 'https://via.placeholder.com/320x320',
+            },
+            {
+                id: '3',
+                name: 'Minifigure, Weapon Bazooka, Mini Blaster / Shooter',
+                price: '3.00',
+                image: 'https://via.placeholder.com/320x320',
+            },
+            {
+                id: '3',
+                name: 'Minifigure, Weapon Bazooka, Mini Blaster / Shooter',
+                price: '3.00',
+                image: 'https://via.placeholder.com/320x320',
+            },
+            {
+                id: '3',
+                name: 'Minifigure, Weapon Bazooka, Mini Blaster / Shooter',
+                price: '3.00',
+                image: 'https://via.placeholder.com/320x320',
             },
         ],
     }));