Skip to content

Commit ed9a575

Browse files
y2kanthaley2kanthale
committed
Added style and structure for mobile filter list
1 parent f6c00bb commit ed9a575

File tree

5 files changed

+173
-122
lines changed

5 files changed

+173
-122
lines changed

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,25 @@ <h4 class="modal-title">Filters</h4>
1616
<div class="modal-body p-0">
1717
<tabset [vertical]="true" class="filter-tabs">
1818
<tab
19-
*ngFor="let tabz of tabs"
20-
[heading]="tabz.title"
21-
[customClass]="tabz.customClass"
19+
*ngFor="let tab of tabs"
20+
[heading]="tab.title"
21+
[customClass]="tab.customClass"
2222
>
23-
<div class="col">{{ tabz?.content }}</div>
23+
<div class="filterlist-container">
24+
<ul class="list-group">
25+
<li
26+
*ngFor="let filteritem of filterItemList"
27+
class="list-group-item mb-0"
28+
>
29+
{{ tab?.content }}
30+
</li>
31+
</ul>
32+
</div>
2433
</tab>
2534
</tabset>
2635
</div>
2736
<div class="modal-footer">
28-
<div>
29-
<a class="cancel-filter-btn" (click)="modalRef.hide()">Cancel</a>
30-
</div>
31-
<div>
32-
<a class="apply-filter-btn">Apply</a>
33-
</div>
37+
<a class="cancel-filter-btn b-right" (click)="modalRef.hide()">Cancel</a>
38+
<a class="apply-filter-btn">Apply</a>
3439
</div>
3540
</ng-template>

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,125 @@ span {
2222
height: 100%;
2323
display: block;
2424
}
25+
26+
// filter modal
27+
28+
::ng-deep .filter-modal {
29+
margin: 0;
30+
.modal-content {
31+
border: none;
32+
border-radius: 0;
33+
height: 100%;
34+
.modal-header {
35+
padding: 0;
36+
div {
37+
width: 50%;
38+
float: left;
39+
display: block;
40+
padding: 13px 12px 10px 20px;
41+
text-transform: uppercase;
42+
font-size: 13px;
43+
font-weight: bold;
44+
height: 50px;
45+
.modal-title {
46+
font-size: 13px;
47+
}
48+
.clear-filter-btn {
49+
font-weight: 300;
50+
cursor: pointer;
51+
padding-right: 20px;
52+
color: #ff3e6c;
53+
}
54+
}
55+
}
56+
.modal-body {
57+
min-height: calc(100vh - 99px);
58+
}
59+
.modal-footer {
60+
padding: 4px 0;
61+
border-top: 1px solid #eaeaec;
62+
text-align: center;
63+
background: white;
64+
a {
65+
width: 50%;
66+
float: left;
67+
display: block;
68+
padding: 10px 15px;
69+
text-transform: uppercase;
70+
font-size: 13px;
71+
text-align: center;
72+
position: relative;
73+
margin: 0;
74+
&.b-right {
75+
&::after {
76+
position: absolute;
77+
top: 0;
78+
right: 0;
79+
width: 1px;
80+
background: #eaeaec;
81+
height: 22px;
82+
margin-top: 15px;
83+
content: '';
84+
z-index: 1;
85+
}
86+
}
87+
&.apply-filter-btn {
88+
color: #ff3e6c;
89+
}
90+
}
91+
}
92+
}
93+
}
94+
95+
// filter container
96+
97+
::ng-deep .filter-tabs {
98+
background: red;
99+
.nav {
100+
padding: 0;
101+
height: 100%;
102+
overflow: scroll;
103+
border-right: 1px solid #eaeaec;
104+
width: 33.33%;
105+
float: left;
106+
border-bottom: none;
107+
li {
108+
margin-bottom: 0;
109+
a {
110+
background: #f5f5f6;
111+
font-size: 14px;
112+
border-bottom: 1px solid #eaeaec;
113+
padding: 0 15px;
114+
min-height: 50px;
115+
display: -webkit-box;
116+
display: -ms-flexbox;
117+
display: flex;
118+
-webkit-box-align: center;
119+
-ms-flex-align: center;
120+
align-items: center;
121+
border-radius: 0;
122+
color: #3e4152;
123+
&.active {
124+
background: white;
125+
font-weight: bold;
126+
border: none;
127+
border-left: 2px solid #ff3e6c;
128+
}
129+
}
130+
}
131+
}
132+
.filterlist-container {
133+
height: calc(100vh - 150px);
134+
overflow: scroll;
135+
padding: 0 16px;
136+
ul {
137+
li {
138+
border: none;
139+
border-radius: 0;
140+
font-size: 13px;
141+
padding: 15px 8px;
142+
border-bottom: 1px solid #eaeaec;
143+
}
144+
}
145+
}
146+
}

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit, TemplateRef } from '@angular/core';
22
import { BsModalService } from 'ngx-bootstrap/modal';
33
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
4+
import { idLocale } from 'ngx-bootstrap';
45

56
@Component({
67
selector: 'app-mobile-filter-list',
@@ -9,8 +10,12 @@ import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
910
})
1011
export class MobileFilterListComponent implements OnInit {
1112
modalRef: BsModalRef;
12-
filterItems = ['First', 'Second', 'Third'];
1313
config = { animated: true, class: 'filter-modal' };
14+
15+
filterItems = ['Category', 'Brand', 'Style', 'Unit', 'Price', 'Discount'];
16+
17+
filterItemList = [0, 1, 2, 3, 4];
18+
1419
tabs: any[] = [
1520
{
1621
title: this.filterItems[0],
@@ -26,8 +31,14 @@ export class MobileFilterListComponent implements OnInit {
2631
title: this.filterItems[2],
2732
content: 'Dynamic content 3',
2833
customClass: 'customClass'
34+
},
35+
{
36+
title: this.filterItems[3],
37+
content: 'Dynamic content 1',
38+
customClass: 'customClass'
2939
}
3040
];
41+
3142
constructor(private modalService: BsModalService) {}
3243

3344
ngOnInit() {}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,27 @@ span {
2424
padding-top: 12px;
2525
padding-bottom: 8px;
2626
}
27+
28+
// sort modal
29+
30+
::ng-deep .sort-modal {
31+
position: fixed;
32+
width: 100%;
33+
bottom: 0;
34+
margin: 0;
35+
.modal-content {
36+
border: none;
37+
border-radius: 0;
38+
// @at-root body.modal-open .modal {
39+
// padding-top: 30vh;
40+
// }
41+
.modal-header {
42+
padding: 0px;
43+
text-transform: uppercase;
44+
border-bottom: none;
45+
}
46+
.modal-body {
47+
padding: 0;
48+
}
49+
}
50+
}

‎src/styles.scss‎

Lines changed: 0 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -116,114 +116,3 @@ $l-max: 90;
116116
outline: none;
117117
}
118118
}
119-
120-
// modal css
121-
122-
.filter-modal {
123-
margin: 0;
124-
.modal-content {
125-
border: none;
126-
border-radius: 0;
127-
height: 100vh;
128-
.modal-header {
129-
padding: 0;
130-
div {
131-
width: 50%;
132-
float: left;
133-
display: block;
134-
padding: 13px 12px 10px 20px;
135-
text-transform: uppercase;
136-
font-size: 13px;
137-
font-weight: bold;
138-
height: 50px;
139-
.modal-title {
140-
font-size: 13px;
141-
}
142-
.clear-filter-btn {
143-
font-weight: 300;
144-
cursor: pointer;
145-
padding-right: 20px;
146-
color: #ff3e6c;
147-
}
148-
}
149-
}
150-
.modal-body {
151-
padding: 0 10px;
152-
}
153-
.modal-footer {
154-
padding: 0;
155-
div {
156-
width: 50%;
157-
float: left;
158-
display: block;
159-
padding: 10px 15px;
160-
text-transform: uppercase;
161-
font-size: 14px;
162-
text-align: center;
163-
a {
164-
cursor: pointer;
165-
}
166-
}
167-
}
168-
}
169-
}
170-
171-
.sort-modal {
172-
position: fixed;
173-
width: 100%;
174-
bottom: 0;
175-
margin: 0;
176-
.modal-content {
177-
border: none;
178-
border-radius: 0;
179-
// @at-root body.modal-open .modal {
180-
// padding-top: 30vh;
181-
// }
182-
.modal-header {
183-
padding: 0px;
184-
text-transform: uppercase;
185-
border-bottom: none;
186-
}
187-
.modal-body {
188-
padding: 0;
189-
}
190-
}
191-
}
192-
193-
// filter container
194-
195-
.filter-tabs {
196-
background: red;
197-
.nav {
198-
padding: 0;
199-
height: 100%;
200-
overflow: scroll;
201-
border-right: 1px solid #eaeaec;
202-
width: 33.33%;
203-
float: left;
204-
border-bottom: none;
205-
li {
206-
margin-bottom: 0;
207-
a {
208-
background: #f5f5f6;
209-
font-size: 14px;
210-
border-bottom: 1px solid #eaeaec;
211-
padding: 0 15px;
212-
min-height: 50px;
213-
display: -webkit-box;
214-
display: -ms-flexbox;
215-
display: flex;
216-
-webkit-box-align: center;
217-
-ms-flex-align: center;
218-
align-items: center;
219-
border-radius: 0;
220-
&.active {
221-
background: white;
222-
font-weight: bold;
223-
border: none;
224-
border-left: 2px solid #ff3e6c;
225-
}
226-
}
227-
}
228-
}
229-
}

0 commit comments

Comments
 (0)