nostr/iris-messenger
1
0
Fork 0
mirror of https://github.com/irislib/iris-messenger.git synced 2024-09-20 01:56:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

better store item grid

Browse Source
This commit is contained in:
Martti Malmi 2020-12-09 15:21:10 +02:00
parent d8a883e7ff
commit 5e5ffdd0bc
2 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/style.css
View File

@ -1250,11 +1250,13 @@ form.public {
margin: 0 0 15px 0;
}
.store-items {
display: flex;
flex-wrap: wrap;
}
.store-item {
display: inline-flex;
flex-direction: column;
width: calc(33.33% - 8px);
height: calc(33.33% - 8px);
background-color: var(--chat-hover);
padding: 15px;
margin-right: 8px;

41
src/js/components/StoreView.js
View File

@ -99,27 +99,28 @@ class StoreView extends Component {
<button onClick=${() => route('/checkout/' + this.props.store)}>Shopping cart (${cartTotalItems})</button>
</p>
` : ''}
${this.isMyProfile ? html`
<div class="store-item" onClick=${() => route(`/product/new`)}>
<a href="/product/new" class="name">Add item</a>
</div>
` : ''}
${Object.keys(this.state.items).map(k => {
const i = this.state.items[k];
return html`
<div class="store-item" onClick=${() => route(`/product/${k}/${this.props.store}`)}>
<${SafeImg} src=${i.photo}/>
<a href="/product/${k}/${this.props.store}" class="name">${i.name}</a>
<p class="description">${i.description}</p>
<p class="price">${i.price}</p>
<button class="add" onClick=${e => this.addToCart(k, e)}>
Add to cart
${this.cart[k] ? ` (${this.cart[k]})` : ''}
</button>
<div class="store-items">
${this.isMyProfile ? html`
<div class="store-item" onClick=${() => route(`/product/new`)}>
<a href="/product/new" class="name">Add item</a>
</div>
`
})}
` : ''}
${Object.keys(this.state.items).map(k => {
const i = this.state.items[k];
return html`
<div class="store-item" onClick=${() => route(`/product/${k}/${this.props.store}`)}>
<${SafeImg} src=${i.photo}/>
<a href="/product/${k}/${this.props.store}" class="name">${i.name}</a>
<p class="description">${i.description}</p>
<p class="price">${i.price}</p>
<button class="add" onClick=${e => this.addToCart(k, e)}>
Add to cart
${this.cart[k] ? ` (${this.cart[k]})` : ''}
</button>
</div>
`
})}
</div>
</div>
</div>`;
}