Skip to content

Commit 6cd3d07

Browse files
michaelgichiamichaelgichia
committed
Added product info.
1 parent bc1d4b3 commit 6cd3d07

File tree

5 files changed

+167
-61
lines changed

5 files changed

+167
-61
lines changed

‎app/containers/ProductPage/ProductInfo.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { Component } from 'react';
2+
import { Rate, Button } from 'antd';
3+
import Select from 'antd/lib/select';
4+
5+
const Option = Select.Option;
6+
7+
function handleChange(value) {
8+
console.log(`selected ${value}`);
9+
}
10+
11+
export class ProductInfo extends Component {
12+
render() {
13+
return (
14+
<div className="product-info-wrap">
15+
<header className="product-page-title">Laoreet Congue</header>
16+
<div className="product-page-metas">
17+
<div>
18+
<span>Reference:</span> 011DSO1
19+
</div>
20+
<div>
21+
<span>Condition:</span> New product
22+
</div>
23+
<div>
24+
<span className="product-current-price">KES 2500</span> was{' '}
25+
<strike>KES 3000</strike>
26+
</div>
27+
</div>
28+
<div className="rate-demo-wrp">
29+
<Rate disabled defaultValue={4} />
30+
</div>
31+
<div className="product-current-descptn">
32+
Lorem Ipsum is simply dummy text of the printing and typesetting
33+
industry. Lorem Ipsum has been the industry's standard dummy text ever
34+
since the 1500s, when an unknown printer took a galley of type and
35+
scrambled it to make a type specimen book.
36+
</div>
37+
<div className="product-refinement-form">
38+
<div>
39+
<span className="product-refinement-title">Quantity</span>
40+
<Select
41+
defaultValue="1"
42+
style={{ width: 100 }}
43+
onChange={handleChange}
44+
size="large"
45+
>
46+
<Option value="1">1</Option>
47+
<Option value="2">2</Option>
48+
<Option value="3">3</Option>
49+
<Option value="4">4</Option>
50+
</Select>
51+
</div>
52+
<div>
53+
<span className="product-refinement-title">Size</span>
54+
<Select
55+
defaultValue="12"
56+
style={{ width: 100 }}
57+
onChange={handleChange}
58+
size="large"
59+
>
60+
<Option value="9">13</Option>
61+
<Option value="10">12</Option>
62+
<Option value="11">11</Option>
63+
<Option value="12">12</Option>
64+
</Select>
65+
</div>
66+
<div className="">
67+
<Button type="secondary" size="large">
68+
ADD TO CART
69+
</Button>
70+
</div>
71+
</div>
72+
<div className="product-share-icons">
73+
<header>Share or send to friend</header>
74+
<div>
75+
<button>
76+
<i className="fa fa-twitter" aria-hidden="true" />
77+
</button>
78+
<button>
79+
<i className="fa fa-facebook-f" aria-hidden="true" />
80+
</button>
81+
<button>
82+
<i className="fa fa-envelope-o" aria-hidden="true" />
83+
</button>
84+
<button>
85+
<i className="fa fa-whatsapp" aria-hidden="true" />
86+
</button>
87+
</div>
88+
</div>
89+
</div>
90+
);
91+
}
92+
}
93+
94+
export default ProductInfo;

‎app/containers/ProductPage/index.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import PageHero from 'components/PageHero';
1515
import SubNavbar from 'components/SubNavbar';
1616

1717
import ProductImage from './ProductImage';
18+
import ProductInfo from './ProductInfo';
1819

1920
import injectSaga from 'utils/injectSaga';
2021
import injectReducer from 'utils/injectReducer';
@@ -34,13 +35,13 @@ export class ProductPage extends React.Component {
3435
<SubNavbar />
3536
<PageHero />
3637
<Row type="flex" justify="center">
37-
<Col xs={24} sm={24} md={24} lg={24} xl={22} xxl={18}>
38+
<Col xs={24} sm={24} md={24} lg={24} xl={20} xxl={18}>
3839
<Row type="flex" justify="center">
39-
<Col xs={24} sm={12} md={12} lg={10} xl={8} xxl={6}>
40+
<Col xs={24} sm={12} md={12} lg={10} xl={6} xxl={6}>
4041
<ProductImage />
4142
</Col>
42-
<Col xs={24} sm={12} md={12} lg={14} xl={16} xxl={18}>
43-
<h1>B</h1>
43+
<Col xs={24} sm={12} md={12} lg={14} xl={18} xxl={18}>
44+
<ProductInfo />
4445
</Col>
4546
</Row>
4647
</Col>

‎app/containers/ProductPage/product-page.css

Lines changed: 50 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,16 @@
2020
color: #36859d;
2121
}
2222

23-
24-
/* Main wrapper
25-
===============================================================*/
26-
.product-page-main {
27-
margin-top: 40px;
28-
margin-bottom: 40px;
29-
}
30-
3123
/* Rating Stars
3224
==================================================================*/
33-
.rate-demo-wrp {
34-
display: inline-block;
25+
.ant-rate {
26+
color: #fddf80;
27+
font-size: 16px;
3528
}
3629

37-
/* Related products Carousels
38-
===========================================================*/
39-
30+
.rate-demo-wrp {
31+
margin-bottom: 16px;
32+
}
4033

4134
/* Album styles
4235
================================================================*/
@@ -59,8 +52,9 @@
5952
.product-page-img-btn {
6053
width: 130px;
6154
padding: 10px;
62-
background-color: rgba(250, 250, 250, .75);
55+
background-color: rgba(250, 250, 250, 0.75);
6356
margin-bottom: 70px;
57+
color: #343434;
6458
}
6559

6660
.product-page-img-icon {
@@ -69,6 +63,17 @@
6963

7064
/* Description styles
7165
===============================================================*/
66+
.product-info-wrap {
67+
padding-left: 32px;
68+
padding-right: 16px;
69+
}
70+
71+
@media screen and (min-width: 768px) {
72+
.product-info-wrap {
73+
margin: 32px 0;
74+
}
75+
}
76+
7277
.product-page-title {
7378
font-size: 28px;
7479
color: #343434;
@@ -88,27 +93,27 @@
8893
border-width: 1px 0;
8994
border-color: #b3afaf;
9095
border-style: solid;
91-
margin: 8px auto;
92-
padding-top: 24px;
93-
padding-bottom: 24px;
96+
margin: 0px 8px 32px 0px;
97+
padding-top: 16px;
98+
padding-bottom: 16px;
9499
font-size: 14px;
95100
}
96101

97102
.product-refinement-form {
98103
display: -webkit-box;
99104
display: -ms-flexbox;
100105
display: flex;
101-
padding-top: 16px;
102-
padding-bottom: 16px;
103106
-webkit-box-pack: start;
104-
-ms-flex-pack: start;
105-
justify-content: flex-start;
107+
-ms-flex-pack: start;
108+
justify-content: flex-start;
106109
-ms-flex-wrap: wrap;
107-
flex-wrap: wrap;
110+
flex-wrap: wrap;
111+
margin-bottom: 16px;
108112
}
109113

110114
.product-refinement-form > div {
111-
margin: 8px;
115+
margin-right: 32px;
116+
margin-bottom: 16px;
112117
}
113118

114119
.product-refinement-title {
@@ -118,27 +123,9 @@
118123
font-weight: 600;
119124
}
120125

121-
.product-addto-cart {
122-
display: -webkit-box;
123-
display: -ms-flexbox;
124-
display: flex;
125-
text-align: center;
126-
width: 100%;
127-
}
128-
129-
.product-addto-cart > button {
130-
width: 150px;
131-
height: 40px;
132-
background-color: #7abe95;
133-
color: #fff;
134-
margin: 10px;
135-
text-transform: uppercase;
136-
font-weight: 700;
137-
}
138-
139126
.product-share-icons {
140127
width: 100%;
141-
margin: 50px 10px 16px 10px;
128+
margin: 0px 10px;
142129
}
143130

144131
.product-share-icons > header {
@@ -154,8 +141,8 @@
154141
display: flex;
155142
font-size: 22px;
156143
-webkit-box-pack: justify;
157-
-ms-flex-pack: justify;
158-
justify-content: space-between;
144+
-ms-flex-pack: justify;
145+
justify-content: space-between;
159146
width: 200px;
160147
}
161148

@@ -194,13 +181,13 @@
194181
width: 100%;
195182
min-height: 310px;
196183
-ms-flex-wrap: wrap;
197-
flex-wrap: wrap;
184+
flex-wrap: wrap;
198185
text-align: center;
199186
justify-content: space-around;
200187
}
201188

202189
.product-related-wrap > div {
203-
width: calc(100% / 5 - 32px);
190+
width: calc(100% / 5 - 32px);
204191
height: 310px;
205192
margin-top: 32px;
206193
margin-bottom: 16px;
@@ -249,7 +236,7 @@
249236
}
250237
}
251238

252-
@media screen and (min-width: 768px) and (max-width: 990px){
239+
@media screen and (min-width: 768px) and (max-width: 990px) {
253240
.row-album-wrap {
254241
padding: 20px;
255242
}
@@ -265,16 +252,18 @@
265252
width: 100%;
266253
height: 100%;
267254
padding-right: 16px;
255+
padding-left: 16px;
268256
justify-content: flex-end;
269257
margin-bottom: 32px;
258+
margin-top: 32px;
270259
}
271260

272261
.product-page-metas {
273262
margin-bottom: 8px;
274263
}
275264

276265
.product-page-metas span {
277-
padding-right: 16px
266+
padding-right: 16px;
278267
}
279268

280269
.product-sheet-review {
@@ -283,8 +272,8 @@
283272

284273
.product-related-wrap {
285274
-webkit-box-pack: justify;
286-
-ms-flex-pack: justify;
287-
justify-content: space-between;
275+
-ms-flex-pack: justify;
276+
justify-content: space-between;
288277
}
289278
}
290279

@@ -296,8 +285,8 @@
296285

297286
.product-refinement-form {
298287
-webkit-box-pack: justify;
299-
-ms-flex-pack: justify;
300-
justify-content: space-between;
288+
-ms-flex-pack: justify;
289+
justify-content: space-between;
301290
}
302291

303292
.product-sheet-review {
@@ -309,12 +298,17 @@
309298
}
310299

311300
.product-related-wrap {
312-
-ms-flex-pack: distribute;
313-
justify-content: space-around;
314-
}
301+
-ms-flex-pack: distribute;
302+
justify-content: space-around;
303+
}
315304

316305
.product-current-descptn,
317306
.product-page-title {
318307
margin: 16px 8px;
319308
}
320-
}
309+
310+
.product-page-img-div {
311+
padding-right: 16px;
312+
padding-left: 16px;
313+
}
314+
}

‎app/font-awesome.min.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,4 +283,21 @@
283283

284284
.fa-arrows-alt:before {
285285
content: "\f0b2";
286+
}
287+
288+
.fa-twitter:before {
289+
content: "\f099";
290+
}
291+
292+
.fa-facebook-f:before,
293+
.fa-facebook:before {
294+
content: "\f09a";
295+
}
296+
297+
.fa-envelope-o:before {
298+
content: "\f003";
299+
}
300+
301+
.fa-whatsapp:before {
302+
content: "\f232";
286303
}

‎app/stylesheet/_overrides.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@btn-red: ~"@{btn-prefix-cls}-red";
1212
@btn-primary-color : #ffffff;
1313
@primary-color: #36859d;
14-
@secondary-color: #62C694;
14+
@secondary-color: #7abe95;
1515
@gold-6: #fddf80;
1616
@red-6: #da554d;
1717
@normal-color: #dbdbdb;

0 commit comments

Comments
 (0)