Skip to content

Commit fb7cac4

Browse files
jsfrochajsfrocha
committed
ContentPage - Tablet & Mobile ContentItems;
FiltersDrawerComponent;
1 parent 1e7c2e2 commit fb7cac4

12 files changed

+384
-5
lines changed

‎src/app/screens/content/content.component.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,74 @@
4040
</div>
4141

4242
</aside>
43+
4344
<section class="t4e-content-items">
45+
<div class="t4e-filter-drawer-opener">
46+
<button (click)="openFilterDrawer()">
47+
<span>SELECCIONAR FILTROS ({{totalSelectedFilters}})</span>
48+
<i>
49+
<svg width="21" height="8" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg">
50+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447708 0 0 0.447715 0 1C0 1.55228 0.447708 2 1 2H20C20.5523 2 21 1.55228 21 1C21 0.447715 20.5523 0 20 0H1ZM1 6C0.447708 6 0 6.44772 0 7C0 7.55228 0.447708 8 1 8H20C20.5523 8 21 7.55228 21 7C21 6.44772 20.5523 6 20 6H1Z" fill="white"/>
51+
</svg>
52+
</i>
53+
</button>
54+
</div>
55+
4456
<t4e-content-card
4557
*ngFor="let contentItem of contentItems"
4658
[contentItem]="contentItem"
4759
></t4e-content-card>
4860
</section>
61+
62+
<t4e-filter-drawer
63+
[isOpened]="filterDrawerOpened"
64+
(onClose)="filterDrawerOpened = false"
65+
>
66+
<t4e-filters
67+
title="Providers"
68+
[fields]="providerFields$"
69+
[selectedIndexes]="[]"
70+
(onSelectFields)="selectedProviders$.next($event)"
71+
></t4e-filters>
72+
73+
<t4e-filters
74+
title="Stakeholders"
75+
[fields]="stakeholderFields$"
76+
[selectedIndexes]="[]"
77+
(onSelectFields)="selectedStakeholders$.next($event)"
78+
></t4e-filters>
79+
80+
<t4e-filters
81+
title="Tags"
82+
[fields]="tagFields$"
83+
[selectedIndexes]="[]"
84+
(onSelectFields)="selectedTags$.next($event)"
85+
></t4e-filters>
86+
87+
<t4e-filters
88+
title="Tags"
89+
[fields]="tagFields$"
90+
[selectedIndexes]="[]"
91+
(onSelectFields)="selectedTags$.next($event)"
92+
></t4e-filters>
93+
94+
<div class="results-panel">
95+
<div class="results-panel__title">Resultados</div>
96+
<div class="results-panel__text">Temos <span>{{contentItems.length}}</span> items do seu interesse de acordo com a sua pesquisa</div>
97+
<button class="results-panel__clear-btn">
98+
<span>Limpar todos os filtros</span>
99+
<i>
100+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
101+
<path d="M7.45935 6.56118L7.45935 1.2844C7.45935 1.01923 7.27373 0.833617 7.00857 0.833617C6.7434 0.833617 6.55779 1.01923 6.55779 1.2844V6.56118L1.281 6.5877C1.0291 6.57444 0.830221 6.77331 0.84348 7.02522C0.856738 7.27713 1.0291 7.476 1.29426 7.476L6.55779 7.46274L6.55779 12.7395C6.55779 13.0047 6.7434 13.1903 7.00857 13.1903C7.12789 13.1771 7.23396 13.1505 7.32676 13.0577C7.41957 12.9649 7.45935 12.8721 7.45935 12.7395L7.47261 7.44949L12.7494 7.42297C12.8687 7.40971 13.0013 7.35668 13.0676 7.29039C13.1339 7.2241 13.2002 7.10477 13.2002 6.97219C13.2002 6.70702 13.0146 6.52141 12.7494 6.52141L7.45935 6.56118Z" fill="white"/>
102+
</svg>
103+
</i>
104+
</button>
105+
</div>
106+
107+
</t4e-filter-drawer>
49108
</div>
50109

51110

52111

112+
113+

‎src/app/screens/content/content.component.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@
1010
grid-template-areas: 'filters content-items';
1111
grid-column-gap: 110px;
1212

13+
@include media-desktop-sm {
14+
grid-column-gap: 55px;
15+
}
16+
17+
@include media-laptop {
18+
grid-template-columns: 1fr;
19+
grid-template-areas:
20+
'content-items'
21+
;
22+
grid-column-gap: 0;
23+
}
24+
1325
.t4e-content-filters {
1426
grid-area: filters;
1527

@@ -77,6 +89,10 @@
7789
}
7890
}
7991
}
92+
93+
@include media-laptop {
94+
display: none;
95+
}
8096
}
8197

8298
.t4e-content-items {
@@ -89,5 +105,55 @@
89105
grid-row-gap: 40px;
90106
grid-column-gap: 24px;
91107

108+
@include media-laptop {
109+
justify-items: center;
110+
grid-auto-rows: auto;
111+
}
112+
113+
@include media-tablet {
114+
grid-template-columns: 1fr;
115+
grid-row-gap: 24px;
116+
}
117+
118+
}
119+
120+
.t4e-filter-drawer-opener {
121+
display: none;
122+
grid-column: 1 / span 2;
123+
width: 100%;
124+
margin-bottom: 24px;
125+
126+
@include media-tablet {
127+
grid-column: 1;
128+
}
129+
130+
button {
131+
box-shadow: 0px 5px 5px rgba(75, 93, 104, 0.1);
132+
background: $color-primary-blue;
133+
border-radius: 50px;
134+
padding: 16px 24px;
135+
width: 95%;
136+
display: flex;
137+
justify-content: flex-start;
138+
139+
span {
140+
@include font('button');
141+
color: #FFF;
142+
}
143+
144+
i {
145+
margin-left: auto;
146+
svg {
147+
width: 21px;
148+
height: 8px;
149+
}
150+
}
151+
}
152+
153+
@include media-laptop {
154+
display: flex;
155+
justify-content: center;
156+
align-items: center;
157+
}
92158
}
93159
}

‎src/app/screens/content/content.component.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,14 @@ export class ContentComponent implements OnInit {
6060
selectedStakeholders$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
6161
selectedTags$: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
6262

63+
totalSelectedFilters: number = 0;
64+
6365
contentItemsQueryRef: QueryRef<any>;
64-
contentItemsCountQueryRef: QueryRef<any>;
6566

6667
contentItems: IContentItem[] = [];
6768

69+
filterDrawerOpened: boolean = false;
70+
6871
constructor(
6972
private appService: AppService,
7073
private apollo: Apollo
@@ -103,6 +106,8 @@ export class ContentComponent implements OnInit {
103106
console.log('stakeholderIds', stakeholderIds);
104107
console.log('tagIds', tagIds);
105108

109+
this.totalSelectedFilters = providerIds.length + stakeholderIds.length + tagIds.length;
110+
106111
this.contentItemsQueryRef.refetch({
107112
providerIds,
108113
stakeholderIds,
@@ -112,4 +117,8 @@ export class ContentComponent implements OnInit {
112117

113118
}
114119

120+
openFilterDrawer() {
121+
this.filterDrawerOpened = true;
122+
}
123+
115124
}

‎src/app/shared/content-card/content-card.component.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
width: 315px;
99
height: 289px;
1010

11-
1211
background-repeat: no-repeat;
1312

1413
mask: url(/assets/card/card-content-aluno.png);

‎src/app/shared/filter-drawer/filter-drawer.component.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<aside class="t4e-filter-drawer" [ngClass]="{'opened': isOpened}">
2+
<div class="t4e-filter-drawer__header">
3+
<span>SELECCIONAR FILTROS</span>
4+
<i (click)="handleClose()">
5+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<path d="M7.45935 6.56118L7.45935 1.2844C7.45935 1.01923 7.27373 0.833617 7.00857 0.833617C6.7434 0.833617 6.55779 1.01923 6.55779 1.2844V6.56118L1.281 6.5877C1.0291 6.57444 0.830221 6.77331 0.84348 7.02522C0.856738 7.27713 1.0291 7.476 1.29426 7.476L6.55779 7.46274L6.55779 12.7395C6.55779 13.0047 6.7434 13.1903 7.00857 13.1903C7.12789 13.1771 7.23396 13.1505 7.32676 13.0577C7.41957 12.9649 7.45935 12.8721 7.45935 12.7395L7.47261 7.44949L12.7494 7.42297C12.8687 7.40971 13.0013 7.35668 13.0676 7.29039C13.1339 7.2241 13.2002 7.10477 13.2002 6.97219C13.2002 6.70702 13.0146 6.52141 12.7494 6.52141L7.45935 6.56118Z" fill="white"/>
7+
</svg>
8+
</i>
9+
</div>
10+
<div class="t4e-filter-drawer__content">
11+
<ng-content></ng-content>
12+
</div>
13+
<div class="t4e-filter-drawer__footer">
14+
<button (click)="handleClose()">
15+
<span>APLICAR FILTROS SELECCIONADOS</span>
16+
<i>
17+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
18+
<path d="M7.45935 6.56118L7.45935 1.2844C7.45935 1.01923 7.27373 0.833617 7.00857 0.833617C6.7434 0.833617 6.55779 1.01923 6.55779 1.2844V6.56118L1.281 6.5877C1.0291 6.57444 0.830221 6.77331 0.84348 7.02522C0.856738 7.27713 1.0291 7.476 1.29426 7.476L6.55779 7.46274L6.55779 12.7395C6.55779 13.0047 6.7434 13.1903 7.00857 13.1903C7.12789 13.1771 7.23396 13.1505 7.32676 13.0577C7.41957 12.9649 7.45935 12.8721 7.45935 12.7395L7.47261 7.44949L12.7494 7.42297C12.8687 7.40971 13.0013 7.35668 13.0676 7.29039C13.1339 7.2241 13.2002 7.10477 13.2002 6.97219C13.2002 6.70702 13.0146 6.52141 12.7494 6.52141L7.45935 6.56118Z" fill="white"/>
19+
</svg>
20+
</i>
21+
</button>
22+
</div>
23+
</aside>

‎src/app/shared/filter-drawer/filter-drawer.component.scss

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
@import "theme";
2+
3+
.t4e-filter-drawer {
4+
display: grid;
5+
grid-template-rows: auto 1fr auto;
6+
position: fixed;
7+
left: 0;
8+
bottom: 0;
9+
transform: translateY(100%);
10+
border-radius: 20px 20px 0 0;
11+
background-color: #FFF;
12+
width: 100%;
13+
max-height: 70vh;
14+
z-index: 200;
15+
16+
transition: transform 250ms ease-in-out;
17+
18+
&.opened {
19+
transform: translateY(0);
20+
}
21+
22+
23+
&__header {
24+
display: flex;
25+
justify-content: flex-start;
26+
align-items: center;
27+
padding: 8px 16px;
28+
background-color: lighten($color-primary-blue, 35%);
29+
border-radius: 20px 20px 0 0;
30+
31+
span {
32+
@include font('button');
33+
color: $color-primary-blue;
34+
}
35+
36+
i {
37+
width: 40px;
38+
height: 40px;
39+
background: $color-primary-blue;
40+
border-radius: 50%;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
box-shadow: 0px 5px 5px rgba(75, 93, 104, 0.1);
45+
transform: rotate(45deg);
46+
margin-left: auto;
47+
48+
svg {
49+
width: 26px;
50+
height: 26px;
51+
}
52+
}
53+
}
54+
55+
&__content {
56+
padding: 24px 16px;
57+
width: calc(100% - 32px);
58+
overflow-y: scroll;
59+
height: calc(100% - 50px);
60+
bottom: 0;
61+
62+
::ng-deep {
63+
.filters-wrapper {
64+
margin-bottom: 40px;
65+
width: 100%;
66+
67+
&__title {
68+
margin-bottom: 16px;
69+
}
70+
71+
&__content {
72+
button {
73+
width: 100%;
74+
margin-bottom: 8px;
75+
}
76+
}
77+
}
78+
79+
.results-panel {
80+
&__title {
81+
@include font('bodyTextLargeHighlight', 130%);
82+
color: $color-text-blue;
83+
letter-spacing: 0.005em;
84+
margin-bottom: 16px;
85+
}
86+
87+
&__text {
88+
@include font('bodyText');
89+
color: $color-text-blue;
90+
margin-bottom: 24px;
91+
92+
span {
93+
@include font('bodyTextHighlight');
94+
}
95+
}
96+
97+
&__clear-btn {
98+
background-color: lighten($color-red, 40%);
99+
display: flex;
100+
box-shadow: 0 5px 5px rgba(75, 93, 104, 0.1);
101+
border-radius: 20px;
102+
padding: 8px 16px;
103+
min-width: 236px;
104+
outline: none;
105+
justify-content: flex-start;
106+
align-items: center;
107+
108+
span {
109+
@include font('button');
110+
color: $color-red;
111+
text-transform: uppercase;
112+
}
113+
114+
i {
115+
background-color: $color-red;
116+
width: 24px;
117+
height: 24px;
118+
border-radius: 50%;
119+
display: flex;
120+
align-items: center;
121+
justify-content: center;
122+
margin-left: auto;
123+
transform: rotate(45deg);
124+
box-shadow: 0px 5px 5px rgba(75, 93, 104, 0.1);
125+
}
126+
}
127+
}
128+
}
129+
}
130+
131+
&__footer {
132+
display: flex;
133+
justify-content: center;
134+
width: calc(100% - 32px);
135+
padding: 16px;
136+
background-color: #FFF;
137+
138+
button {
139+
padding: 16px 24px;
140+
background-color: $color-green;
141+
display: flex;
142+
justify-content: flex-start;
143+
align-items: center;
144+
border-radius: 50px;
145+
146+
span {
147+
@include font('button');
148+
color: #FFF;
149+
margin-right: 12px;
150+
}
151+
152+
i {
153+
margin-left: auto;
154+
width: 21px;
155+
height: 21px;
156+
157+
svg {
158+
width: 21px;
159+
height: 21px;
160+
}
161+
}
162+
}
163+
}
164+
}

0 commit comments

Comments
 (0)