Rajendra.Reddy/test-product-compare-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1 from Rhymond/responsiveFixes

Browse Source 
Responsive fixes
This commit is contained in:
Raymond
2017-09-17 14:42:42 +01:00
committed by GitHub
parent ffc5d9f481 cbe7410f8d
commit 30f3f9787a
12 changed files with 10954 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10888
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -28,7 +28,7 @@
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.0.2",
"npm-run-all": "^4.1.1",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.0.0",
"postcss-loader": "2.0.6",

12
public/products.json
View File

@@ -5,7 +5,8 @@
"image": "https://devitems.com/preview/furnish/img/product/1.jpg",
"price": "$39",
"colors": ["red", "green", "blue"],
"condition": "New"
"condition": "New",
"description": "Black chair"
},
{
"id": "2",
@@ -13,7 +14,8 @@
"image": "https://devitems.com/preview/furnish/img/product/2.jpg",
"price": "$319",
"colors": ["green", "blue"],
"condition": "Used"
"condition": "Used",
"description": "Amazing lamp"
},
{
"id": "3",
@@ -21,7 +23,8 @@
"image": "https://devitems.com/preview/furnish/img/product/3.jpg",
"price": "$239",
"colors": ["red"],
"condition": "Used"
"condition": "Used",
"description": "Used Statue"
},
{
"id": "4",
@@ -29,7 +32,8 @@
"image": "https://devitems.com/preview/furnish/img/product/4.jpg",
"price": "$239",
"colors": ["blue"],
"condition": "New"
"condition": "New",
"description": "Large Seat"
}
]
}

147
src/components/Compare/index.js
View File

@@ -4,11 +4,8 @@ import './styles.css'
const Compare = ({products}) =>
<div className="row compare">
<div className="col-12 mt-5 text-center">
<div className={(products.length < 2
? 'hidden-xs-up'
: '')}>
<table className="table">
<thead className="thead-default">
<table className="table">
<thead className="thead-default">
<tr>
<th></th>
{products.map(product =>
@@ -17,123 +14,35 @@ const Compare = ({products}) =>
</th>
)}
</tr>
</thead>
<tbody>
<tr className="price">
<th scope="row">Price</th>
{products.map(product =>
<td key={product.id} className="text-center">{product.price}</td>
)}
</tr>
<tr className="colors">
<th scope="row">Colors</th>
{products.map(product =>
<td key={product.id}>
</thead>
<tbody>
<tr className="price">
<th scope="row">Price</th>
{products.map(product =>
<td key={product.id} className="text-center">{product.price}</td>
)}
</tr>
<tr className="colors">
<th scope="row">Colors</th>
{products.map(product =>
<td key={product.id}>
{product.colors.map((color, index) =>
<span key={index} className={"bg-" + color}></span>
<span key={index} className={"bg-" + color}></span>
)}
</td>
)}
</tr>
<tr className="condition">
<th scope="row">Condition</th>
{products.map(product =>
<td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
{product.condition}
</td>
)}
</tr>
</tbody>
</table>
</div>
</td>
)}
</tr>
<tr className="condition">
<th scope="row">Condition</th>
{products.map(product =>
<td key={product.id} className={product.condition === "Used" ? "bg-red" : "bg-green"}>
{product.condition}
</td>
)}
</tr>
</tbody>
</table>
</div>
</div>;
// const Compare = ({products}) =>
// <div className="row">
// <div className="col-12 mt-5">
// <h3 className={"text-center " + (products.length > 1 ? 'hidden-xs-up' : '')}>
// Select two or more products
// </h3>
//
// <div className={(products.length < 2 ? 'hidden-xs-up' : '')}>
// <Table>
// <thead>
// <tr>
// <th></th>
// {products.map(product =>
// <td key={product.id}>
// <img width="100%"
// src={`${process.env.REACT_APP_API_URL}/v1/api/products/image/${product.img}`}
// alt={product.name}/>
// </td>
// )}
// </tr>
// </thead>
// <tbody>
// <tr>
// <th>Name</th>
// {products.map(product =>
// <td key={product.id} className="text-center">{product.name}</td>
// )}
// </tr>
// <tr>
// <th>Categories</th>
// {products.map(product =>
// <td key={product.id}>
// {product.categories.map((category, index) =>
// <div className="text-center category" key={index}>{category}</div>
// )}
// </td>
// )}
// </tr>
// <tr>
// <th>Balance Transfer Rates</th>
// {products.map(product =>
// <td key={product.id} className="text-center">
// <div className="rate">{product.rates.balance.rate}% for up to</div>
// <div className="period">{product.rates.balance.period} months</div>
// <div className="fee">({product.rates.balance.fee}% handling fee)</div>
// </td>
// )}
// </tr>
// <tr>
// <th>Money Transfer Rates</th>
// {products.map(product =>
// <td key={product.id} className="text-center">
// <div className="rate">{product.rates.money.rate}% for up to</div>
// <div className="period">{product.rates.money.period} months</div>
// <div className="fee">({product.rates.money.fee}% handling fee)</div>
// </td>
// )}
// </tr>
// <tr>
// <th>Card Purchases</th>
// {products.map(product =>
// <td key={product.id} className="text-center">
// <div className="rate">{product.rates.purchases.rate}% for up to</div>
// <div className="period">{product.rates.purchases.period} months</div>
// <div className="fee">({product.rates.purchases.fee}% handling fee)</div>
// </td>
// )}
// </tr>
// <tr>
// <th>Additional Info</th>
// {products.map(product =>
// <td key={product.id} className="text-center">{product.info}</td>
// )}
// </tr>
// <tr className="text-center">
// <td></td>
// {products.map(product =>
// <td key={product.id}>
// <Button color="primary">More info</Button>
// </td>
// )}
// </tr>
// </tbody>
// </Table>
// </div>
// </div>
// </div>;
export default Compare;

4
src/components/Product/index.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import './styles.css'
const Product = ({product, compare}) =>
<div key={product.id} className="col-3">
<div key={product.id} className="col-sm-6 col-md-3">
<div className={"product " + (product.compare ? "compare" : "")} >
<img src={product.image} alt={product.name} />
<div className="image_overlay"></div>
@@ -13,7 +13,7 @@ const Product = ({product, compare}) =>
<div className="stats-container">
<span className="product_price">{product.price}</span>
<span className="product_name">{product.name}</span>
<p>Men's running shirt</p>
<p>{product.description}</p>
</div>
</div>
</div>

4
src/components/Product/styles.scss
View File

@@ -9,7 +9,7 @@ $product-main-color: $green;
border-radius: 5px;
overflow: hidden;
transition: all 500ms ease-out;
margin-bottom: 30px;
&:hover {
box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
.image_overlay {
@@ -21,7 +21,7 @@ $product-main-color: $green;
width: 152px;
font-size: 15px;
margin-left: -75px;
top: 150px;
top: 35%;
transition: all 200ms ease-out;
}
}

2
src/components/ProductList/index.js
View File

@@ -1,5 +1,5 @@
import React from 'react'
import Product from '../Product'
import {Product} from '../';
const ProductList = ({products, compare}) =>
<div>

9
src/components/index.js Normal file
View File

@@ -0,0 +1,9 @@
import Compare from './Compare'
import Product from './Product'
import ProductList from './ProductList'
export {
Compare,
Product,
ProductList
}

3
src/containers/App/index.js
View File

@@ -1,8 +1,7 @@
import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom'
import Home from '../Home';
import NotFound from '../NotFound';
import {Home, NotFound} from '../';
export default class App extends Component {
render() {

6
src/containers/Home/index.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import {bindActionCreators} from 'redux';
import ProductList from '../../components/ProductList';
import Compare from '../../components/Compare';
import {Compare, ProductList} from '../../components';
import * as productActions from '../../actions';
import {connect} from 'react-redux';
@@ -11,14 +10,13 @@ class Home extends React.Component {
}
render() {
const {products, actions} = this.props;
const compareProducts = products.filter(product => product.compare);
return (
<div className="Home mt-5">
<ProductList products={products} compare={actions.compare}/>
<Compare products={compareProducts}/>
{compareProducts.length >= 2 ? <Compare products={compareProducts}/> : null}
</div>
);
}

9
src/containers/index.js Normal file
View File

@@ -0,0 +1,9 @@
import App from './App'
import Home from './Home'
import NotFound from './NotFound'
export {
App,
Home,
NotFound
}

3
src/styles/_variables.scss Normal file
View File

@@ -0,0 +1,3 @@
$red: #ff715b;
$green: #48cfad;
$blue: #0197F6;