2 |
6 |
7 |
--------------------------------------------------------------------------------
/src/app/core/layout-mode/layout-mode.component.scss:
--------------------------------------------------------------------------------
1 | .layout-mode {
2 |
3 | display: flex;
4 | flex-direction: row;
5 | padding: .3rem;
6 | border: 2px solid gray;
7 | cursor: pointer;
8 |
9 | &__item {
10 | width: .7rem;
11 | height: .7rem;
12 | background-color: gray;
13 |
14 | &--active {
15 | background-color: dodgerblue;
16 | }
17 |
18 | }
19 |
20 | &__item:not(:last-child) {
21 | margin-right: .3rem;
22 | }
23 |
24 |
25 | &:hover {
26 | border: 2px solid #646464;
27 | }
28 |
29 | &--active {
30 | border: 2px solid dodgerblue;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/core/layout-mode/layout-mode.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { LayoutModeComponent } from './layout-mode.component';
4 |
5 | describe('LayoutModeComponent', () => {
6 | let component: LayoutModeComponent;
7 | let fixture: ComponentFixture2 | Page not found 3 |
4 | -------------------------------------------------------------------------------- /src/app/core/not-found/not-found.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheCoderDream/Angular-Ecommerce-App-with-NGRX/f355805b76099aa488dfd02e764b72910bb01b8d/src/app/core/not-found/not-found.component.scss -------------------------------------------------------------------------------- /src/app/core/not-found/not-found.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotFoundComponent } from './not-found.component'; 4 | 5 | describe('NotFoundComponent', () => { 6 | let component: NotFoundComponent; 7 | let fixture: ComponentFixture
2 |
16 |
--------------------------------------------------------------------------------
/src/app/filters/brand-filter/brand-filter.component.scss:
--------------------------------------------------------------------------------
1 | .custom-checkbox {
2 | display: block;
3 | position: relative;
4 | padding-left: 2rem;
5 | cursor: pointer;
6 | user-select: none;
7 |
8 | &__input {
9 | position: absolute;
10 | opacity: 0;
11 | height: 0;
12 | width: 0;
13 |
14 |
15 | }
16 |
17 | &__span {
18 | position: absolute;
19 | top: 50%;
20 | left: 0;
21 | transform: translateY(-50%);
22 | height: 1.2rem;
23 | width: 1.2rem;
24 | background-color: white;
25 | border: 2px solid gray;
26 |
27 | &::after {
28 | content: "";
29 | opacity: 0;
30 | position: absolute;
31 | top: 50%;
32 | left: 50%;
33 | width: .6rem;
34 | height: .6rem;
35 | background-color: dodgerblue;
36 | transform: translate(-50%, -50%);
37 | }
38 | }
39 |
40 | &:hover &__span {
41 | background-color: #eeeeee;
42 | }
43 |
44 | &__input:checked + &__span::after {
45 | opacity: 1;
46 | }
47 | }
48 |
49 | .flex-50 {
50 | flex: 0 0 100%;
51 | }
52 |
53 | @media only screen and (max-width: 768px) {
54 |
55 | .flex-50 {
56 | flex: 0 0 50%;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/filters/brand-filter/brand-filter.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BrandFilterComponent } from './brand-filter.component';
4 |
5 | describe('BrandFilterComponent', () => {
6 | let component: BrandFilterComponent;
7 | let fixture: ComponentFixture
3 |
5 | Brands
4 |-
6 |
- 7 | 13 | 14 |
2 |
27 |
--------------------------------------------------------------------------------
/src/app/filters/price-filter/price-filter.component.scss:
--------------------------------------------------------------------------------
1 | .custom-radio-btn {
2 | display: block;
3 | position: relative;
4 | cursor: pointer;
5 | padding-left: 2rem;
6 | user-select: none;
7 |
8 | &__input {
9 | position: absolute;
10 | opacity: 0;
11 | cursor: pointer;
12 | }
13 |
14 | &__span {
15 | position: absolute;
16 | top: 50%;
17 | left: 0;
18 | height: 1.3rem;
19 | width: 1.3rem;
20 | background-color: #eeeeee;
21 | border-radius: 12px;
22 | transform: translateY(-50%);
23 |
24 | &::after {
25 | position: absolute;
26 | top: 50%;
27 | left: 50%;
28 | transform: translate(-50%, -50%);
29 | width: .7rem;
30 | height: .7rem;
31 | border-radius: 50%;
32 | background-color: dodgerblue;
33 | content: "";
34 | display: none;
35 | }
36 | }
37 |
38 | &__input:checked ~ &__span::after {
39 | display: block;
40 | }
41 |
42 | &:hover &__span {
43 | background-color: #dfdfdf;
44 | }
45 |
46 |
47 | }
48 |
49 | .text-remove-selected {
50 | font-size: 1rem;
51 | font-weight: normal;
52 | cursor: pointer;
53 | padding-left: 2rem;
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/filters/price-filter/price-filter.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { PriceFilterComponent } from './price-filter.component';
4 |
5 | describe('PriceFilterComponent', () => {
6 | let component: PriceFilterComponent;
7 | let fixture: ComponentFixture
3 |
5 | Price
4 |-
6 |
- 7 | 15 | 16 |
- 17 | 24 | 25 |
2 |
12 |
--------------------------------------------------------------------------------
/src/app/pages/home/home.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Angular-Ecommerce-App-with-NGRX/f355805b76099aa488dfd02e764b72910bb01b8d/src/app/pages/home/home.component.scss
--------------------------------------------------------------------------------
/src/app/pages/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture
3 |
11 |
4 |
7 |
8 |
10 |
2 |
12 |
--------------------------------------------------------------------------------
/src/app/pages/product-detail-page/product-detail-page.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Angular-Ecommerce-App-with-NGRX/f355805b76099aa488dfd02e764b72910bb01b8d/src/app/pages/product-detail-page/product-detail-page.component.scss
--------------------------------------------------------------------------------
/src/app/pages/product-detail-page/product-detail-page.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductDetailPageComponent } from './product-detail-page.component';
4 |
5 | describe('ProductDetailPageComponent', () => {
6 | let component: ProductDetailPageComponent;
7 | let fixture: ComponentFixture
3 |
11 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
3 |
13 |
4 |
12 |
5 |
11 |
6 | Change Layout:
7 |
10 |
14 |
24 |
17 |
21 |
22 |
23 |
25 |
35 |
2 |
8 |
9 |
--------------------------------------------------------------------------------
/src/app/products/product-slider-dots/product-slider-dots.component.scss:
--------------------------------------------------------------------------------
1 | .owl-dots {
2 | display: none;
3 | position: absolute;
4 | bottom: -1rem;
5 | left: 0;
6 |
7 | }
8 |
9 | .owl-dots {
10 | width: 100%;
11 | text-align: center;
12 | }
13 |
14 | .owl-dots .active.owl-dot {
15 | background-color: #f28b00;
16 | border-color: #f28b00;
17 | }
18 |
19 | .owl-dots .owl-dot {
20 | display: inline-block;
21 | zoom: 1;
22 | margin: 8px 4px;
23 | border-radius: 10px;
24 | -moz-border-radius: 10px;
25 | -o-border-radius: 10px;
26 | -webkit-border-radius: 10px;
27 | -ms-webkit-radius: 10px;
28 | zoom: 1;
29 | background-color: #fff;
30 | padding: 3px;
31 | border: solid 1px #e9e9e9;
32 | cursor: pointer;
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/products/product-slider-dots/product-slider-dots.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductSliderDotsComponent } from './product-slider-dots.component';
4 |
5 | describe('ProductSliderDotsComponent', () => {
6 | let component: ProductSliderDotsComponent;
7 | let fixture: ComponentFixture
2 | ![]()
12 |
29 |
--------------------------------------------------------------------------------
/src/app/products/product/product.component.scss:
--------------------------------------------------------------------------------
1 | .product {
2 | padding-bottom: 2rem;
3 | &__img {
4 | width: 100%;
5 | height: 100%;
6 |
7 | &:focus {
8 | outline: none;
9 | }
10 | }
11 |
12 | &__text {
13 | flex: 0 0 40%;
14 | }
15 |
16 | &__link {
17 | flex: 0 0 60%;
18 | height: 60%;
19 | padding: 1rem;
20 | position: relative;
21 | cursor: pointer;
22 | }
23 |
24 | &__title {
25 | font-size: .8rem;
26 | }
27 |
28 | &__price {
29 |
30 | }
31 |
32 | &__description {
33 | font-size: 0.7rem;
34 | }
35 |
36 | &:hover {
37 | box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
38 | }
39 |
40 | &__add-to-cart {
41 | position: absolute;
42 | bottom: .8rem;
43 | width: 60%;
44 | left: 50%;
45 | opacity: 0;
46 | visibility: hidden;
47 | transform: translateX(-50%);
48 | transition: all .2s;
49 | padding: 3px 12px;
50 |
51 | }
52 |
53 | &:hover &__add-to-cart {
54 | visibility: visible;
55 | opacity: 1;
56 | }
57 |
58 | &:hover .owl-dots {
59 | display: inline-block;
60 | }
61 |
62 | }
63 |
64 | @media only screen and (max-width: 768px) {
65 | .product {
66 | height: auto !important;
67 | &__add-to-cart {
68 | visibility: visible;
69 | opacity: 1;
70 | }
71 |
72 | & .owl-dots {
73 | display: inline-block;
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/app/products/product/product.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProductComponent } from './product.component';
4 |
5 | describe('ProductComponent', () => {
6 | let component: ProductComponent;
7 | let fixture: ComponentFixture
18 |
28 | 19 | {{product.title}} 20 |
21 |${{product.price | priceFormatter}}
22 |{{product.description}}
23 | 27 |
2 |
25 |
--------------------------------------------------------------------------------
/src/app/shopping-cart/shopping-cart-container/shopping-cart-container.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheCoderDream/Angular-Ecommerce-App-with-NGRX/f355805b76099aa488dfd02e764b72910bb01b8d/src/app/shopping-cart/shopping-cart-container/shopping-cart-container.component.scss
--------------------------------------------------------------------------------
/src/app/shopping-cart/shopping-cart-container/shopping-cart-container.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ShoppingCartContainerComponent } from './shopping-cart-container.component';
4 |
5 | describe('ShoppingCartContainerComponent', () => {
6 | let component: ShoppingCartContainerComponent;
7 | let fixture: ComponentFixture
3 |
24 |
4 |
5 | Shopping cart
6 |
7 |
8 |
9 |
10 |
11 |
12 |
16 |
23 | 13 | There is no item in cart 14 |
15 |
2 |
41 |
--------------------------------------------------------------------------------
/src/app/shopping-cart/shopping-cart-item/shopping-cart-item.component.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 | .quantity {
4 | float: left;
5 | margin-right: 15px;
6 | background-color: #eee;
7 | position: relative;
8 | width: 80px;
9 | overflow: hidden
10 | }
11 |
12 | .quantity input {
13 | margin: 0;
14 | text-align: center;
15 | width: 15px;
16 | height: 15px;
17 | padding: 0;
18 | float: right;
19 | color: #000;
20 | font-size: 20px;
21 | border: 0;
22 | outline: 0;
23 | background-color: #F6F6F6
24 | }
25 |
26 | .quantity input.qty {
27 | position: relative;
28 | border: 0;
29 | width: 100%;
30 | height: 40px;
31 | padding: 10px 25px 10px 10px;
32 | text-align: center;
33 | font-weight: 400;
34 | font-size: 15px;
35 | border-radius: 0;
36 | background-clip: padding-box
37 | }
38 |
39 | .quantity .minus, .quantity .plus {
40 | line-height: 0;
41 | background-clip: padding-box;
42 | -webkit-border-radius: 0;
43 | -moz-border-radius: 0;
44 | border-radius: 0;
45 | -webkit-background-size: 6px 30px;
46 | -moz-background-size: 6px 30px;
47 | color: #bbb;
48 | font-size: 20px;
49 | position: absolute;
50 | height: 50%;
51 | border: 0;
52 | right: 0;
53 | padding: 0;
54 | width: 25px;
55 | z-index: 3
56 | }
57 |
58 | .quantity .minus:hover, .quantity .plus:hover {
59 | background-color: #dad8da
60 | }
61 |
62 | .quantity .minus {
63 | bottom: 0
64 | }
65 | .shopping-cart {
66 | margin-top: 20px;
67 | }
68 |
69 | @media only screen and (max-width: 768px) {
70 | .product-name {
71 | font-size: 1rem;
72 | margin-top: .5rem;
73 | }
74 |
75 | .product-description {
76 | font-size: 1rem;
77 | }
78 |
79 | .product-quantity-container {
80 | margin-top: .5rem;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/shopping-cart/shopping-cart-item/shopping-cart-item.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ShoppingCartItemComponent } from './shopping-cart-item.component';
4 |
5 | describe('ShoppingCartItemComponent', () => {
6 | let component: ShoppingCartItemComponent;
7 | let fixture: ComponentFixture
3 | ![prewiew]()
5 |
6 |
7 |
12 | {{product.title | shortenTitle}}
8 |9 | {{product.description}} 10 |
11 |
13 |
40 |
14 |
16 | {{product.price | priceFormatter}}$ x
15 |
17 |
32 |
18 |
21 |
27 |
30 |
31 |
33 |
38 |
39 |