Skip to content

Commit 6ce0519

Browse files
michaelgichiamichaelgichia
committed
⚡ Cart page.
1 parent 060183f commit 6ce0519

File tree

17 files changed

+608
-12
lines changed

17 files changed

+608
-12
lines changed

‎app/containers/App/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import SignupPage from 'containers/SignupPage/Loadable';
2424
import CategoryPage from 'containers/CategoryPage/Loadable';
2525
import ProductPage from 'containers/ProductPage/Loadable';
2626
import CheckoutPage from 'containers/CheckoutPage/Loadable';
27+
import CartPage from 'containers/CartPage/Loadable';
2728

2829

2930
import Footer from 'components/Footer';
@@ -50,6 +51,7 @@ export default function App() {
5051
<Route exact path="/category/" component={CategoryPage} />
5152
<Route path="/category/product/" component={ProductPage} />
5253
<Route path="/products/checkout/" component={CheckoutPage} />
54+
<Route path="/products/cart/" component={CartPage} />
5355
<Route component={NotFoundPage} />
5456
</Switch>
5557
</Content>

‎app/containers/CartPage/Loadable.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
*
3+
* Asynchronously loads the component for CartPage
4+
*
5+
*/
6+
7+
import Loadable from 'react-loadable';
8+
9+
export default Loadable({
10+
loader: () => import('./index'),
11+
loading: () => null,
12+
});

‎app/containers/CartPage/actions.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*
2+
*
3+
* CartPage actions
4+
*
5+
*/
6+
7+
import {
8+
DEFAULT_ACTION,
9+
} from './constants';
10+
11+
export function defaultAction() {
12+
return {
13+
type: DEFAULT_ACTION,
14+
};
15+
}

‎app/containers/CartPage/cart-page.css

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
.shopping-list-wrap {
2+
margin-top: 32px;
3+
}
4+
5+
.shopping-list-title {
6+
width: 100%;
7+
background-color: #f7f7f7;
8+
color: #343434;
9+
font-size: 18px;
10+
padding: 16px;
11+
margin-bottom: 32px;
12+
}
13+
14+
/* Tables Styles
15+
============================================*/
16+
.shopping-list-details {
17+
width: 100%;
18+
display: -webkit-box;
19+
display: -ms-flexbox;
20+
display: flex;
21+
background-color: #7abe95;
22+
font-size: 18px;
23+
color: #ffffff;
24+
padding: 14px;
25+
font-weight: 600;
26+
text-align: center;
27+
}
28+
29+
.shopping-list-details li {
30+
-webkit-box-flex: 1;
31+
-ms-flex: 1;
32+
flex: 1;
33+
}
34+
35+
.shopping-list-table {
36+
width: 100%;
37+
display: -webkit-box;
38+
display: -ms-flexbox;
39+
display: flex;
40+
}
41+
42+
.shopping-list-table li {
43+
-webkit-box-flex: 1;
44+
-ms-flex: 1;
45+
flex: 1;
46+
border: 1px solid #dbdbdb;
47+
}
48+
49+
.shopping-list-table input {
50+
border: 1px solid #dbdbdb;
51+
padding: 8px;
52+
width: 100%;
53+
}
54+
55+
.img-row {
56+
display: -webkit-box;
57+
display: -ms-flexbox;
58+
display: flex;
59+
-webkit-box-align: center;
60+
-ms-flex-align: center;
61+
align-items: center;
62+
}
63+
64+
.img-row img {
65+
max-width: 100%;
66+
max-height: 230px;
67+
}
68+
69+
.shopping-list-btn {
70+
display: -webkit-box;
71+
display: -ms-flexbox;
72+
display: flex;
73+
border-width: 0px 1px 1px 1px;
74+
border-style: solid;
75+
border-color: #dbdbdb;
76+
background-color: #f7f7f7;
77+
}
78+
79+
.shopping-list-bottom > div > span {
80+
padding-top: 4px;
81+
padding-bottom: 4px;
82+
font-size: 16px;
83+
}
84+
85+
.shopping-list-bottom > div > span:first-child {
86+
padding-top: 4px;
87+
padding-bottom: 4px;
88+
font-size: 18px;
89+
font-weight: 600;
90+
}
91+
92+
.shopping-list-bottom > div:last-child > span:nth-child(2n) {
93+
color: #da554d;
94+
font-weight: 600;
95+
}
96+
97+
.shopping-list-bottom > div:first-child input {
98+
border: 1px solid #dbdbdb;
99+
max-width: 200px;
100+
margin-right: 16px;
101+
padding: 8px;
102+
}
103+
104+
@media screen and (min-width: 990px) and (max-width: 1084px) {
105+
.shopping-list-wrap {
106+
padding: 8px 50px;
107+
}
108+
}
109+
110+
@media screen and (min-width: 1084px) {
111+
.shopping-list-wrap {
112+
padding: 10px 100px;
113+
}
114+
}
115+
116+
@media screen and (min-width: 768px) {
117+
.shopping-list-table li {
118+
height: 250px;
119+
display: -webkit-box;
120+
display: -ms-flexbox;
121+
display: flex;
122+
-webkit-box-align: center;
123+
-ms-flex-align: center;
124+
align-items: center;
125+
-webkit-box-pack: center;
126+
-ms-flex-pack: center;
127+
justify-content: center;
128+
}
129+
130+
.shopping-list-table {
131+
text-align: center;
132+
}
133+
134+
.shopping-list-table li > span {
135+
display: none;
136+
}
137+
138+
.shopping-list-btn > button {
139+
margin: 40px;
140+
padding: 10px 20px;
141+
}
142+
143+
.shopping-list-bottom {
144+
display: -webkit-box;
145+
display: -ms-flexbox;
146+
display: flex;
147+
-webkit-box-pack: justify;
148+
-ms-flex-pack: justify;
149+
justify-content: space-between;
150+
margin-top: 32px;
151+
margin-bottom: 32px;
152+
}
153+
154+
.shopping-list-bottom > div {
155+
display: -webkit-box;
156+
display: -ms-flexbox;
157+
display: flex;
158+
-webkit-box-orient: vertical;
159+
-webkit-box-direction: normal;
160+
-ms-flex-direction: column;
161+
flex-direction: column;
162+
}
163+
}
164+
165+
@media screen and (max-width: 768px) {
166+
.shopping-list-table {
167+
-webkit-box-orient: vertical;
168+
-webkit-box-direction: normal;
169+
-ms-flex-direction: column;
170+
flex-direction: column;
171+
margin-bottom: 16px;
172+
}
173+
174+
.shopping-list-table:last-of-type {
175+
margin-bottom: 0;
176+
}
177+
178+
.shopping-list-table li {
179+
min-height: 10px;
180+
display: -webkit-box;
181+
display: -ms-flexbox;
182+
display: flex;
183+
font-size: 16px;
184+
}
185+
186+
.shopping-list-table li > span {
187+
font-size: 14px;
188+
-webkit-box-flex: 1;
189+
-ms-flex: 1 1 50%;
190+
flex: 1 1 50%;
191+
padding: 8px;
192+
}
193+
194+
.img-row {
195+
-webkit-box-orient: vertical;
196+
-webkit-box-direction: normal;
197+
-ms-flex-direction: column;
198+
flex-direction: column;
199+
}
200+
201+
.img-row > span {
202+
width: 100%;
203+
display: block;
204+
}
205+
206+
.img-row > span:first-child {
207+
background-color: #7abe95;
208+
color: #fff;
209+
font-weight: 700;
210+
}
211+
212+
.shopping-list-table li > div {
213+
display: none;
214+
}
215+
216+
.shopping-list-details {
217+
display: none;
218+
}
219+
220+
.shopping-list-btn {
221+
-ms-flex-pack: distribute;
222+
justify-content: space-around;
223+
}
224+
225+
.shopping-list-bottom {
226+
display: -webkit-box;
227+
display: -ms-flexbox;
228+
display: flex;
229+
margin-top: 16px;
230+
margin-bottom: 16px;
231+
-webkit-box-orient: vertical;
232+
-webkit-box-direction: normal;
233+
-ms-flex-direction: column;
234+
flex-direction: column;
235+
}
236+
237+
.shopping-list-bottom > div {
238+
display: -webkit-box;
239+
display: -ms-flexbox;
240+
display: flex;
241+
-webkit-box-orient: vertical;
242+
-webkit-box-direction: normal;
243+
-ms-flex-direction: column;
244+
flex-direction: column;
245+
width: 100%;
246+
-webkit-box-flex: 1;
247+
-ms-flex: 1;
248+
flex: 1;
249+
margin-top: 16px;
250+
margin-bottom: 16px;
251+
}
252+
}
253+
254+
.wrap-res-nav2 {
255+
display: block;
256+
width: 100%;
257+
height: 70px;
258+
}
259+
260+
.wrap-res-nav2 > .sub-navbar-wrap {
261+
background-color: #36839d;
262+
}

‎app/containers/CartPage/constants.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*
2+
*
3+
* CartPage constants
4+
*
5+
*/
6+
7+
export const DEFAULT_ACTION = 'app/CartPage/DEFAULT_ACTION';

0 commit comments

Comments
 (0)