From fa77da303b16d3b85d2c62dc3b42e23a2ff1ece8 Mon Sep 17 00:00:00 2001 From: Benjamin Kyd Date: Fri, 25 Mar 2022 23:07:14 +0000 Subject: [PATCH] product listings Former-commit-id: 8d87475b4577694132df338d5183a5edde6dbf5c --- client/public/components/compact-listing.mjs | 51 ++++++++++++++++--- client/public/components/product-list.mjs | 9 ++-- .../public/components/templates/navbar.html | 26 +++++----- client/public/global.css | 9 +--- db/image/0.tar.gz | 3 -- db/image/1.tar.gz | 3 -- db/image/2.tar.gz | 3 -- db/image/3.tar.gz | 3 -- db/image/4.tar.gz | 3 -- db/image/5.tar.gz | 3 -- db/image/6.tar.gz | 3 -- db/image/7.tar.gz | 3 -- db/image/8.tar.gz | 3 -- db/image/9.tar.gz | 3 -- db/image/a.tar.gz | 3 -- db/image/b.tar.gz | 3 -- db/image/c.tar.gz | 3 -- db/image/compressor.sh | 7 --- db/image/d.tar.gz | 3 -- db/image/decompressor.sh | 4 -- db/image/e.tar.gz | 3 -- db/image/f.tar.gz | 3 -- src/routes/sets-router.js | 47 +++++++++++++---- 23 files changed, 101 insertions(+), 100 deletions(-) delete mode 100644 db/image/0.tar.gz delete mode 100644 db/image/1.tar.gz delete mode 100644 db/image/2.tar.gz delete mode 100644 db/image/3.tar.gz delete mode 100644 db/image/4.tar.gz delete mode 100644 db/image/5.tar.gz delete mode 100644 db/image/6.tar.gz delete mode 100644 db/image/7.tar.gz delete mode 100644 db/image/8.tar.gz delete mode 100644 db/image/9.tar.gz delete mode 100644 db/image/a.tar.gz delete mode 100644 db/image/b.tar.gz delete mode 100644 db/image/c.tar.gz delete mode 100644 db/image/compressor.sh delete mode 100644 db/image/d.tar.gz delete mode 100644 db/image/decompressor.sh delete mode 100644 db/image/e.tar.gz delete mode 100644 db/image/f.tar.gz 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 @@
  • My Account - - diff --git a/client/public/global.css b/client/public/global.css index 43db084..cefb4e0 100644 --- a/client/public/global.css +++ b/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; */ } } diff --git a/db/image/0.tar.gz b/db/image/0.tar.gz deleted file mode 100644 index 95a84a5..0000000 --- a/db/image/0.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6fb20220571d719c21b348a4fb2697bb25f1d3629e317b93bb12e0d8c29df67e -size 969172739 diff --git a/db/image/1.tar.gz b/db/image/1.tar.gz deleted file mode 100644 index af4bd43..0000000 --- a/db/image/1.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:39cce49c2b08db10690e6dbdd5c90d7bd732392645225af3ff01967912592b5b -size 978392963 diff --git a/db/image/2.tar.gz b/db/image/2.tar.gz deleted file mode 100644 index 6ee7b63..0000000 --- a/db/image/2.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:eb76405cb8d491ff883ad57cca2c91bd31d575bac4c7dc2e2629275ed36c253f -size 1019840244 diff --git a/db/image/3.tar.gz b/db/image/3.tar.gz deleted file mode 100644 index 26bf996..0000000 --- a/db/image/3.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4c44991b1d3d5755c7c98428021ccf657c30337424d877ec487371785379e010 -size 998324354 diff --git a/db/image/4.tar.gz b/db/image/4.tar.gz deleted file mode 100644 index e8c21d2..0000000 --- a/db/image/4.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e2736b022f6b63358f396024799a0642e80762ccd7b75d0382fa92989eacb165 -size 971438151 diff --git a/db/image/5.tar.gz b/db/image/5.tar.gz deleted file mode 100644 index 6bd21ed..0000000 --- a/db/image/5.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:44132b34229096d5a393179527af4d673684bf51ce9a69ee8115053bed670159 -size 1018434330 diff --git a/db/image/6.tar.gz b/db/image/6.tar.gz deleted file mode 100644 index 75d8b1b..0000000 --- a/db/image/6.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e1cca83ab09f639000c034e93f431b9f5564391f7348b7c86be6692c7e0db919 -size 1007458122 diff --git a/db/image/7.tar.gz b/db/image/7.tar.gz deleted file mode 100644 index e873ade..0000000 --- a/db/image/7.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8307204d755d62ff4740eccdea82cd7174beffb8bd8f6ec847798a7ae5eec081 -size 983908427 diff --git a/db/image/8.tar.gz b/db/image/8.tar.gz deleted file mode 100644 index 59015e5..0000000 --- a/db/image/8.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:60e8db8df71be316e8c595fa71681c6c831ef545b038ef375a627cff8ef5a361 -size 986151083 diff --git a/db/image/9.tar.gz b/db/image/9.tar.gz deleted file mode 100644 index 7ecb010..0000000 --- a/db/image/9.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b4ffbb714f2f07e17aa64323a33000efaf7748c2aab31bda545c7546c824c6b5 -size 1002302585 diff --git a/db/image/a.tar.gz b/db/image/a.tar.gz deleted file mode 100644 index 7cc527b..0000000 --- a/db/image/a.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:15af4d1d35fd8ed60764ed068e3be1293619244e80eea4e672203140ba4a1301 -size 979253154 diff --git a/db/image/b.tar.gz b/db/image/b.tar.gz deleted file mode 100644 index be162b5..0000000 --- a/db/image/b.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:868d32ba5b8a8f11f35c27d8f8d1707293674f18830922058d50d325ae9c4004 -size 1009976899 diff --git a/db/image/c.tar.gz b/db/image/c.tar.gz deleted file mode 100644 index d1110a0..0000000 --- a/db/image/c.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:90f96f74d081679b5279862299a6910a11cbc791d371e95b56c8b56a16e4efb2 -size 974228333 diff --git a/db/image/compressor.sh b/db/image/compressor.sh deleted file mode 100644 index af50ded..0000000 --- a/db/image/compressor.sh +++ /dev/null @@ -1,7 +0,0 @@ - -for f in *; do - if [ -d "$f" ]; then - echo $f - tar -czvf $f.tar.gz "$f"/ - fi -done diff --git a/db/image/d.tar.gz b/db/image/d.tar.gz deleted file mode 100644 index a3eb41e..0000000 --- a/db/image/d.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:289c78c17f34ecfbfe7aaac3f9756806ae54f4c957018882b2e638d6f5c2b8e5 -size 1020586118 diff --git a/db/image/decompressor.sh b/db/image/decompressor.sh deleted file mode 100644 index a2d2808..0000000 --- a/db/image/decompressor.sh +++ /dev/null @@ -1,4 +0,0 @@ - -for d in *.tar.gz ; do - tar -xvzf "$d".tar.gz -C some_custom_folder_name -done diff --git a/db/image/e.tar.gz b/db/image/e.tar.gz deleted file mode 100644 index 2d1a1c8..0000000 --- a/db/image/e.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1fa91e64c837584894fbdbd6b94b65d672aa4538aea6ee85748e35be30b1403 -size 1008906926 diff --git a/db/image/f.tar.gz b/db/image/f.tar.gz deleted file mode 100644 index 08ea185..0000000 --- a/db/image/f.tar.gz +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:dfba2d65311ee7b407b69419c837c45f70f0cede955a824bb5722e3f61c04aa3 -size 998828122 diff --git a/src/routes/sets-router.js b/src/routes/sets-router.js index 16d564d..396d720 100644 --- a/src/routes/sets-router.js +++ b/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', }, ], }));