diff --git a/.vscode/settings.json b/.vscode/settings.json index fb5cd63c..cde8fb71 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,7 @@ "**/.svn": true, "**/.hg": true, "**/.DS_Store": true, - // "node_modules": true, + "node_modules": true, "bin": true, "obj": true, "dist": true, diff --git a/src/app/home/category-page/category-page.component.html b/src/app/home/category-page/category-page.component.html index 820ed17d..db538300 100644 --- a/src/app/home/category-page/category-page.component.html +++ b/src/app/home/category-page/category-page.component.html @@ -1,10 +1,9 @@ +
+ +
+
- -
- -
-
  • diff --git a/src/app/home/content/product-list/product-list.component.html b/src/app/home/content/product-list/product-list.component.html index bd92ea18..77656e1c 100644 --- a/src/app/home/content/product-list/product-list.component.html +++ b/src/app/home/content/product-list/product-list.component.html @@ -16,9 +16,9 @@
-

- FREE 1-2 day shipping on this item -

+ + FREE 1-2 day shipping over {{appConfig.currency_symbol}}{{appConfig.freeShippingAmount}} +
@@ -52,8 +52,8 @@
-

- FREE 1-2 day shipping on this item +

+ FREE 1-2 day shipping at {{appConfig.currency_symbol}}{{appConfig.freeShippingAmount}}

@@ -64,7 +64,7 @@
-
+
diff --git a/src/app/home/content/product-list/product-list.component.scss b/src/app/home/content/product-list/product-list.component.scss index 435ba4f0..2f1f4890 100644 --- a/src/app/home/content/product-list/product-list.component.scss +++ b/src/app/home/content/product-list/product-list.component.scss @@ -47,7 +47,7 @@ background-color: transparent; color: $gray-900; .searchimg { - height: 220px; + height: 130px; } .product-thumb { height: 240px; @@ -67,6 +67,9 @@ .ngrating { position: relative; left: -10px; + @media screen and (min-width: 320px) and (max-width: 768px) { + transform: scale(0.7) translateX(-16%); + } } .product-brand, .product-product { @@ -86,7 +89,7 @@ .product-price { font-size: 1.3em; line-height: 1.2em; - color: $theme-action-sub-color2 - 50; + color: $red; margin: 10px 0 0; white-space: nowrap; font-weight: 500; @@ -104,21 +107,24 @@ text-align: center; @media screen and (min-width: 320px) and (max-width: 768px) { background-color: $white; - color: $gray-800; - font-size: 1em; + color: $gray-400; margin-top: 0px; + width: 60%; + margin: 0 auto; + font-size: 0.7rem; } } .shipping { - font-size: 0.8em; + font-size: 0.7em; font-weight: 400; text-align: left; margin-top: 15px; color: $black; margin-bottom: 0px; @media screen and (min-width: 320px) and (max-width: 768px) { - margin-bottom: 10px; + margin:0; + padding: 5px 0; } } @@ -128,4 +134,4 @@ color: $gray-700; text-decoration: line-through; margin-left: 10px; -} \ No newline at end of file +} diff --git a/src/app/home/content/product-list/product-list.component.ts b/src/app/home/content/product-list/product-list.component.ts index 0c3507a8..9d44c5e7 100644 --- a/src/app/home/content/product-list/product-list.component.ts +++ b/src/app/home/content/product-list/product-list.component.ts @@ -3,6 +3,7 @@ import { AppState } from './../../../interfaces'; import { Store } from '@ngrx/store'; import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; +import { environment } from '../../../../environments/environment'; @Component({ selector: 'app-product-list', @@ -19,7 +20,8 @@ export class ProductListComponent implements OnInit { page: number; queryParams: any; screenwidth; - isMobile + isMobile; + appConfig = environment.config; constructor( private store: Store, private checkoutActions: CheckoutActions, diff --git a/src/app/landing/lp-banner/lp-banner.component.scss b/src/app/landing/lp-banner/lp-banner.component.scss index ed9c4fbd..6c6fbebb 100644 --- a/src/app/landing/lp-banner/lp-banner.component.scss +++ b/src/app/landing/lp-banner/lp-banner.component.scss @@ -1,10 +1,9 @@ @import "../../shared/scss/_selected_theme_variables.scss"; - :host { /deep/ .banner { .bannerStyle { &h1 { - background-color: #ccc; + background-color: $gray-10; min-height: 300px; text-align: center; line-height: 300px; @@ -24,7 +23,7 @@ position: relative; left: 0; box-sizing: border-box; - background-color: white; + background-color: $white; margin: 0 auto -28px; align-self: center; width: fit-content; @@ -42,14 +41,14 @@ .ngucarouselPoint li { display: inline-block; border-radius: 999px; - background-color: $theme-action-sub-color1; + background-color: $theme-main-color; padding: 5px; margin: 0 3px; transition: .4s ease all; } .ngucarouselPoint li.active { - background-color: white; - border: 1px solid $theme-action-sub-color1; + background-color: $white; + border: 1px solid $theme-main-color; width: 10px; } } diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.html b/src/app/product/components/product-detail-page/product-details/product-details.component.html index a2c798ea..7b5f176b 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.html +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.html @@ -1,37 +1,108 @@ -
-
- - +
+
+
+ + +
+
+ + +
-
- - +
+
+

+ Description +

+ + +
-
-
-
-

- Description -

- - +
+
+

+ Similar products +

+ +
-
-
-
-

- Similar products -

- +
+
+

+ Related products +

+ +
+ +
-
-
-

- Related products -

- +
+
+
+

{{product.name}}

+ +
+
+
+
+ + By : + ABC + +
+
+
+ + + {{product.reviews_count }} + +
+
+
+
+
+ + +
+
+ + +
+
+
+
+

+ Description +

+ + +
+
+
+
+

+ Similar products +

+ +
+
+
+
+

+ Related products +

+ +
+ +
- diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.scss b/src/app/product/components/product-detail-page/product-details/product-details.component.scss index 6a7a1ccb..750faa59 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.scss +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.scss @@ -5,7 +5,12 @@ h1 { font-size: 1.7em; - color: $gray-900 + color: $gray-900; + @media screen and(min-width: 310px) and(max-width: 768px) { + font-size: 1.2em; + line-height: 1.2em; + font-weight: 700; + } } .pdp-add-to-bag { @@ -17,6 +22,17 @@ h1 { color: $white; } +.rating { + transform: scale(0.7); +} + +.hide-phone { + @media screen and(min-width: 310px) and(max-width: 768px) { + display: block; + text-align: right + } +} + .pdp-button { border-radius: 3px; outline: 0; @@ -98,15 +114,14 @@ h1 { text-align: justify; } } - .review-sort-filter { border-top: 1px solid $gray-10; border-top: 1px solid $gray-10; background-color: $gray-200; padding: 1rem; - } } + .product-box { border-radius: 5px; margin-top: 1rem; @@ -118,4 +133,4 @@ h1 { &:hover { border-color: $black - 200; } -} \ No newline at end of file +} diff --git a/src/app/product/components/product-detail-page/product-details/product-details.component.ts b/src/app/product/components/product-detail-page/product-details/product-details.component.ts index c2bfe701..60e10d8b 100644 --- a/src/app/product/components/product-detail-page/product-details/product-details.component.ts +++ b/src/app/product/components/product-detail-page/product-details/product-details.component.ts @@ -35,6 +35,8 @@ export class ProductDetailsComponent implements OnInit { variantId: any; productID: any; productdata: any; + isMobile = false; + screenwidth: any; isAuthenticated: boolean; similarProducts$: Observable; relatedProducts$: Observable; @@ -51,6 +53,8 @@ export class ProductDetailsComponent implements OnInit { ) { } ngOnInit() { + this.screenwidth = window.innerWidth; + this.calculateInnerWidth(); if (this.product.has_variants) { const product = this.product.variants[0]; @@ -62,8 +66,7 @@ export class ProductDetailsComponent implements OnInit { this.product.price = product.price; this.product.master.is_orderable = product.is_orderable; this.product.master.cost_price = product.cost_price; - } - else { + } else { this.description = this.product.description; this.images = this.product.master.images; this.variantId = this.product.master.id; @@ -89,8 +92,12 @@ export class ProductDetailsComponent implements OnInit { this.store.dispatch(this.productsActions.getProductReviews(this.productID)); this.reviewProducts$ = this.store.select(productReviews); } + calculateInnerWidth() { + if (this.screenwidth <= 800) { + this.isMobile = this.screenwidth; + } + } - ngOnChanges() { } addToCart(quantitiy) { this.store.dispatch( diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.html b/src/app/product/components/product-detail-page/product-images/product-images.component.html index ba678d65..b10c15d6 100644 --- a/src/app/product/components/product-detail-page/product-images/product-images.component.html +++ b/src/app/product/components/product-detail-page/product-images/product-images.component.html @@ -1,16 +1,32 @@ -
-
-
-
- + +
+
+
+
+
+ +
+
+
+ +
-
- - -
+
+
+
+
+ + + + + + + + +
diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.scss b/src/app/product/components/product-detail-page/product-images/product-images.component.scss index f37627ac..cea999ce 100644 --- a/src/app/product/components/product-detail-page/product-images/product-images.component.scss +++ b/src/app/product/components/product-detail-page/product-images/product-images.component.scss @@ -7,6 +7,13 @@ margin: auto; height: 67%; object-fit: scale-down; + @media only screen and (min-width: 320px) and (max-width: 767px) { + width: auto; + margin: auto; + height: auto; + object-fit: scale-down; + mix-blend-mode: darken; + } } .thumbnails-vertical-container { width: 60px; diff --git a/src/app/product/components/product-detail-page/product-images/product-images.component.ts b/src/app/product/components/product-detail-page/product-images/product-images.component.ts index 1ad63e7a..650c82fa 100644 --- a/src/app/product/components/product-detail-page/product-images/product-images.component.ts +++ b/src/app/product/components/product-detail-page/product-images/product-images.component.ts @@ -2,6 +2,7 @@ import { Image } from './../../../../core/models/image'; import { environment } from './../../../../../environments/environment'; import { Product } from './../../../../core/models/product'; import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core'; +import { NguCarousel } from '@ngu/carousel'; const img1 = require('../../../../../assets/thumbnail.jpg'); const img2 = require('../../../../../assets/thumbnail2.jpg'); @@ -26,12 +27,58 @@ export class ProductImagesComponent implements OnInit { }, settings: { zoom: 4, - gap: -250 } }; + @Input() isMobile; + public carouselOne: NguCarousel; constructor() { } - ngOnInit() { } + ngOnInit() { + this.carouselOne = { + grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 }, + slide: 1, + speed: 400, + interval: 4000, + point: { + visible: true, + pointStyles: ` + .ngucarouselPoint { + list-style-type: none; + padding: 3px; + white-space: nowrap; + overflow: auto; + position: relative; + bottom: 27px; + left: 0; + box-sizing: border-box; + background-color: white; + margin: 0 auto -28px; + align-self: center; + width: fit-content; + border-radius: 5px 5px 0 0; + } + .ngucarouselPoint li { + display: inline-block; + border-radius: 999px; + background-color: rgba(0, 0, 255, 0.55); + padding: 5px; + margin: 0 3px; + transition: .4s ease all; + } + .ngucarouselPoint li.active { + background-color: white; + border: 1px solid rgba(0, 0, 255, 0.55); + width: 10px; + } + ` + }, + load: 2, + touch: true, + loop: true, + custom: 'banner' + } + } + getProductImageUrl(url) { return url; diff --git a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss index c568b963..bebf36ec 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss +++ b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.scss @@ -1,17 +1,19 @@ @import "../../../../../shared/scss/selected_theme_variables"; - #buybox { float: left; width: 40%; @media only screen and (min-width: 320px) and (max-width: 767px) { width:100% } - .bordered { background-color: $gray-100; border: 1px solid $gray-10; -webkit-border-radius: 5px; border-radius: 5px; + @media only screen and (min-width: 320px) and (max-width: 767px) { + -webkit-border-radius:0; + border-radius: 0; + } .buybox__favorite { cursor: pointer; font-size: 1.1rem; @@ -87,4 +89,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts index d751e677..99d30e35 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts +++ b/src/app/product/components/product-detail-page/product-price-info/product-count/product-count.component.ts @@ -46,7 +46,7 @@ export class ProductCountComponent implements OnInit { this.onAddToCart.emit(count); } - buyNow(count: number){ + buyNow(count: number) { this.onAddToCart.emit(count); this.router.navigate(['checkout', 'cart']); } diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html index d1a9824c..903948c3 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html +++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.html @@ -1,63 +1,102 @@ -
-

{{product.name}}

- -
-
-
-
- - - {{product.reviews_count }} Reviews - +
+
+

{{product.name}}

+ +
+
+
+
+ + + {{product.reviews_count }} Reviews + +
-
-
-
-
-
-
    -
  • -

    - List Price:

    -

    {{product.currency}}{{product.master.cost_price}}

    -
    • -
  • -

    Price:

    -

    - - {{product.display_price}} - FREE 1-2 Day - Shipping on this item - -

    -
    • -
  • -

    You Save:

    -

    - {{product.currency}}{{discount}} ({{discountPercent}}) -

    -
    • -
+
+
+
+
+
    +
  • +

    + List Price:

    +

    {{product.currency}}{{product.master.cost_price}}

    +
    • +
  • +

    Price:

    +

    + + {{product.display_price}} + FREE 1-2 Day + Shipping on this item + +

    +
    • +
  • +

    You Save:

    +

    + {{product.currency}}{{discount}} ({{discountPercent}}) +

    +
    • +
+
+
- -
- +
+
+
+
+
+
+
+
    +
  • +

    + List Price:

    +

    {{product.currency}}{{product.master.cost_price}}

    +
    • +
  • +

    Price:

    +

    + + {{product.display_price}} + FREE 1-2 Day + Shipping on this item + +

    +
    • +
  • +

    You Save:

    +

    + {{product.currency}}{{discount}} ({{discountPercent}}) +

    +
    • +
+
+ +
+
+ +
-
\ No newline at end of file +
diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss index 4cde082f..ae3c369a 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss +++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.scss @@ -1,191 +1,193 @@ @import "../../../../shared/scss/selected_theme_variables"; .title { - color: $gray-800; - padding-top: 5px; - font-weight: 600; - font-size: 2em; - line-height: 1.5em; - font-family: $primary-font; - display: inline; + color: $gray-800; + padding-top: 5px; + font-weight: 600; + font-size: 2em; + line-height: 1.5em; + font-family: $primary-font; + display: inline; } .product-subtitle { - display: inline-block; - font-size: 1.5em; - margin-left: 10px; - a { - color: $theme-main-sub-color4 - 100; - } + display: inline-block; + font-size: 1.5em; + margin-left: 10px; + a { + color: $theme-main-sub-color4 - 100; + } } .selling-price { - font-size: 16px; - margin: 10px 0; + font-size: 16px; + margin: 10px 0; } .vatInfo { - color: $gray-800; - font-size: 13px; + color: $gray-800; + font-size: 13px; } .product-header-extras { - .ugc { - float: left; - a { - color: $theme-main-sub-color4 - 100 - } - margin: 3px 0; - color:$theme-main-sub-color4; - font-family: Roboto, - sans-serif; - font-weight: 400; - font-size: 10px; - -webkit-font-smoothing: antialiased; - font-size: 1em; + .ugc { + float: left; + a { + color: $theme-main-sub-color4 - 100 } - .product-header-extras__qna { - float: left; - a { - color: $theme-main-sub-color4 - 100 - } - color:$theme-main-sub-color4; - font-size: 1em; - line-height: 1em; - border-left: 1px solid $gray-10; - margin-top: 5px; + margin: 3px 0; + color:$theme-main-sub-color4; + font-family: Roboto, + sans-serif; + font-weight: 400; + font-size: 10px; + -webkit-font-smoothing: antialiased; + font-size: 1em; + } + .product-header-extras__qna { + float: left; + a { + color: $theme-main-sub-color4 - 100 } + color:$theme-main-sub-color4; + font-size: 1em; + line-height: 1em; + border-left: 1px solid $gray-10; + margin-top: 5px; + } } .buybox-wrapper { - color: $gray-800; - #product-vitals { + color: $gray-800; + widows: 100%; + #product-vitals { + float: left; + width: 60%; + @media only screen and (min-width: 320px) and (max-width: 767px) { + width:100%; + padding-right: 0; + } + padding-right: 15px; + margin-bottom: 10px; + .product-pricing { + margin-top: 0; + margin-bottom: 0; + padding-right: 0; + padding-left: 0; + list-style-type: none; + border-bottom: 1px solid $gray-10; + padding: 5px 0 15px; + overflow: hidden; + li:first-child, + li:last-child { + padding-bottom: 0; + } + li { + margin: 0; + padding-bottom: 25px; + } + .title { + font-size: 1em; + line-height: 1; + color: $gray-600; + font-weight: normal; + width: auto; + width: 85px; float: left; - width: 60%; - @media only screen and (min-width: 320px) and (max-width: 767px) { - width:100% - } - padding-right: 15px; + margin: 0; + } + .list-price .price { + font-size: 1.4rem; + line-height: 1; + color: $red; + text-decoration: line-through; + } + .price { + margin-left: 85px; + display: block; + } + p { + margin-top: 0; margin-bottom: 10px; - .product-pricing { - margin-top: 0; - margin-bottom: 0; - padding-right: 0; - padding-left: 0; - list-style-type: none; - border-bottom: 1px solid $gray-10; - padding: 5px 0 15px; - overflow: hidden; - li:first-child, - li:last-child { - padding-bottom: 0; - } - li { - margin: 0; - padding-bottom: 25px; - } - .title { - font-size: 1em; - line-height: 1; - color: $gray-600; - font-weight: normal; - width: auto; - width: 85px; - float: left; - margin: 0; - } - .list-price .price { - font-size: 1.4rem; - line-height: 1; - color: $black; - text-decoration: line-through; - } - .price { - margin-left: 85px; - display: block; - } - p { - margin-top: 0; - margin-bottom: 10px; - } - .our-price { - .price { - font-size: 1.6em; - font-weight: 600; - color: $theme-action-sub-color4; - line-height: 12px; - padding-top: 11px; - span { - float: left; - display: grid; - } - } - .title { - padding-top: 10px; - } - } - .free-shipping { - font-size: 12px; - line-height: 13px; - font-weight: 500; - color: $gray-800; - margin: -8px 0 0 10px; - text-transform: uppercase; - width: 8rem; - } - .you-save { - .title { - margin-bottom: 0; - } - .price { - font-size: 1.4rem; - margin-bottom: 0; - line-height: 1; - color: $theme-action-sub-color4; - } - } + } + .our-price { + .price { + font-size: 1.6em; + font-weight: 600; + color: $red; + line-height: 12px; + padding-top: 11px; + span { + float: left; + display: grid; + } + } + .title { + padding-top: 10px; } - #featured-promotions { - .promotion { - margin: 5px 0; - text-align: left; - .title { - font-size: 1em; - font-weight: 600; - text-align: right; - color: $theme-action-sub-color2 - 40; - padding: 11px 5px 0 0; - line-height: 1; - width: auto; - width: 85px; - float: left; - } - .value { - margin-left: 85px; - display: block; - } - .autoship-pricing { - font-weight: 600; - color: $theme-action-sub-color4; - font-size: 1.714em; - margin: 0; - .autoship-percent { - font-size: 14px; - font-weight: 400; - padding-left: 5px; - } - } - .title span { - color: $theme-action-color; - font-size: 0.8em; - } - } + } + .free-shipping { + font-size: 12px; + line-height: 13px; + font-weight: 500; + color: $gray-800; + margin: -8px 0 0 10px; + text-transform: uppercase; + width: 8rem; + } + .you-save { + .title { + margin-bottom: 0; } + .price { + font-size: 1.4rem; + margin-bottom: 0; + line-height: 1; + color: $red; + } + } } - #buybox { - float: left; - width: 40%; - @media only screen and (min-width: 320px) and (max-width: 767px) { - width:100% + #featured-promotions { + .promotion { + margin: 5px 0; + text-align: left; + .title { + font-size: 1em; + font-weight: 600; + text-align: right; + color: $red; + padding: 11px 5px 0 0; + line-height: 1; + width: auto; + width: 85px; + float: left; } + .value { + margin-left: 85px; + display: block; + } + .autoship-pricing { + font-weight: 600; + color: $red; + font-size: 1.714em; + margin: 0; + .autoship-percent { + font-size: 14px; + font-weight: 400; + padding-left: 5px; + } + } + .title span { + color: $red; + font-size: 0.8em; + } + } } -} \ No newline at end of file + } + #buybox { + float: left; + width: 40%; + @media only screen and (min-width: 320px) and (max-width: 767px) { + width:100% + } + } +} diff --git a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts index 433167c7..b903858b 100644 --- a/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts +++ b/src/app/product/components/product-detail-page/product-price-info/product-price-info.component.ts @@ -10,7 +10,8 @@ import { Product } from '../../../../core/models/product'; styleUrls: ['./product-price-info.component.scss'] }) export class ProductPriceInfoComponent implements OnInit { - @Input() product + @Input() product; + @Input() isMobile; @Output() onAddToCart = new EventEmitter(); @Output() onMarkAsFavorites = new EventEmitter(); @Output() selectedVariant = new EventEmitter(); diff --git a/src/app/product/components/product-detail-page/product-review/product-review.component.scss b/src/app/product/components/product-detail-page/product-review/product-review.component.scss index aa5ea72b..dac58c24 100644 --- a/src/app/product/components/product-detail-page/product-review/product-review.component.scss +++ b/src/app/product/components/product-detail-page/product-review/product-review.component.scss @@ -104,6 +104,7 @@ h1 { padding-top: 1rem; text-align: justify; color: $gray-900; + word-wrap: break-word } } .review-sort-filter { diff --git a/src/app/product/components/product-detail-page/product-variants/product-variants.component.html b/src/app/product/components/product-detail-page/product-variants/product-variants.component.html index 9211af2a..d150a985 100644 --- a/src/app/product/components/product-detail-page/product-variants/product-variants.component.html +++ b/src/app/product/components/product-detail-page/product-variants/product-variants.component.html @@ -16,7 +16,7 @@
{{ variant.key }} --> -
+
{{ variant.key }}
diff --git a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html index 5e99653e..1c8ad196 100644 --- a/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html +++ b/src/app/product/components/product-detail-page/write-product-review/write-product-review.component.html @@ -3,10 +3,10 @@

Write Review

Review Submitted!

-
+
-
+
@@ -27,7 +27,7 @@

{{product.name}}

- +
@@ -38,12 +38,12 @@

Thanks for your review!

Your review has been submitted.Please note that your review may take up to 48 hours to appear.

- +
-
+

Writing Guidelines

    diff --git a/src/app/shared/components/product-slider/product-slider.component.html b/src/app/shared/components/product-slider/product-slider.component.html index 1ecadc65..d3f02b13 100644 --- a/src/app/shared/components/product-slider/product-slider.component.html +++ b/src/app/shared/components/product-slider/product-slider.component.html @@ -1,11 +1,10 @@
    - - + + + + diff --git a/src/app/shared/components/product-slider/product-slider.component.scss b/src/app/shared/components/product-slider/product-slider.component.scss index 5214fe39..faabd8c9 100644 --- a/src/app/shared/components/product-slider/product-slider.component.scss +++ b/src/app/shared/components/product-slider/product-slider.component.scss @@ -62,9 +62,6 @@ background-repeat: no-repeat; background-size: 8px; cursor: pointer; - @media (min-width: 768px) { - display: block !important; - } } .leftRs { diff --git a/src/app/shared/components/product-slider/product-slider.component.spec.ts b/src/app/shared/components/product-slider/product-slider.component.spec.ts index 83cf0b1b..38262ade 100644 --- a/src/app/shared/components/product-slider/product-slider.component.spec.ts +++ b/src/app/shared/components/product-slider/product-slider.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { LpFavoritesComponent } from './lp-favorites.component'; +import { ProductSliderComponent } from './product-slider.component'; -describe('LpFavoritesComponent', () => { - let component: LpFavoritesComponent; - let fixture: ComponentFixture; +describe('ProductSliderComponent', () => { + let component: ProductSliderComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ LpFavoritesComponent ] + declarations: [ ProductSliderComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(LpFavoritesComponent); + fixture = TestBed.createComponent(ProductSliderComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/shared/components/product-slider/product-slider.component.ts b/src/app/shared/components/product-slider/product-slider.component.ts index b4d34b28..292405b6 100644 --- a/src/app/shared/components/product-slider/product-slider.component.ts +++ b/src/app/shared/components/product-slider/product-slider.component.ts @@ -13,7 +13,7 @@ export class ProductSliderComponent implements OnInit { constructor() { this.carouselOne = { - grid: {xs: 2, sm: 3, md: 3, lg: 5, all: 0}, + grid: {xs: 1, sm: 1, md: 2, lg: 5, all: 0}, slide: 2, speed: 400, animation: 'lazy', diff --git a/src/app/shared/directives/zoomable.directive.ts b/src/app/shared/directives/zoomable.directive.ts index c4ee6723..6a5675ff 100644 --- a/src/app/shared/directives/zoomable.directive.ts +++ b/src/app/shared/directives/zoomable.directive.ts @@ -234,8 +234,8 @@ export class ZoomableDirective implements OnInit { this.renderer.setElementStyle(this.zoomView, 'backgroundPosition', `-${xRatio * bgWidth}px -${yRatio * bgHeight}px`); this.renderer.setElementStyle(this.zoomView, 'backgroundSize', `${bgWidth}px ${bgHeight}px`); this.renderer.setElementStyle(this.zoomView, 'backgroundRepeat', 'no-repeat'); - this.renderer.setElementStyle(this.zoomView, 'height', '500px'); - this.renderer.setElementStyle(this.zoomView, 'width', '500px'); + this.renderer.setElementStyle(this.zoomView, 'height', '400px'); + this.renderer.setElementStyle(this.zoomView, 'width', '700px'); } private destroyViews() { diff --git a/src/index.html b/src/index.html index d61e9dfa..18529b2d 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,7 @@ - +