Skip to content

Commit

Permalink
Added style and structure for mobile filter list
Browse files Browse the repository at this point in the history
  • Loading branch information
@y2kanthale
y2kanthale committed Mar 12, 2019
1 parent 0f092da commit e2573aa
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 122 deletions.
25 changes: 15 additions & 10 deletions .../mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
122 changes: 122 additions & 0 deletions .../mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
13 changes: 12 additions & 1 deletion ...ts/mobile-filters-container/components/mobile-filter-list/mobile-filter-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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],
Expand All @@ -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() {}
Expand Down
24 changes: 24 additions & 0 deletions ...lters-container/components/mobile-sort-filter-list/mobile-sort-filter-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
111 changes: 0 additions & 111 deletions src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
}

0 comments on commit e2573aa

Please sign in to comment.