Merge pull request #1 from Rhymond/responsiveFixes

Responsive fixes
Rhymond · Sep 17, 2017 · 30f3f97 · 30f3f97
2 parents ffc5d9f + cbe7410
commit 30f3f97
Show file tree

Hide file tree

Showing 12 changed files with 10,954 additions and 135 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/public/products.json b/public/products.json
@@ -5,31 +5,35 @@
       "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",
       "name": "Lamp",
       "image": "https://devitems.com/preview/furnish/img/product/2.jpg",
       "price": "$319",
       "colors": ["green", "blue"],
-      "condition": "Used"
+      "condition": "Used",
+      "description": "Amazing lamp"
     },
     {
       "id": "3",
       "name": "Statue",
       "image": "https://devitems.com/preview/furnish/img/product/3.jpg",
       "price": "$239",
       "colors": ["red"],
-      "condition": "Used"
+      "condition": "Used",
+      "description": "Used Statue"
     },
     {
       "id": "4",
       "name": "Seat",
       "image": "https://devitems.com/preview/furnish/img/product/4.jpg",
       "price": "$239",
       "colors": ["blue"],
-      "condition": "New"
+      "condition": "New",
+      "description": "Large Seat"
     }
   ]
 }
diff --git a/src/components/Compare/index.js b/src/components/Compare/index.js
@@ -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;
diff --git a/src/components/Product/index.js b/src/components/Product/index.js
@@ -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>

diff --git a/src/components/Product/styles.scss b/src/components/Product/styles.scss
@@ -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;
     }
   }

diff --git a/src/components/ProductList/index.js b/src/components/ProductList/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Product from '../Product'
+import {Product} from '../';
 
 const ProductList = ({products, compare}) =>
   <div>

diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,9 @@
+import Compare from './Compare'
+import Product from './Product'
+import ProductList from './ProductList'
+
+export {
+  Compare,
+  Product,
+  ProductList
+}
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
@@ -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() {

diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js
@@ -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>
     );
   }

diff --git a/src/containers/index.js b/src/containers/index.js
@@ -0,0 +1,9 @@
+import App from './App'
+import Home from './Home'
+import NotFound from './NotFound'
+
+export {
+  App,
+  Home,
+  NotFound
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -0,0 +1,3 @@
+$red: #ff715b;
+$green: #48cfad;
+$blue: #0197F6;