Merge pull request #4 from ScalaConsultants/devel

Devel
ScalaConsultants · May 29, 2017 · 789e9fa · 789e9fa
2 parents 2ed1e80 + 60c279c
commit 789e9fa
Show file tree

Hide file tree

Showing 15 changed files with 261 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![](https://img.shields.io/badge/version-0.0.3-blue.svg)
+![](https://img.shields.io/badge/version-0.0.4-blue.svg)
 
 # Example React App - Online shop
 
@@ -22,24 +22,17 @@ Project scaffold is generated by [https://github.com/react-webpack-generators/ge
 * [ ] possibility to chose how many products add to cart
 * [ ] visible adding to cart effect
 * [ ] number of items in cart displayed near cart icon
-* [ ] add products images
-* [x] write 'real' products data and add more products
 
 ### Code
 
 * [ ] add Redux middleware for async data loading
-* [ ] improve css code (eg rem, em instead of px)
-* [x] delete unnecessary, once used styled components
 * [ ] add comments describing what things do
-* [x] divide components into presentational and container components
 * [ ] add lodash
-* [x] reorganize folders structure
 * [ ] update to webpack 2
 * [ ] absolute components paths
 * [ ] tests
 
 ### Style
 
-* [ ] RWD
 * [ ] change favicon
 * [ ] improve general app style
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -2,11 +2,11 @@ import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Button = styled.button`
-    padding: 6px 10px;
-    margin: 6px;
+    padding: 0.4vw 1vw;
+    margin: 1vw;
     border: 1px solid white;
     background-color: transparent;
-    font-size: 16px;
+    font-size: 3vw;
     box-shadow: ${props => props.isActive ? 'inset 0 0 4px 1px #848484' : 'none'};
     
     &:hover{
@@ -16,6 +16,10 @@ const Button = styled.button`
     &:active{
       box-shadow: inset 0 0 10px 1px #919191;
     }
+    
+    @media (min-width: 768px) {
+      font-size: 1.8vw;
+    }
 `
 
 export default Button
diff --git a/src/components/Screen.js b/src/components/Screen.js
@@ -2,7 +2,12 @@ import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const Screen = styled.section`
-  padding: 30px 180px;
+    padding-top: 90px;
+
+    @media (min-width: 768px) {
+    width: 70vw;
+    margin: 0 auto;
+  }
 `
 
 export default Screen
diff --git a/src/App/App.css → src/containers/App/App.css b/src/App/App.css → src/containers/App/App.css
@@ -2,6 +2,8 @@
   text-decoration: none;
   list-style: none;
   outline: none;
+  padding: 0;
+  margin: 0;
 }
 
 body{

diff --git a/src/App/App.js → src/containers/App/App.js b/src/App/App.js → src/containers/App/App.js
@@ -1,12 +1,11 @@
-require('normalize.css/normalize.css')
-require('./App.css')
-
 import React from 'react'
 import Navbar from './Navbar/Navbar'
 import { Switch, Route } from 'react-router-dom'
-import Shop from '../containers/Shop/Shop'
-import ShoppingCart from '../containers/ShoppingCart/ShoppingCart'
-import ProductDetails from '../containers/ProductDetails/ProductDetails'
+import 'normalize.css/normalize.css'
+import './App.css'
+import Shop from '../../containers/Shop/Shop'
+import ShoppingCart from '../../containers/ShoppingCart/ShoppingCart'
+import ProductDetails from '../../containers/ProductDetails/ProductDetails'
 
 //let yeomanImage = require('../../images/yeoman.png');
 

diff --git a/src/App/Navbar/Navbar.js → src/containers/App/Navbar/Navbar.js b/src/App/Navbar/Navbar.js → src/containers/App/Navbar/Navbar.js
@@ -4,37 +4,45 @@ import { Link } from 'react-router-dom'
 
 // language=SCSS prefix=dummy{ suffix=}
 const NavbarStyle = styled.div`
+    position: fixed;
     height: 80px;
     background-color: rgb(24,24,24);
-    padding:0 180px;
+    width: 100%;
+    
+    @media (min-width: 768px) {
+      div{
+        width: 70vw;
+        margin:0 auto;
+      }
+    }
 `
 
 // language=SCSS prefix=dummy{ suffix=}
 const CartButton = styled.img`
-    margin:8px;
     float:right;
+    margin:6px;
 `
 
 // language=SCSS prefix=dummy{ suffix=}
 const Logo = styled.span`
     color: rgb(255, 255, 255);
-    font-size: 46px;
+    font-size: 42px;
     float: left;
-    margin: 15px 0;
+    margin: 16px;
 `
 
 const Navbar = () => {
     return (
       <NavbarStyle>
-
-        <Link to='/'>
-          <Logo>SHOP NAME</Logo>
-        </Link>
-
-        <Link to='/cart'>
-          <CartButton src="../../lib/images/cart.png"/>
-        </Link>
-
+        <div>
+          <Link to='/'>
+            <Logo>LOGO</Logo>
+          </Link>
+
+          <Link to='/cart'>
+            <CartButton src="../../lib/images/cart.png"/>
+          </Link>
+        </div>
       </NavbarStyle>
     )
 }

diff --git a/src/containers/ProductDetails/ProductDetailsView.js b/src/containers/ProductDetails/ProductDetailsView.js
@@ -2,23 +2,63 @@ import React from 'react'
 import Screen from '../../components/Screen'
 import Button from '../../components/Button'
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 
-const ProductDetailsView = (props) => {
+// language=SCSS prefix=dummy{ suffix=}
+const ProductDetailsStyle = styled.div`
+  padding: 0 4vw;
+  & img{
+    margin: 0 auto;
+    display: block;
+  }
+  
+  & p:first-of-type{
+    text-align: center;
+    font-size: 4vh;
+    font-weight: 600;
+  }
+
+   & p{
+     margin: 4vw 0;
+   }
+
+  & p,span{
+    font-size: 3vh;
+  }
+
+  & span:first-of-type, Button:last-of-type{
+    float: right;
+  }
+  
+  Button:first-child{
+    float: left;
+  }
+
+  @media (min-width: 768px) {
+    & p{
+      margin: 2vw 0;
+    }
+  }
+`
+
+const ProductDetailsView = ({product, category, addToCart}) => {
     return (
       <Screen>
-        <h3>{props.product.name}</h3>
-
-        <p>Price: {props.product.price}</p>
-        <p>Category: {props.category}</p>
-        <p>Description: {props.product.desc}</p>
+        <ProductDetailsStyle>
+          <img height="200" width="200" src="https://unsplash.it/200/200/?random"/>
+          <p>{product.name}</p>
+          <span>{product.price} zł</span>
+          <span>Category: {category}</span>
+          <p>Description: {product.desc}</p>
 
-        <Button onClick={() => props.addToCart()}>
-          Add to cart
-        </Button>
+          <Link to='/'>
+            <Button>Back to shop</Button>
+          </Link>
 
-        <Link to='/'>
-          <Button>Back to shop</Button>
-        </Link>
+          <Button onClick={() => addToCart()}>
+            Add to cart
+          </Button>
+        </ProductDetailsStyle>
       </Screen>
     )
 }

diff --git a/src/containers/Shop/Filters/Filters.js b/src/containers/Shop/Filters/Filters.js
@@ -12,12 +12,12 @@ const mapDispatchToProps = (dispatch) => {
     setProductsSort: (sortType) => dispatch(setProductsSort(sortType))
   }
 }
-const Filters = (props) => {
+const Filters = ({setProductsSort, sortType}) => {
     return (
       <FiltersView
-        sortType={props.sortType}
-        sortPriceAsc={() => props.setProductsSort('PRICE_ASC')}
-        sortPriceDes={() => props.setProductsSort('PRICE_DES')}
+        sortType={sortType}
+        sortPriceAsc={() => setProductsSort('PRICE_ASC')}
+        sortPriceDes={() => setProductsSort('PRICE_DES')}
         />
     )
 }

diff --git a/src/containers/Shop/Filters/FiltersView.js b/src/containers/Shop/Filters/FiltersView.js
@@ -6,21 +6,24 @@ import styled from 'styled-components'
 // language=SCSS prefix=dummy{ suffix=}
 const FilterStyle = styled.div`
     background-color: rgb(221,221,221);
-    padding: 0 40px;
+    width: 100%;
+    & span{
+      margin-left: 6vw;
+    }
 `
 
-const FiltersView = (props) => {
+const FiltersView = ({sortType, sortPriceAsc, sortPriceDes}) => {
     return (
       <FilterStyle>
         <span>Sort by price:</span>
 
-        <Button isActive={props.sortType === 'PRICE_ASC'}
-                onClick={() => props.sortPriceAsc()}>
+        <Button isActive={sortType === 'PRICE_ASC'}
+                onClick={() => sortPriceAsc()}>
           Lowest
         </Button>
 
-        <Button isActive={props.sortType === 'PRICE_DES'}
-                onClick={() => props.sortPriceDes()}>
+        <Button isActive={sortType === 'PRICE_DES'}
+                onClick={() => sortPriceDes()}>
           Highest
         </Button>
 

diff --git a/src/containers/Shop/ProductsList/ListItem/ListItem.js b/src/containers/Shop/ProductsList/ListItem/ListItem.js
@@ -4,51 +4,80 @@ import styled from 'styled-components'
 
 // language=SCSS prefix=dummy{ suffix=}
 const ListElementStyle = styled.li`
-    font-size: 20px;
-    margin: 20px 0;
-    padding: 20px;
-    border: black 2px solid;
-    height: 100px;
+    background-color: rgb(221,221,221);
+    margin: 5px auto;
+    width: 100%;
+    height: 24vw;
+
 
     &:hover {
       background-color: rgb(174, 174, 174);
     }
 
-    & .image {
-      width: 100px;
-      height: 100px;
-      background-color: #ffecd8;
-      text-align: center;
-      float:left;
+    & img{
+      width: 24vw;
+      height: auto;
+      display: block;
+      float: left;
     }
 
-    & .content{
+    & div{
       float:left;
-      margin-left: 80px;
+      width: 54vw;
+      padding: 0 6vw;
     }
-
-    & h3{
-      margin: 0;
-      text-align: left;
+    
+    & p{
+      text-align: center;
+      font-size: 4.2vw;
+      font-weight: 600;
       color: black;
+      margin-top: 2vw;
+      margin-bottom: 4vw;
     }
 
-    & p{
+    & span{
       color:black;
+      font-size: 4vw;
+    }
+    & span:last-child{
+      float:right;
+    }
+    
+    @media (min-width: 768px) {
+      height: 14vw;
+
+      & img{
+        width: 14vw;
+      }
+      
+      & div{
+        width: 44vw;
+        padding: 0 6vw;
+      }
+
+      & p{
+        font-size: 2.6vw;
+      }
+
+      & span{
+        font-size: 2vw;
+      }
     }
 `
 
-const ListElement = (props) => {
+const ListElement = ({product}) => {
 
-  const category = categories.find(category => category.id === props.product.category).name
+  const category = categories.find(category => category.id === product.category).name
 
   return (
       <ListElementStyle>
-        <div className="image"/>
-        <div className="content">
-          <h3>{props.product.name}</h3>
-          <p>price: {props.product.price}</p>
-          <p>category: {category}</p>
+        <img height="200" width="200" src="https://unsplash.it/200/200/?random"/>
+
+        <div>
+          <p>{product.name}</p>
+          <span>category: {category}</span>
+          <span>{product.price} zł</span>
         </div>
       </ListElementStyle>
     )