Added style and structure for mobile filter list

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

@@ -16,20 +16,25 @@ <h4 class="modal-title">Filters</h4>
   <div class="modal-body p-0">
     <tabset [vertical]="true" class="filter-tabs">
       <tab
-        *ngFor="let tabz of tabs"
-        [heading]="tabz.title"
-        [customClass]="tabz.customClass"
+        *ngFor="let tab of tabs"
+        [heading]="tab.title"
+        [customClass]="tab.customClass"
       >
-        <div class="col">{{ tabz?.content }}</div>
+        <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">
-    <div>
-      <a class="cancel-filter-btn" (click)="modalRef.hide()">Cancel</a>
-    </div>
-    <div>
-      <a class="apply-filter-btn">Apply</a>
-    </div>
+    <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

@@ -22,3 +22,125 @@ 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.ts

@@ -1,6 +1,7 @@
 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',
@@ -9,8 +10,12 @@ 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: 'filter-modal' };
+
+  filterItems = ['Category', 'Brand', 'Style', 'Unit', 'Price', 'Discount'];
+
+  filterItemList = [0, 1, 2, 3, 4];
+
   tabs: any[] = [
     {
       title: this.filterItems[0],
@@ -26,8 +31,14 @@ export class MobileFilterListComponent implements OnInit {
       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() {}

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

@@ -24,3 +24,27 @@ span {
   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/styles.scss

@@ -116,114 +116,3 @@ $l-max: 90;
     outline: none;
   }
 }
-
-// modal css
-
-.filter-modal {
-  margin: 0;
-  .modal-content {
-    border: none;
-    border-radius: 0;
-    height: 100vh;
-    .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 {
-      padding: 0 10px;
-    }
-    .modal-footer {
-      padding: 0;
-      div {
-        width: 50%;
-        float: left;
-        display: block;
-        padding: 10px 15px;
-        text-transform: uppercase;
-        font-size: 14px;
-        text-align: center;
-        a {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-
-.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;
-    }
-  }
-}
-
-// 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;
-        }
-      }
-    }
-  }
-}