Product detail ui fixes 159293281 (#206)

Why? Feature: 1.Work on the product detail page for mobile. 2. Work on the write review page for the mobile. 3. Work on the search list page for the mobile. 4. Work on the product detail page mobile slider. This change addresses the need by: In this all changes are done. [delivers #159293281]
aviabird · Jul 30, 2018 · be50b61 · be50b61
1 parent fa4e4ac
commit be50b61
Show file tree

Hide file tree

Showing 26 changed files with 538 additions and 328 deletions.
diff --git 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
@@ -1,10 +1,9 @@
+<div class="col-md-12 p-0">
+  <img src={{selectedCategory.image_link}} style="display: block; width: 100%;">
+</div>
+
 <div class="container catgeory" *ngIf="selectedTaxons$ | async; let selectedTaxons">
   <div class="row" *ngIf="productList$ | async; let productlist">
-
-    <div class="col-md-12 p-0">
-      <img src={{selectedCategory.image_link}} style="display: block; width: 100%;">
-    </div>
-
     <div class="col-md-3 sidebar" *ngIf="productlist[0].length > 0">
       <ul class="list-group">
         <li *ngFor="let taxon of selectedTaxons.taxons">

diff --git 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 @@
             </span>
           </span>
         </div>
-        <p class="shipping">
-          FREE 1-2 day shipping on this item
-        </p>
+        <small class="shipping">
+          FREE 1-2 day shipping over {{appConfig.currency_symbol}}{{appConfig.freeShippingAmount}}
+        </small>
         <div class="ngrating my-3">
           <ngx-input-star-rating disabled="true" value="{{product.avg_rating }}"></ngx-input-star-rating>
         </div>
@@ -52,8 +52,8 @@
                 </span>
               </span>
             </div>
-            <p class="shipping">
-              FREE 1-2 day shipping on this item
+            <p class="shipping border-top border-bottom mt-1 mb-2">
+                <b>FREE 1-2 day</b> shipping at {{appConfig.currency_symbol}}{{appConfig.freeShippingAmount}}
             </p>
             <div class="ngrating">
               <ngx-input-star-rating disabled="true" value="{{product.avg_rating }}"></ngx-input-star-rating>
@@ -64,7 +64,7 @@
     </a>
   </div>
 </div>
-<div class="col-12">
+<div class="col-12 mt-3">
   <div class="row">
     <pagination *ngIf="paginationData.total_count > paginationData.per_page" [totalItems]="paginationData.total_count" [itemsPerPage]="paginationData.per_page"
       [(ngModel)]="paginationData.current_page" (pageChanged)="pageChanged($event)" class="m-auto"></pagination>

diff --git 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;
-}
+}
diff --git 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<AppState>,
     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
@@ -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/...app/product/components/product-detail-page/product-details/product-details.component.html b/...app/product/components/product-detail-page/product-details/product-details.component.html
@@ -1,37 +1,108 @@
-<div itemscope itemtype="https://schema.org/Product" *ngIf="product != null" class="row pt-5">
-  <div class="col-12 col-md-5">
-    <app-image-container [images]="images" class="col-12" [selectedImage]="images[0]">
-    </app-image-container>
+<div *ngIf="!isMobile">
+  <div itemscope itemtype="https://schema.org/Product" *ngIf="product != null" class="row pt-5">
+    <div class="col-12 col-md-5">
+      <app-image-container [images]="images"  class="col-12" [selectedImage]="images[0]">
+      </app-image-container>
+    </div>
+    <div class="col-md-7 col-12">
+      <app-product-price-info [product]="product" (onAddToCart)="addToCart($event)" (onMarkAsFavorites)="markAsFavorite()" (selectedVariant)="selectedVariant($event)"
+        class="row">
+      </app-product-price-info>
+    </div>
   </div>
-  <div class="col-md-7 col-12">
-    <app-product-price-info [product]="product" (onAddToCart)="addToCart($event)" (onMarkAsFavorites)="markAsFavorite()" (selectedVariant)="selectedVariant($event)"
-      class="row">
-    </app-product-price-info>
+  <div class="row">
+    <div class="col-12">
+      <h1 class="mt-2">
+        Description
+      </h1>
+      <app-product-description [description]="product.description" class="row">
+      </app-product-description>
+    </div>
   </div>
-</div>
-<div class="row">
-  <div class="col-12">
-    <h1 class="mt-2">
-      Description
-    </h1>
-    <app-product-description [description]="product.description" class="row">
-    </app-product-description>
+  <div *ngIf="similarProducts$ | async; let similarProducts">
+    <div class="slider" *ngIf="similarProducts.length >0">
+      <h2>
+        Similar products
+      </h2>
+      <app-product-slider [productsList]="similarProducts"></app-product-slider>
+    </div>
   </div>
-</div>
-<div *ngIf="similarProducts$ | async; let similarProducts">
-  <div class="slider" *ngIf="similarProducts.length >0">
-    <h2>
-      Similar products
-    </h2>
-    <app-product-slider [productsList]="similarProducts"></app-product-slider>
+  <div *ngIf="relatedProducts$ | async; let relatedProducts">
+    <div class="slider" *ngIf="relatedProducts.length >0">
+      <h2>
+        Related products
+      </h2>
+      <app-product-slider [productsList]="relatedProducts"></app-product-slider>
+    </div>
   </div>
+  <app-product-review [product]="product" [reviewList]='reviewProducts$ | async'></app-product-review>
+
 </div>
-<div *ngIf="relatedProducts$ | async; let relatedProducts">
-  <div class="slider" *ngIf="relatedProducts.length >0">
-    <h2>
-      Related products
-    </h2>
-    <app-product-slider [productsList]="relatedProducts"></app-product-slider>
+<div *ngIf="isMobile">
+  <div itemscope itemtype="https://schema.org/Product" *ngIf="product != null" class="row pt-2">
+    <div class="col-12 ">
+      <h1 itemprop="name" class="title">{{product.name}}</h1>
+      <!-- <div class="product-subtitle">
+            <a href="#">
+              By
+              #To-do read from product properties.
+              <span itemprop="brand"></span>
+            </a>
+          </div> -->
+    </div>
+    <div class="col-12">
+      <div class="row">
+        <div class="product-subtitle col-5 pr-0">
+          <a href="#">
+            By :
+            <span> ABC </span>
+          </a>
+        </div>
+        <div class="product-header-extras col-7 p-0">
+          <div class="ugc pr-3">
+            <a class="hide-phone js-revScrollTo">
+              <ngx-input-star-rating disabled="true" value="{{product.avg_rating }}" class="rating" required></ngx-input-star-rating>
+              {{product.reviews_count }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-5">
+      <app-image-container [images]="images"  [isMobile]='isMobile' class="col-12" [selectedImage]="images[0]">
+      </app-image-container>
+    </div>
+    <div class="col-md-7 col-12">
+      <app-product-price-info [product]="product" [isMobile]='isMobile' (onAddToCart)="addToCart($event)" (onMarkAsFavorites)="markAsFavorite()" (selectedVariant)="selectedVariant($event)"
+        class="row">
+      </app-product-price-info>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <h1 class="mt-2">
+        Description
+      </h1>
+      <app-product-description [description]="product.description" class="row">
+      </app-product-description>
+    </div>
+  </div>
+  <div *ngIf="similarProducts$ | async; let similarProducts">
+    <div class="slider" *ngIf="similarProducts.length >0">
+      <h2>
+        Similar products
+      </h2>
+      <app-product-slider [productsList]="similarProducts"></app-product-slider>
+    </div>
+  </div>
+  <div *ngIf="relatedProducts$ | async; let relatedProducts">
+    <div class="slider" *ngIf="relatedProducts.length >0">
+      <h2>
+        Related products
+      </h2>
+      <app-product-slider [productsList]="relatedProducts"></app-product-slider>
+    </div>
   </div>
+  <app-product-review [product]="product" [reviewList]='reviewProducts$ | async'></app-product-review>
+
 </div>
-<app-product-review [product]="product" [reviewList]='reviewProducts$ | async'></app-product-review>
diff --git a/...app/product/components/product-detail-page/product-details/product-details.component.scss b/...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;
   }
-}
+}