benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product listings

Browse Source 
Former-commit-id: 34b006fc4f7bbfeb82d8c159e89aef7ef51f5ad3
This commit is contained in:
Benjamin Kyd
2022-03-25 23:07:14 +00:00
parent 07ae52839c
commit 9528913548
7 changed files with 101 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
client/public/components/compact-listing.mjs
View File

@@ -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;
}
`,
};

9
client/public/components/product-list.mjs
View File

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

26
client/public/components/templates/navbar.html
View File

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

9
client/public/global.css
View File

@@ -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; */
}
}

7
db/image/compressor.sh
View File

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

4
db/image/decompressor.sh
View File

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

47
src/routes/sets-router.js
View File

@@ -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',
},
],
}));