Added styles and tabs in mobile filter component

Author: y2kanthale

src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html

@@ -1,31 +1,28 @@
 <!-- <h4>This is mobile filter list component</h4> -->
 
-<a type="" class="testbtn" (click)="openModal(filterModal)">
-  FILTER
-</a>
+<span type="" class="" (click)="openModal(filterModal)">
+  <i class="fa fa-filter mr-1"></i> FILTER
+</span>
 
 <ng-template #filterModal>
   <div class="modal-header">
     <div class="text-left">
       <h4 class="modal-title">Filters</h4>
     </div>
-    <div class="text-right">
+    <div class="text-right pr-0">
       <a class="clear-filter-btn">Clear all</a>
     </div>
   </div>
-  <div class="modal-body">
-    <div class="row">
-      <div class="col-4 p-0">
-        <ul class="filter-list">
-          <li *ngFor="let filterItem of filterItems; let i = index">
-            {{ filterItem }}
-          </li>
-        </ul>
-      </div>
-      <div class="col-8">
-        Tabs
-      </div>
-    </div>
+  <div class="modal-body p-0">
+    <tabset [vertical]="true" class="filter-tabs">
+      <tab
+        *ngFor="let tabz of tabs"
+        [heading]="tabz.title"
+        [customClass]="tabz.customClass"
+      >
+        <div class="col">{{ tabz?.content }}</div>
+      </tab>
+    </tabset>
   </div>
   <div class="modal-footer">
     <div>

src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss

@@ -1,12 +1,24 @@
 .filter-list {
   list-style: none;
   li {
-    display: block;
-    border-bottom: 1px solid #ddd;
-    width: 100%;
-    line-height: 24px;
-    padding: 10px;
+    border-bottom: 1px solid #eaeaec;
+    padding: 0 15px;
+    min-height: 50px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    &.active {
+      border-left: 2px solid #ff3e6c;
+      background: white;
+      font-weight: bold;
+    }
   }
 }
-.modal-header {
+span {
+  height: 100%;
+  display: block;
 }

src/app/modules/search/components/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts

@@ -10,8 +10,26 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 export class MobileFilterListComponent implements OnInit {
   modalRef: BsModalRef;
   filterItems = ['First', 'Second', 'Third'];
-  config = { animated: true, class: 'modal-filter' };
+  config = { animated: true, class: 'filter-modal' };
+  tabs: any[] = [
+    {
+      title: this.filterItems[0],
+      content: 'Dynamic content 1',
+      customClass: 'customClass'
+    },
+    {
+      title: this.filterItems[1],
+      content: 'Dynamic content 2',
+      customClass: 'customClass'
+    },
+    {
+      title: this.filterItems[2],
+      content: 'Dynamic content 3',
+      customClass: 'customClass'
+    }
+  ];
   constructor(private modalService: BsModalService) {}
+
   ngOnInit() {}
   openModal(filterModal: TemplateRef<any>) {
     this.modalRef = this.modalService.show(filterModal, this.config);

src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.html

@@ -1,10 +1,10 @@
-<a type="" class="" (click)="openModal(sortModal)">
-  SORT
-</a>
+<span type="" class="" (click)="openModal(sortModal)">
+  <i class="fa fa-sort mr-1"></i> SORT
+</span>
 
 <ng-template #sortModal>
-  <div class="modal-header">
-    <h4 class="modal-title pull-left">Sort By</h4>
+  <div class="modal-header p-0">
+    <h4 class="modal-title float-left sort-header m-0">Sort By</h4>
   </div>
   <div class="modal-body">
     <ul class="sort-list">

src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss

@@ -1,9 +1,26 @@
 .sort-list {
   li {
-    width: 100%;
-    padding: 10px;
-    text-align: left;
+    display: block;
+    line-height: 24px;
+    padding: 15px 0;
+    border-bottom: solid 1px #eaeaec;
+    width: 82%;
     font-size: 14px;
-    border-bottom: 1px solid #d2d2d2;
+    margin-left: 65px;
   }
 }
+
+span {
+  height: 100%;
+  display: block;
+}
+
+.sort-header {
+  font-weight: bold;
+  border: none;
+  font-size: 18px;
+  color: #3e4152;
+  padding-left: 20px;
+  padding-top: 12px;
+  padding-bottom: 8px;
+}

src/app/modules/search/components/mobile-filters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.ts

@@ -9,10 +9,16 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 })
 export class MobileSortFilterListComponent implements OnInit {
   modalRef: BsModalRef;
-  sortItems = ['First', 'Second', 'Third'];
+  sortItems = [
+    ' Popularity',
+    ' Latest',
+    ' Discount',
+    ' Price: High to Low',
+    ' Price: Low to High'
+  ];
   config = {
     animated: true,
-    class: 'sort-filter'
+    class: 'sort-modal'
   };
   constructor(private modalService: BsModalService) {}
 

src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.html

@@ -1,10 +1,8 @@
 <nav class="navbar fixed-bottom navbar-light bg-light mobile-bottom-nav">
-  <a class="navbar-brand"
-    ><app-mobile-sort-filter-list></app-mobile-sort-filter-list>
+  <a class="navbar-brand b-right">
+    <app-mobile-sort-filter-list></app-mobile-sort-filter-list>
   </a>
   <a class="navbar-brand">
     <app-mobile-filter-list> </app-mobile-filter-list>
   </a>
 </nav>
-
-<div class="col"></div>

src/app/modules/search/components/mobile-filters-container/mobile-filters-container.component.scss

@@ -16,5 +16,19 @@
     float: left;
     text-transform: uppercase;
     cursor: pointer;
+    position: relative;
+    &.b-right {
+      ::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 1px;
+        background: #eaeaec;
+        height: 22px;
+        margin-top: 15px;
+        content: '';
+        z-index: 1;
+      }
+    }
   }
 }

src/app/shared/index.ts

@@ -15,6 +15,7 @@ import { RandomPipe } from './pipes/random.pipe';
 // components
 // imports
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { TabsModule } from 'ngx-bootstrap/tabs';
 import { RatingModule } from 'ngx-bootstrap/rating';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ProductSliderComponent } from './components/product-slider/product-slider.component';
@@ -49,6 +50,7 @@ import { SanitizeHtmlPipe } from './pipes/sanitize-html.pipe';
     // modules
     CommonModule,
     BsDropdownModule,
+    TabsModule,
     RatingModule,
     TypeaheadModule,
     FormsModule,
@@ -74,6 +76,7 @@ import { SanitizeHtmlPipe } from './pipes/sanitize-html.pipe';
     CommonModule,
     BsDropdownModule.forRoot(),
     TypeaheadModule.forRoot(),
+    TabsModule.forRoot(),
     RatingModule.forRoot(),
     RouterModule,
     NgxInputStarRatingModule,

src/styles.scss

@@ -117,7 +117,9 @@ $l-max: 90;
   }
 }
 
-.modal-filter {
+// modal css
+
+.filter-modal {
   margin: 0;
   .modal-content {
     border: none;
@@ -129,16 +131,19 @@ $l-max: 90;
         width: 50%;
         float: left;
         display: block;
-        padding: 10px 15px;
+        padding: 13px 12px 10px 20px;
         text-transform: uppercase;
-        font-size: 14px;
+        font-size: 13px;
         font-weight: bold;
+        height: 50px;
         .modal-title {
-          font-size: 14px;
+          font-size: 13px;
         }
         .clear-filter-btn {
           font-weight: 300;
           cursor: pointer;
+          padding-right: 20px;
+          color: #ff3e6c;
         }
       }
     }
@@ -163,21 +168,62 @@ $l-max: 90;
   }
 }
 
-.sort-filter {
+.sort-modal {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
   margin: 0;
   .modal-content {
     border: none;
     border-radius: 0;
-    height: 70vh;
-    @at-root body.modal-open .modal {
-      padding-top: 30vh;
-    }
+    // @at-root body.modal-open .modal {
+    //   padding-top: 30vh;
+    // }
     .modal-header {
-      padding: 10px;
+      padding: 0px;
       text-transform: uppercase;
+      border-bottom: none;
     }
     .modal-body {
       padding: 0;
     }
   }
 }
+
+// filter container
+
+.filter-tabs {
+  background: red;
+  .nav {
+    padding: 0;
+    height: 100%;
+    overflow: scroll;
+    border-right: 1px solid #eaeaec;
+    width: 33.33%;
+    float: left;
+    border-bottom: none;
+    li {
+      margin-bottom: 0;
+      a {
+        background: #f5f5f6;
+        font-size: 14px;
+        border-bottom: 1px solid #eaeaec;
+        padding: 0 15px;
+        min-height: 50px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        border-radius: 0;
+        &.active {
+          background: white;
+          font-weight: bold;
+          border: none;
+          border-left: 2px solid #ff3e6c;
+        }
+      }
+    }
+  }
+}