Skip to content

Commit 3c45df7

Browse files
ndahimana154MANISHIMWESalton
ndahimana154
and
MANISHIMWESalton
authored
User create and View Cart (#32)
* [Starts #187584884] Starts template * [Finishes #187584885 User shoould be able to view their cart] * --ammend * Added add to cart on product page * --ammend * --ammend * Added navigation on single product * --ammend * removed duplicate percentage * Replaced a with link * Modified .circleci config * Fix styles * --ammend * Fixes cart calculation * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * --ammend * Finished working on feedbacks * --mend * Finshed displaying th totals and prodcuts count in realtime * Fixed rebase issues --------- Co-authored-by: MANISHIMWE Salton <[email protected]>
1 parent 64e4f65 commit 3c45df7

23 files changed

+1548
-347
lines changed

‎.circleci/config.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,4 @@ jobs:
4040
workflows:
4141
test_workflow:
4242
jobs:
43-
- test
43+
- test

‎.vscode/settings.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"cSpell.words": [
3+
"flexer",
4+
"signup"
5+
]
6+
}

‎build/index.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
<!doctype html><html><head><meta charset="utf-8"/><title>E-Commerce Ninjas FrontEnd</title><script defer="defer" src="main.c05cff687073893a108e.js"></script></head><body><div id="root"></div></body></html>
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>E-Commerce Ninjas FrontEnd</title>
6+
<script defer="defer" src="main.c05cff687073893a108e.js"></script>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎package-lock.json

-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.scss

+23-22
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
1-
@import "./assets/styles/Colors.scss";
2-
@import "./assets/styles/style.scss";
3-
@import "./assets/styles/Sample.scss";
4-
@import "./assets/styles/signup.scss";
5-
@import "./assets/styles/Login.scss";
6-
@import "./assets/styles/LandingPage.scss";
7-
@import "./assets/styles/email.scss";
8-
@import "./assets/styles/AdminHeader.scss";
9-
@import "./assets/styles/Button.scss";
10-
@import "./assets/styles/Categories.scss";
11-
@import "./assets/styles/Footer.scss";
12-
@import "./assets/styles/Input.scss";
13-
@import "./assets/styles/SearchInput.scss";
14-
@import "./assets/styles/SellerHeader.scss";
15-
@import "./assets/styles/Sidebar.scss";
16-
@import "./assets/styles/Header.scss";
17-
@import "./assets/styles/Product.scss";
18-
@import "./assets/styles/Loader.scss";
19-
@import "./assets/styles/reset-password.scss";
20-
@import "./assets/styles/SingleProduct.scss";
21-
@import "./assets/styles/ImageSlider.scss";
22-
@import "./assets/styles/Queries.scss";
1+
@import './assets/styles/Colors.scss';
2+
@import './assets/styles/style.scss';
3+
@import './assets/styles/Sample.scss';
4+
@import './assets/styles/signup.scss';
5+
@import './assets/styles/Login.scss';
6+
@import './assets/styles/LandingPage.scss';
7+
@import './assets/styles/email.scss';
8+
@import './assets/styles/AdminHeader.scss';
9+
@import './assets/styles/Button.scss';
10+
@import './assets/styles/Categories.scss';
11+
@import './assets/styles/Footer.scss';
12+
@import './assets/styles/Input.scss';
13+
@import './assets/styles/SearchInput.scss';
14+
@import './assets/styles/SellerHeader.scss';
15+
@import './assets/styles/Sidebar.scss';
16+
@import './assets/styles/Header.scss';
17+
@import './assets/styles/Product.scss';
18+
@import './assets/styles/Loader.scss';
19+
@import './assets/styles/reset-password.scss';
20+
@import './assets/styles/SingleProduct.scss';
21+
@import './assets/styles/ImageSlider.scss';
22+
@import './assets/styles/Queries.scss';
23+
@import './assets/styles/ViewCart.scss';
2324
@import "./assets/styles/Notifications.scss";
2425
@import "./assets/styles/Search.scss";
2526
@import "./assets/styles/CustomSelect.scss";

‎src/assets/styles/Colors.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ $white: #fff;
1414
$white-2: #eee;
1515
$background-color: #ffefe1;
1616
$icon-color: #ff6d18;
17+
$icon-color-unopacity: #ff6d184c;
1718
$text-color: #112a46;
1819
$black-2: #232f3e;
1920
$black-3: #131a22;

‎src/assets/styles/Header.scss

+48-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
a {
2+
text-decoration: none;
3+
color: $black;
4+
}
15
.header {
26
display: flex;
37
flex-direction: column;
@@ -27,10 +31,10 @@
2731
&::before {
2832
content: "";
2933
position: absolute;
30-
top: -50%;
34+
top: -95%;
3135
left: 160%;
3236
width: 0.15rem;
33-
height: 6rem;
37+
height: 6.5rem;
3438
background-color: #ccc;
3539
}
3640
}
@@ -61,6 +65,7 @@
6165
.icons {
6266
display: flex;
6367
margin-left: auto;
68+
padding: 10px;
6469
}
6570
}
6671

@@ -156,6 +161,7 @@
156161
&__container {
157162
display: flex;
158163
flex-direction: column;
164+
background: red;
159165
gap: 3.2rem;
160166
}
161167

@@ -282,8 +288,11 @@
282288
}
283289
}
284290
.cart__details {
291+
all: unset;
285292
margin-right: 3rem;
286293
margin-left: 3rem;
294+
margin-top: 15px;
295+
cursor: pointer;
287296
}
288297

289298
.rotate2 {
@@ -296,14 +305,15 @@
296305
flex: 0 0 10%;
297306
cursor: pointer;
298307
margin-right: 1.5rem;
308+
margin-top: 10px;
299309

300310
&::before {
301311
content: "";
302312
position: absolute;
303-
top: -50%;
304-
left: -15%;
313+
top: -75%;
314+
left: -10%;
305315
width: 0.12rem;
306-
height: 6rem;
316+
height:6.5rem;
307317
background-color: #ccc;
308318
}
309319
}
@@ -367,4 +377,37 @@
367377
z-index: 2;
368378
}
369379
}
380+
}
381+
382+
.cart__icons_row {
383+
display: flex;
384+
flex-direction: row;
385+
flex-wrap: nowrap;
386+
.cart_icon_box {
387+
border: 0;
388+
flex: 1;
389+
}
390+
.cart_icon_box::before {
391+
content: "";
392+
position: absolute;
393+
top: -15%;
394+
left: 160%;
395+
width: 0.15rem;
396+
height: 6rem;
397+
background-color: transparent;
398+
}
399+
.cart_box_info {
400+
display: flex;
401+
flex-direction: column;
402+
margin-left: 10px;
403+
}
404+
}
405+
.notification_box_cont {
406+
margin-top: 15px;
407+
}
408+
409+
410+
411+
@media only screen and (max-width: 768px) {
412+
370413
}

‎src/assets/styles/Product.scss

+18-13
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
transform: scale(1.05);
1111
box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.3);
1212
}
13-
13+
1414
.product-image-container {
1515
position: relative;
1616
height: 18.8rem;
@@ -20,7 +20,7 @@
2020
position: absolute;
2121
top: 0;
2222
left: 0;
23-
background-color: #FF6D18;
23+
background-color: #ff6d18;
2424
color: $white;
2525
padding: 0.3rem 1rem;
2626
border-top-left-radius: 1rem;
@@ -85,7 +85,9 @@
8585
margin-left: 0.7rem;
8686
cursor: pointer;
8787
border: 1px solid $primary-color;
88-
transition: background-color 0.3s, color 0.3s;
88+
transition:
89+
background-color 0.3s,
90+
color 0.3s;
8991

9092
&:hover {
9193
background-color: $primary-color;
@@ -95,7 +97,10 @@
9597
color: $white;
9698
}
9799
}
98-
100+
.loading-spinner {
101+
width: 100%;
102+
color: 100%;
103+
}
99104
.icon {
100105
width: auto;
101106
height: 70%;
@@ -120,16 +125,16 @@
120125
color: $white-color;
121126
}
122127

123-
.product-info {
124-
.product-name {
128+
.product-info {
129+
.product-name {
125130
font-size: 1.4rem;
126131
}
127132

128-
.product-price {
133+
.product-price {
129134
font-size: 1.8rem;
130135
}
131136

132-
.product-stock {
137+
.product-stock {
133138
font-size: 1.4rem;
134139
}
135140
}
@@ -142,17 +147,17 @@
142147
color: $white-color;
143148
}
144149

145-
.product-info {
146-
.product-name {
150+
.product-info {
151+
.product-name {
147152
font-size: 1.2rem;
148153
}
149154

150-
.product-price {
155+
.product-price {
151156
font-size: 1.6rem;
152157
}
153158

154-
.product-stock {
159+
.product-stock {
155160
font-size: 1.2rem;
156161
}
157162
}
158-
}
163+
}

‎src/assets/styles/Sample.scss

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
padding: 0.5rem 2rem;
8989
border-radius: 4rem;
9090
cursor: pointer;
91+
background: $white;
9192
}
9293
}
9394

0 commit comments

Comments
 (0)