Skip to content

Commit 2d9ac96

Browse files
GuidoBRGuidoBR
committed
Improve filter modal
1 parent 9411e71 commit 2d9ac96

File tree

5 files changed

+68
-37
lines changed

5 files changed

+68
-37
lines changed

‎frontend/src/pages/Reports/ReportsListPage.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@
6666
&__category-tags {
6767
display: flex;
6868
flex-wrap: wrap;
69-
padding: 0.5rem 1rem;
69+
padding: 0.75rem 1rem;
7070
margin-bottom: 0.5rem;
71+
background-color: #f9f9f9;
72+
border-bottom: 1px solid var(--ion-color-light);
7173
}
7274

7375
&__content-container {
@@ -112,10 +114,14 @@
112114
}
113115

114116
&__filter-modal {
115-
--height: 80%;
117+
--height: auto;
116118
--width: 100%;
117-
--border-radius: 1rem 1rem 0 0;
119+
--border-radius: 20px 20px 0 0;
118120
--box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
121+
122+
&::part(content) {
123+
border-radius: 20px 20px 0 0;
124+
}
119125
}
120126

121127
.skeleton {

‎frontend/src/pages/Reports/ReportsListPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,8 @@ const ReportsListPage: React.FC = () => {
322322
isOpen={showFilterModal}
323323
onDidDismiss={() => setShowFilterModal(false)}
324324
className="reports-list-page__filter-modal"
325+
initialBreakpoint={0.9}
326+
breakpoints={[0, 0.9]}
325327
>
326328
<FilterPanel
327329
categories={categories}

‎frontend/src/pages/Reports/components/CategoryTag/CategoryTag.scss‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
.category-tag {
22
display: inline-flex;
33
align-items: center;
4-
background-color: rgba(var(--ion-color-primary-rgb), 0.1);
4+
background-color: white;
55
border-radius: 16px;
6-
padding: 4px 8px 4px 12px;
6+
padding: 4px 6px 4px 10px;
77
margin-right: 8px;
88
margin-bottom: 8px;
9+
border: 1px solid #e0e0e0;
10+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
911

1012
&__label {
11-
font-size: 14px;
12-
color: var(--ion-color-primary);
13+
font-size: 13px;
14+
color: var(--ion-color-medium);
1315
font-weight: 500;
1416
}
1517

@@ -19,13 +21,18 @@
1921
justify-content: center;
2022
background: none;
2123
border: none;
22-
padding: 0;
23-
margin-left: 4px;
24+
padding: 4px;
25+
margin-left: 2px;
2426
cursor: pointer;
27+
border-radius: 50%;
28+
29+
&:active {
30+
background-color: rgba(0, 0, 0, 0.05);
31+
}
2532
}
2633

2734
&__remove-icon {
28-
color: var(--ion-color-primary);
29-
font-size: 16px;
35+
color: var(--ion-color-medium);
36+
font-size: 14px;
3037
}
3138
}

‎frontend/src/pages/Reports/components/FilterPanel/FilterPanel.scss‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,65 @@
11
.filter-panel {
2-
padding: 1rem;
2+
padding: 1.5rem 1rem;
33
display: flex;
44
flex-direction: column;
55
height: 100%;
6-
background-color: var(--ion-background-color);
6+
background-color: white;
77

88
&__title {
99
font-size: 1.5rem;
1010
font-weight: 600;
11-
margin-bottom: 1.5rem;
11+
margin: 0 0 1.5rem;
1212
color: var(--ion-text-color);
1313
}
1414

1515
&__category-section {
1616
flex: 1;
17-
margin-bottom: 1rem;
17+
margin-bottom: 1.5rem;
1818
}
1919

2020
&__category-title {
21-
font-size: 1.1rem;
21+
font-size: 1rem;
2222
font-weight: 500;
23-
margin-bottom: 1rem;
23+
margin: 0 0 1rem;
2424
color: var(--ion-text-color);
2525
}
2626

27-
&__category-list {
28-
background: transparent;
27+
&__category-container {
28+
display: flex;
29+
flex-wrap: wrap;
30+
gap: 0.75rem;
2931
}
3032

31-
&__category-item {
32-
--padding-start: 0;
33-
--inner-padding-end: 0;
34-
--background: transparent;
35-
margin-bottom: 0.5rem;
33+
&__category-button {
34+
background-color: white;
35+
border: 1px solid #e0e0e0;
36+
border-radius: 8px;
37+
padding: 0.75rem 1.25rem;
38+
font-size: 14px;
39+
font-weight: 500;
40+
color: var(--ion-color-medium);
41+
transition: all 0.2s ease;
42+
cursor: pointer;
43+
44+
&--selected {
45+
background-color: #000000;
46+
color: white;
47+
border-color: #000000;
48+
}
3649
}
3750

3851
&__actions {
3952
padding-bottom: env(safe-area-inset-bottom);
4053
}
4154

4255
&__apply-button {
43-
--background: var(--ion-color-primary);
56+
--background: #4355B9;
4457
--color: white;
45-
height: 44px;
58+
height: 48px;
4659
font-weight: 600;
4760
margin: 0;
4861
--border-radius: 8px;
62+
text-transform: none;
63+
font-size: 16px;
4964
}
5065
}

‎frontend/src/pages/Reports/components/FilterPanel/FilterPanel.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { IonButton, IonList, IonItem, IonLabel, IonCheckbox } from '@ionic/react';
2+
import { IonButton } from '@ionic/react';
33
import { useTranslation } from 'react-i18next';
44
import './FilterPanel.scss';
55

@@ -45,18 +45,19 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
4545

4646
<div className="filter-panel__category-section">
4747
<h3 className="filter-panel__category-title">{t('filter.category', { ns: 'report' })}</h3>
48-
<IonList className="filter-panel__category-list">
48+
<div className="filter-panel__category-container">
4949
{categories.map((category) => (
50-
<IonItem key={category.id} className="filter-panel__category-item">
51-
<IonLabel>{category.label}</IonLabel>
52-
<IonCheckbox
53-
slot="end"
54-
checked={selectedCategories.includes(category.id)}
55-
onIonChange={() => handleCategoryToggle(category.id)}
56-
/>
57-
</IonItem>
50+
<button
51+
key={category.id}
52+
className={`filter-panel__category-button ${
53+
selectedCategories.includes(category.id) ? 'filter-panel__category-button--selected' : ''
54+
}`}
55+
onClick={() => handleCategoryToggle(category.id)}
56+
>
57+
{category.label}
58+
</button>
5859
))}
59-
</IonList>
60+
</div>
6061
</div>
6162

6263
<div className="filter-panel__actions">

0 commit comments

Comments
 (0)