UI for mobile search filter (Sort and Filter)

src/app/modules/search/components/index.ts

@@ -2,10 +2,12 @@ import * as searchFiltersContainer from './search-filters-container';
 import * as searchResultsContainer from './search-results-container';
 import * as filterSummaryContainer from './filter-summary-container';
 import * as searchTitleContainer from './search-title-container';
+import * as mobileFiltersContainer from './mobile-filters-container';
 
 export const SEARCH_COMPONENTS = [
   ...searchFiltersContainer.COMPONENTS,
   ...searchResultsContainer.COMPONENTS,
   ...filterSummaryContainer.COMPONENTS,
-  ...searchTitleContainer.COMPONENTS
+  ...searchTitleContainer.COMPONENTS,
+  ...mobileFiltersContainer.COMPONENTS
 ];

src/app/modules/search/components/mobile-filters-container/components/index.ts

@@ -0,0 +1,7 @@
+import { MobileFilterListComponent } from './mobile-filter-list/mobile-filter-list.component';
+import { MobileSortFilterListComponent } from './mobile-sort-filter-list/mobile-sort-filter-list.component';
+
+export const COMPONENTS = [
+  MobileFilterListComponent,
+  MobileSortFilterListComponent
+];

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

@@ -0,0 +1,40 @@
+<!-- <h4>This is mobile filter list component</h4> -->
+
+<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 pr-0">
+      <a class="clear-filter-btn">Clear all</a>
+    </div>
+  </div>
+  <div class="modal-body p-0">
+    <tabset [vertical]="true" class="filter-tabs">
+      <tab
+        *ngFor="let tab of tabs"
+        [heading]="tab.title"
+        [customClass]="tab.customClass"
+      >
+        <div class="filterlist-container">
+          <ul class="list-group">
+            <li
+              *ngFor="let filteritem of filterItemList"
+              class="list-group-item mb-0"
+            >
+              {{ tab?.content }}
+            </li>
+          </ul>
+        </div>
+      </tab>
+    </tabset>
+  </div>
+  <div class="modal-footer">
+    <a class="cancel-filter-btn b-right" (click)="modalRef.hide()">Cancel</a>
+    <a class="apply-filter-btn">Apply</a>
+  </div>
+</ng-template>

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

@@ -0,0 +1,146 @@
+.filter-list {
+  list-style: none;
+  li {
+    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;
+    }
+  }
+}
+span {
+  height: 100%;
+  display: block;
+}
+
+// filter modal
+
+::ng-deep .filter-modal {
+  margin: 0;
+  .modal-content {
+    border: none;
+    border-radius: 0;
+    height: 100%;
+    .modal-header {
+      padding: 0;
+      div {
+        width: 50%;
+        float: left;
+        display: block;
+        padding: 13px 12px 10px 20px;
+        text-transform: uppercase;
+        font-size: 13px;
+        font-weight: bold;
+        height: 50px;
+        .modal-title {
+          font-size: 13px;
+        }
+        .clear-filter-btn {
+          font-weight: 300;
+          cursor: pointer;
+          padding-right: 20px;
+          color: #ff3e6c;
+        }
+      }
+    }
+    .modal-body {
+      min-height: calc(100vh - 99px);
+    }
+    .modal-footer {
+      padding: 4px 0;
+      border-top: 1px solid #eaeaec;
+      text-align: center;
+      background: white;
+      a {
+        width: 50%;
+        float: left;
+        display: block;
+        padding: 10px 15px;
+        text-transform: uppercase;
+        font-size: 13px;
+        text-align: center;
+        position: relative;
+        margin: 0;
+        &.b-right {
+          &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 1px;
+            background: #eaeaec;
+            height: 22px;
+            margin-top: 15px;
+            content: '';
+            z-index: 1;
+          }
+        }
+        &.apply-filter-btn {
+          color: #ff3e6c;
+        }
+      }
+    }
+  }
+}
+
+// filter container
+
+::ng-deep .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;
+        color: #3e4152;
+        &.active {
+          background: white;
+          font-weight: bold;
+          border: none;
+          border-left: 2px solid #ff3e6c;
+        }
+      }
+    }
+  }
+  .filterlist-container {
+    height: calc(100vh - 150px);
+    overflow: scroll;
+    padding: 0 16px;
+    ul {
+      li {
+        border: none;
+        border-radius: 0;
+        font-size: 13px;
+        padding: 15px 8px;
+        border-bottom: 1px solid #eaeaec;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MobileFilterListComponent } from './mobile-filter-list.component';
+
+describe('MobileFilterListComponent', () => {
+  let component: MobileFilterListComponent;
+  let fixture: ComponentFixture<MobileFilterListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [MobileFilterListComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MobileFilterListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,48 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import { idLocale } from 'ngx-bootstrap';
+
+@Component({
+  selector: 'app-mobile-filter-list',
+  templateUrl: './mobile-filter-list.component.html',
+  styleUrls: ['./mobile-filter-list.component.scss']
+})
+export class MobileFilterListComponent implements OnInit {
+  modalRef: BsModalRef;
+  config = { animated: true, class: 'filter-modal' };
+
+  filterItems = ['Category', 'Brand', 'Style', 'Unit', 'Price', 'Discount'];
+
+  filterItemList = [0, 1, 2, 3, 4];
+
+  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'
+    },
+    {
+      title: this.filterItems[3],
+      content: 'Dynamic content 1',
+      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

@@ -0,0 +1,16 @@
+<span type="" class="" (click)="openModal(sortModal)">
+  <i class="fa fa-sort mr-1"></i> SORT
+</span>
+
+<ng-template #sortModal>
+  <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">
+      <li *ngFor="let sortItem of sortItems; let i = index">
+        {{ sortItem }}
+      </li>
+    </ul>
+  </div>
+</ng-template>

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

@@ -0,0 +1,50 @@
+.sort-list {
+  li {
+    display: block;
+    line-height: 24px;
+    padding: 15px 0;
+    border-bottom: solid 1px #eaeaec;
+    width: 82%;
+    font-size: 14px;
+    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;
+}
+
+// sort modal
+
+::ng-deep .sort-modal {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  margin: 0;
+  .modal-content {
+    border: none;
+    border-radius: 0;
+    // @at-root body.modal-open .modal {
+    //   padding-top: 30vh;
+    // }
+    .modal-header {
+      padding: 0px;
+      text-transform: uppercase;
+      border-bottom: none;
+    }
+    .modal-body {
+      padding: 0;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MobileSortFilterListComponent } from './mobile-sort-filter-list.component';
+
+describe('MobileSortFilterListComponent', () => {
+  let component: MobileSortFilterListComponent;
+  let fixture: ComponentFixture<MobileSortFilterListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MobileSortFilterListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MobileSortFilterListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});