Product list Ui (#234)

Why? Feature: product list UI listing. Added menu links in category drop-down menu This change addresses the need by: The UI of the product list page is changed [delivers #159542721]
aviabird · Aug 21, 2018 · 1e82105 · 1e82105
1 parent 26eeebf
commit 1e82105
Show file tree

Hide file tree

Showing 23 changed files with 233 additions and 69 deletions.
diff --git a/src/app/checkout/cart/components/empty-cart/empty-cart.component.html b/src/app/checkout/cart/components/empty-cart/empty-cart.component.html
@@ -3,5 +3,6 @@
     <i class="fa fa-cart-arrow-down fa-5x" aria-hidden="true"></i>
   </div>
   <div class="empty-cart-message">Your Shopping Bag is empty</div>
-  <button type="button" class="btn themebtnprimary themebtnprimarysade col-8 col-sm-3 m-auto" [routerLink]="['/']">Coutinue Shopping</button>
+  <button type="button" class="btn themebtnprimary themebtnprimarysade col-8 col-sm-3 m-auto m-b-4"
+   [routerLink]="['/']">Continue Shopping</button>
 </div>
diff --git a/src/app/checkout/order-failed/order-failed.component.html b/src/app/checkout/order-failed/order-failed.component.html
@@ -83,7 +83,7 @@ <h3>Shipping</h3>
       </div>
     </div>
   </div>
-  <div class="order-items shadow-sm mt-3 mb-3">
+  <!-- <div class="order-items shadow-sm mt-3 mb-3">
     <div class="col-sm">
       <h3>Item(s)</h3>
       <div class="row" *ngFor="let line_item of orderDetails.line_items">
@@ -97,5 +97,27 @@ <h3>Item(s)</h3>
         </div>
       </div>
     </div>
+  </div> -->
+  <div class="order-items shadow-sm mt-3 mb-3">
+    <h3>Item(s)</h3>
+    <div class="row">
+      <div *ngFor="let item of  orderDetails.line_items" class="lineitems col-12 col-sm-6">
+        <div class="row">
+          <div class="col-12 pr-0 col-sm-2">
+            <a [routerLink]="['/', item.variant.slug]" class="col-sm col-3">
+              <img [src]="getProductImageUrl(item)">
+            </a>
+          </div>
+          <div class="col-12 col-sm-8" [routerLink]="['/', item.variant.slug]">
+            <div class="lineitems-name"> {{item.variant.name}}</div>
+            <div class="lineitems-info"> {{item.variant.options_text}}</div>
+          </div>
+          <div class="col-12 col-sm-2">
+            <div class="price">{{item.display_amount}}</div>
+            <div class="qty"> QTY: {{item.quantity}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/home/content/content-header/content-header.component.html b/src/app/home/content/content-header/content-header.component.html
@@ -25,7 +25,9 @@ <h4 title="men casual shirts">Showing {{paginationInfo.count}} of {{paginationIn
   </div>
 </div>
 
-<div class="container content " *ngIf="screenWidth">
+<div class="container content content-device" *ngIf="screenWidth">
+
+
   <div class="row">
     <div class="col-6 pl-1 pr-1  text-right">
       <button type="button" class="search-btns col-12 p-0 px-1 py-3 shadow-sm" (click)="sortModalShow()">
@@ -82,4 +84,9 @@ <h4 title="men casual shirts">Showing {{paginationInfo.count}} of {{paginationIn
         </div>
       </div>
     </div>
+    <div class="col-12 text-center">
+      <span class="showcount">
+        Showing {{paginationInfo.count}} of {{paginationInfo.total_count}} products.
+      </span>
+    </div>
   </div>
diff --git a/src/app/home/content/content-header/content-header.component.scss b/src/app/home/content/content-header/content-header.component.scss
@@ -2,8 +2,8 @@
 .content {
   .search-btns {
     text-transform: uppercase;
-    margin-bottom: 2rem;
-    @include button-size(10px, 10px, 1em, 1em, 7px);
+    margin-bottom: 10px;
+    @include button-size(10px, 10px, 0.7em, 1em, 7px);
     color: $black;
     border: 1px solid $gray-600;
     @include gradient-y($start-color: $gray-100, $end-color: $gray-300, $start-percent: 0%, $end-percent: 100%)
@@ -14,13 +14,21 @@
     text-align: left;
   }
   .dropdown-menu {
-    width: 80%;
-    right: 18px !important
+    width: 17em;
+    right: 18px !important;
+    li {
+      border-bottom: 0 solid
+    }
   }
   .dropdown-toggle::after {
-    right: -50%;
     display: inline-block;
-    position: relative;
+    position: absolute;
+    right: 10px;
+    top: 15px;
+  }
+  .dropdown-item.active,
+  .dropdown-item:active {
+    background-color: $gray-100
   }
   .queried-for {
     overflow: hidden; // display: inline-block;
@@ -234,7 +242,7 @@ ul {
       box-shadow: none;
     }
     a {
-      padding: 0.8rem .1rem;
+      padding: 0.8rem .7rem;
       border-bottom: 1px solid $gray-10;
       color: $gray-900;
       display: block;
@@ -249,6 +257,9 @@ ul {
         position: absolute;
         background-size: 10px;
       }
+      &:focus {
+        background-color: $gray-100;
+      }
     }
     ul {
       li {
@@ -372,3 +383,14 @@ input[type="radio"]:checked+span .fake-radiobutton:after,
 input[type="checkbox"]:checked+span .fake-checkbox:after {
   display: block;
 }
+
+.content-device {
+  @media screen and (min-width: 320px) and (max-width: 768px) {
+    background-color:$gray-100;
+    padding: 0 22px;
+    margin-bottom: 5px;
+  }
+  .showcount {
+    font-size: 10px;
+  }
+}
diff --git a/src/app/home/content/product-list/product-list.component.html b/src/app/home/content/product-list/product-list.component.html
@@ -25,6 +25,13 @@
       </div>
     </a>
   </div>
+  <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" [maxSize]="5"></pagination>
+    </div>
+
+  </div>
 </div>
 
 <div class="row results-base m-0" *ngIf="isMobile">
@@ -60,11 +67,12 @@
       </div>
     </a>
   </div>
-</div>
-<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" [maxSize]="5"></pagination>
+  <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" [maxSize]="3"></pagination>
+    </div>
+
   </div>
-
 </div>
+
diff --git a/src/app/home/content/product-list/product-list.component.scss b/src/app/home/content/product-list/product-list.component.scss
@@ -21,7 +21,8 @@
     border-radius: 0;
     border-bottom: 1px solid $gray-10;
     display: block;
-    padding: 1em;
+    padding: 1em 1.5em;
+    box-shadow: none;
   }
   @media screen and(width: 768px) {
     flex: 0 0 30.5%;
@@ -108,9 +109,9 @@
     background-color: $white;
     color: $gray-400;
     margin-top: 0px;
-    width: 60%;
-    margin: 0 auto;
-    font-size: 0.7rem;
+    width: 90.5%;
+    margin: 5px auto 0;
+    font-size: 0.6rem;
   }
 }
 
@@ -134,3 +135,10 @@
   text-decoration: line-through;
   margin-left: 10px;
 }
+
+.results-base {
+  @media screen and (min-width: 320px) and (max-width: 768px) {
+    padding: 0 0px;
+    background-color: $white;
+  }
+}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="pagination$ | async; let paginationData">
-  <div class="container col-12 home" *ngIf="paginationData.total_count > 0">
+  <div class="col-12 p-0 p-sm-3 home" *ngIf="paginationData.total_count > 0">
     <div class="container" *ngIf="taxonomies$ | async; let taxonomies">
       <div class="row">
         <div class="col-lg-3 sidebar d-sm-none d-xs-none d-none d-lg-block">
@@ -23,7 +23,7 @@ <h1>Searched Results</h1>
     <div class="col-9 col-sm-6 m-auto nproduct">
       <img src="../../assets/custom/noproduct.png" />
       <h2 class="my-5">No Products Found</h2>
-      <button type="button" class="btn themebtnprimary themebtnprimarysade col-12 col-sm-5 m-auto" [routerLink]="['/']">Coutinue Shopping</button>
+      <button type="button" class="btn themebtnprimary themebtnprimarysade  mb-3 col-12 col-sm-5 m-auto" [routerLink]="['/']">Continue Shopping</button>
 
     </div>
   </div>

diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -1,6 +1,10 @@
 @import '../shared/scss/selected_theme_variables';
 .home {
   background-color: $gray-100;
+  @media screen and(min-width: 320px) and(max-width: 768px) {
+    background-color:transparent;
+    padding: 0px;
+  }
   .sidebar {
     background-color: $gray-100;
     padding: 3.5vh 2vw;
@@ -29,7 +33,7 @@
 
 .nproduct {
   text-align: center;
-  padding-top:2em;
+  padding-top: 2em;
   img {
     height: 170px;
   }

diff --git a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.html
@@ -21,18 +21,18 @@
     <ul class="bg-color" *ngIf="menuTaxons">
       <li (click)="parrantBack()" class="backbtn">
         <i class="fa fa-chevron-left mr-2"></i>Back</li>
-      <div class="subhead">{{menuTaxons.name}}</div>
+      <div class="subhead" (click)="onCloseMobilemenu()" [routerLink]="['search']" [queryParams]="{'q[name_cont]': menuTaxons.name, id: menuTaxons.id}" >{{menuTaxons.name}}</div>
       <li *ngFor="let taxon of menuTaxons.taxons; let i= index" (click)="showSubCategory(i)">{{taxon.name}}</li>
     </ul>
   </div>
   <div class="p-0 no-gutters" class="sub-sub-catgory" [@subCatgory]="getChildState">
     <ul class="bg-color" *ngIf="subChild">
       <li (click)="childBack()" class="backbtn">
         <i class="fa fa-chevron-left mr-2"></i> Back</li>
-      <div class="subhead">{{subChild.name}}</div>
+      <div class="subhead" (click)="onCloseMobilemenu()" [routerLink]="['search']" [queryParams]="{'q[name_cont]': subChild.name, id: subChild.id}">{{subChild.name}}</div>
       <li *ngFor="let taxon of subChild.taxons; let i= index" [routerLink]="['search']" [queryParams]="{'q[name_cont]': taxon.name, id: taxon.id}"
         (click)="onCloseMobilemenu()">{{taxon.name}}</li>
     </ul>
   </div>
-  <div class="need-help">Need help?+91-9176031568</div>
+  <div class="need-help">Need help?{{contactno}}</div>
 </div>
diff --git a/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts b/src/app/layout/header/components/category-mobile-menu/category-mobile-menu.component.ts
@@ -7,6 +7,7 @@ import {
   transition
 } from '@angular/animations';
 import { ElementRef, EventEmitter } from '@angular/core';
+import { environment } from '../../../../../environments/environment';
 @Component({
   selector: 'app-category-mobile-menu',
   templateUrl: './category-mobile-menu.component.html',
@@ -51,6 +52,7 @@ export class CategoryMobileMenuComponent implements OnInit {
   showParrent = false;
   showChild = false;
   backBtnShow = false;
+  contactno = environment.config.contact_info.contact_no;
   constructor(private el: ElementRef) { }
   showCategory(i) {
     this.menuTaxons = this.taxonomies[0].root.taxons[i];

diff --git a/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html b/src/app/layout/header/components/header-help-dropdown/header-help-dropdown.component.html
@@ -10,7 +10,7 @@
       <ul>
         <li role="menuitem">
           <h6>Get help from our experts 24/7</h6>
-          <h2 class="text-danger">+ {{contactno}}</h2>
+          <h2 class="text-danger">{{contactno}}</h2>
         </li>
         <li class="divider dropdown-divider"></li>
         <li></li>

diff --git a/src/app/user/components/orders/order-detail/order-detail.component.html b/src/app/user/components/orders/order-detail/order-detail.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="order">
-  <div class="row box">
-    <div class="col-12 col-sm-6">
+  <div class="row box m-0">
+    <div class="col-12 col-sm-6 p-0 p-sm-3">
       <h3>Order Details</h3>
       <table>
         <tr>
@@ -41,7 +41,7 @@ <h3>Order Details</h3>
           </tr>
       </table>
     </div>
-    <div class="col-12 col-sm-6">
+    <div class="col-12 col-sm-6 p-0 p-sm-3">
       <h3>Address</h3>
       <table>
         <tr>
@@ -70,10 +70,9 @@ <h3>Address</h3>
   </div>
 
 
-  <div class="box mt-2 p-0">
-
-    <div *ngFor="let item of order.line_items" class="lineitems">
+  <div class="box mt-2 p-0 mb-4 row m-0" *ngIf="!isMobile">
 
+    <div *ngFor="let item of order.line_items" class="lineitems">
       <div class="row ">
         <div class="col-12 pr-0 col-sm-1">
           <img [routerLink]="['/', item.variant.slug]" [src]='getProductImageUrl(item)' />
@@ -87,7 +86,28 @@ <h3>Address</h3>
           <div class="qty"> QTY: {{item.quantity}}</div>
         </div>
         <div class="col-12 col-sm-4">
-          <b class="text-warning">Please note:</b> You can return or exchange this within 15 days.
+          <b class="text-danger note p-0">Please note:</b> You can return or exchange this within 15 days.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="box mt-2 p-0 mb-4 row m-0" *ngIf="isMobile">
+    <div *ngFor="let item of order.line_items" class="lineitems">
+      <div class="row ">
+        <div class="col-12 pr-0 col-sm-1">
+          <img [routerLink]="['/', item.variant.slug]" [src]='getProductImageUrl(item)' />
+        </div>
+        <div class="col-6 col-sm-5" [routerLink]="['/', item.variant.slug]">
+          <div class="lineitems-name"> {{item.variant.name}}</div>
+          <div class="lineitems-info"> {{item.variant.options_text}}</div>
+        </div>
+        <div class="col-6 col-sm-2">
+          <div class="qty"> QTY: {{item.quantity}}</div>
+          <div class="price">{{item.display_amount}}</div>
+        </div>
+        <div class="col-12 col-sm-4">
+          <b class="note text-danger p-0">Note:</b>
+          <span class="note">You can return or exchange this within 15 days.</span>
         </div>
       </div>
     </div>

diff --git a/src/app/user/components/orders/order-detail/order-detail.component.scss b/src/app/user/components/orders/order-detail/order-detail.component.scss
@@ -53,6 +53,9 @@
     font-weight: 200;
     margin-top: 17px;
     cursor: pointer;
+    @media only screen and (min-width: 320px) and (max-width: 767px){
+      margin-top: 0;
+    }
   }
   .lineitems-info {
     font-size: .8em;
@@ -81,3 +84,4 @@ table {
     }
   }
 }
+.note{color:$gray-600;padding-left: 5px;font-size: 11px;}
diff --git a/src/app/user/components/orders/order-detail/order-detail.component.ts b/src/app/user/components/orders/order-detail/order-detail.component.ts
@@ -20,7 +20,8 @@ export class OrderDetailComponent implements OnInit, OnDestroy {
   order: Order;
   title = environment.appName;
   payubiz = environment.config.PaymentMethodPayubiz
-
+  isMobile = false;
+  screenwidth: any;
   constructor(
     private userService: UserService,
     private route: ActivatedRoute,
@@ -38,8 +39,16 @@ export class OrderDetailComponent implements OnInit, OnDestroy {
             .subscribe(order => this.order = order);
       }
     );
+    if (isPlatformBrowser(this.platformId)) {
+      this.screenwidth = window.innerWidth;
+    }
+    this.calculateInnerWidth();
+  }
+  calculateInnerWidth() {
+    if (this.screenwidth <= 1000) {
+      this.isMobile = this.screenwidth;
+    }
   }
-
   getProductImageUrl(line_item: LineItem) {
     return line_item.variant.images[0].small_url;
   }