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

Responsive fixes

Browse Source
This commit is contained in:
Ray
2017-09-17 14:41:03 +01:00
parent ffc5d9f481
commit cbe7410f8d
12 changed files with 10954 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
}