shop: group cards
Closes #30 Co-authored-by: Egor Savkin <es@m-labs.hk> Co-committed-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
parent
d9ba17ad3a
commit
53a6d3f378
@ -12,6 +12,42 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
#accordion_categories,
|
||||
#accordion_categories .card {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
#accordion_categories .card:not(:first-child) {
|
||||
border-top: thin rgba(255,255, 255, 20%) solid ;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#accordion_categories .card-header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#accordion_categories button {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.75rem;
|
||||
padding: .75rem 2rem;
|
||||
}
|
||||
|
||||
#accordion_categories .card .card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#accordion_categories .card-header:hover {
|
||||
background-color: #1f4f68;
|
||||
transition: 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#accordion_categories button:focus,
|
||||
#accordion_categories button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
##Device = Tablets, Ipads (portrait)
|
||||
##Screen = B/w 768px to 1024px
|
||||
@ -110,6 +146,11 @@
|
||||
#root-shop .panel .summary>.summary-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accordion_categories button {
|
||||
font-size: 1.5rem;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
}
|
||||
/*
|
||||
##Device = Tablets, Ipads (landscape)
|
||||
@ -178,6 +219,11 @@
|
||||
#root-shop .panel .summary>.summary-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accordion_categories button {
|
||||
font-size: 1.5rem;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
}
|
||||
/*
|
||||
##Device = Low Resolution Tablets, Mobiles (Landscape)
|
||||
@ -379,6 +425,11 @@
|
||||
#root-shop .panel .summary>.summary-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accordion_categories button {
|
||||
font-size: 1rem;
|
||||
padding: .5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
/*
|
||||
##Device = Most of the Smartphones Mobiles (Portrait)
|
||||
@ -576,4 +627,9 @@
|
||||
#root-shop .panel .summary>.summary-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#accordion_categories button {
|
||||
font-size: 1rem;
|
||||
padding: .5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
@ -74,15 +74,13 @@ const copy = (
|
||||
model,
|
||||
source,
|
||||
destination,
|
||||
droppableSource,
|
||||
draggableSource,
|
||||
droppableDestination
|
||||
) => {
|
||||
const sourceClone = Array.from(source.itemIds);
|
||||
const destClone = Array.from(destination.items);
|
||||
const item = sourceClone[droppableSource.index];
|
||||
|
||||
destClone.splice(droppableDestination.index, 0, {
|
||||
...model[item],
|
||||
...model[draggableSource],
|
||||
id: uuidv4(),
|
||||
});
|
||||
|
||||
@ -408,7 +406,6 @@ class ProductItem extends React.PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
id: PropTypes.string.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
name_codename: PropTypes.string,
|
||||
price: PropTypes.number.isRequired,
|
||||
@ -426,9 +423,9 @@ class ProductItem extends React.PureComponent {
|
||||
this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
|
||||
}
|
||||
|
||||
handleOnClickAddItem(index, tap, e) {
|
||||
handleOnClickAddItem(id, tap, e) {
|
||||
if (this.props.onClickAddItem) {
|
||||
this.props.onClickAddItem(index, tap);
|
||||
this.props.onClickAddItem(id, tap);
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
@ -436,7 +433,6 @@ class ProductItem extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
index,
|
||||
name,
|
||||
name_codename,
|
||||
price,
|
||||
@ -482,11 +478,11 @@ class ProductItem extends React.PureComponent {
|
||||
|
||||
<div className="content">
|
||||
|
||||
<button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
|
||||
<button onClick={this.handleOnClickAddItem.bind(this, id, true)}>
|
||||
<img src="/images/shop/icon-add.svg" alt="add" />
|
||||
</button>
|
||||
|
||||
<Draggable draggableId={id} index={index}>
|
||||
<Draggable draggableId={id}>
|
||||
{(provided, snapshot) => (
|
||||
<React.Fragment>
|
||||
<img
|
||||
@ -1515,25 +1511,43 @@ class Backlog extends React.PureComponent {
|
||||
isMobile,
|
||||
} = this.props;
|
||||
|
||||
const ordered_items = data.itemIds.map(itemId => items[itemId]);
|
||||
const products = ordered_items.map((item, index) => {
|
||||
return (
|
||||
<ProductItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
index={index}
|
||||
name={`${item.name_number} ${item.name}`}
|
||||
name_codename={item.name_codename}
|
||||
price={item.price}
|
||||
currency={currency}
|
||||
image={`/images/${item.image}`}
|
||||
specs={item.specs}
|
||||
datasheet_file={item.datasheet_file}
|
||||
datasheet_name={item.datasheet_name}
|
||||
onClickAddItem={onClickAddItem}
|
||||
></ProductItem>
|
||||
);
|
||||
});
|
||||
|
||||
const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
|
||||
items: groupItem.itemIds.map(itemId => items[itemId])
|
||||
}));
|
||||
const groups = ordered_groups.map((group, g_index) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<h2 className="card-header">
|
||||
<button className="btn btn-link btn-block text-left " type="button" data-toggle="collapse"
|
||||
data-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
|
||||
{group.name}
|
||||
</button>
|
||||
</h2>
|
||||
<div id={`collapse${g_index}`} className="collapse" aria-labelledby="headingOne"
|
||||
data-parent="#accordion_categories">
|
||||
<div className="card-body">
|
||||
{group.items.map(item => (
|
||||
<ProductItem
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
name={`${item.name_number} ${item.name}`}
|
||||
name_codename={item.name_codename}
|
||||
price={item.price}
|
||||
currency={currency}
|
||||
image={`/images/${item.image}`}
|
||||
specs={item.specs}
|
||||
datasheet_file={item.datasheet_file}
|
||||
datasheet_name={item.datasheet_name}
|
||||
onClickAddItem={onClickAddItem}
|
||||
></ProductItem>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Droppable
|
||||
@ -1554,7 +1568,9 @@ class Backlog extends React.PureComponent {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{products}
|
||||
<div className="accordion" id="accordion_categories">
|
||||
{groups}
|
||||
</div>
|
||||
|
||||
{provided.placeholder && (
|
||||
<div style={{ display: 'none' }}>
|
||||
@ -1608,9 +1624,10 @@ class Shop extends React.PureComponent {
|
||||
|
||||
componentDidMount() {
|
||||
// index 0 is a Kasli, we place it as a default conf on the crate.
|
||||
const sourceIds = Array.from(this.state.columns.backlog.categories.map(groupId => groupId.itemIds).flat())
|
||||
const source = {
|
||||
droppableId: 'backlog',
|
||||
index: 0,
|
||||
index: null,
|
||||
};
|
||||
const destination = {
|
||||
droppableId: 'cart',
|
||||
@ -1620,7 +1637,7 @@ class Shop extends React.PureComponent {
|
||||
this.handleOnDragEnd({
|
||||
source,
|
||||
destination,
|
||||
draggableId: null,
|
||||
draggableId: sourceIds[0],
|
||||
});
|
||||
}
|
||||
|
||||
@ -1703,10 +1720,10 @@ class Shop extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
handleClickAddItem(index, tap) {
|
||||
handleClickAddItem(id, tap) {
|
||||
const source = {
|
||||
droppableId: 'backlog',
|
||||
index: index,
|
||||
index: null,
|
||||
};
|
||||
const destination = {
|
||||
droppableId: 'cart',
|
||||
@ -1716,7 +1733,7 @@ class Shop extends React.PureComponent {
|
||||
this.handleOnDragEnd({
|
||||
source,
|
||||
destination,
|
||||
draggableId: null
|
||||
draggableId: id
|
||||
}, tap);
|
||||
}
|
||||
|
||||
@ -1958,7 +1975,7 @@ class Shop extends React.PureComponent {
|
||||
this.state.items,
|
||||
this.state.columns[source.droppableId],
|
||||
this.state.columns[destination.droppableId],
|
||||
source,
|
||||
draggableId,
|
||||
destination,
|
||||
),
|
||||
},
|
||||
|
||||
612
static/js/shop.min.js
vendored
612
static/js/shop.min.js
vendored
File diff suppressed because it is too large
Load Diff
@ -855,28 +855,40 @@ const shop_data = {
|
||||
id: 'backlog',
|
||||
title: 'Backlog',
|
||||
/* itemIds define items order - change order to suit your need */
|
||||
itemIds: [
|
||||
'kasli',
|
||||
'kaslisoc',
|
||||
'bnc-dio',
|
||||
'sma-dio',
|
||||
'mcx-dio',
|
||||
'rj45-dio',
|
||||
'urukul',
|
||||
'phaser',
|
||||
'mirny',
|
||||
'almazny',
|
||||
'zotino',
|
||||
'fastino',
|
||||
'idc-bnc-adapter',
|
||||
'idc-sma-adapter',
|
||||
'idc-mcx-adapter',
|
||||
'hd68-idc-adapter',
|
||||
'novo',
|
||||
'koster',
|
||||
'clocker',
|
||||
'stabilizer',
|
||||
'vhdcicarrier',
|
||||
categories: [
|
||||
{ name: 'Core',
|
||||
itemIds: [
|
||||
'kasli',
|
||||
'kaslisoc']},
|
||||
{ name: 'TTL',
|
||||
itemIds: [
|
||||
'bnc-dio',
|
||||
'sma-dio',
|
||||
'mcx-dio',
|
||||
'rj45-dio']},
|
||||
{ name: 'RF',
|
||||
itemIds: [
|
||||
'clocker',
|
||||
'urukul',
|
||||
'phaser',
|
||||
'mirny',
|
||||
'almazny']},
|
||||
{ name: 'DAC/ADC',
|
||||
itemIds: [
|
||||
'zotino',
|
||||
'fastino',
|
||||
'novo']},
|
||||
{ name: 'Adapters',
|
||||
itemIds: [
|
||||
'idc-bnc-adapter',
|
||||
'idc-sma-adapter',
|
||||
'idc-mcx-adapter',
|
||||
'hd68-idc-adapter',
|
||||
'vhdcicarrier']},
|
||||
{ name: 'Misc',
|
||||
itemIds: [
|
||||
'koster',
|
||||
'stabilizer']}
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user