Skip to content

Commit 19c5d3c

Browse files
dmytrotskodmytrotsko
committed
Moved some filters to the 'Additional filters' section
1 parent 0aa83c5 commit 19c5d3c

File tree

2 files changed

+125
-105
lines changed

2 files changed

+125
-105
lines changed

‎src/assets/css/custom_styles.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,4 +157,8 @@
157157
100% {
158158
transform: rotate(360deg);
159159
}
160+
}
161+
162+
.additional-filters-button {
163+
width: 100%;
160164
}

‎src/templates/indicatorsets/indicatorSetsFilters.html

Lines changed: 121 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -76,111 +76,6 @@ <h2 class="card-title font-size-25">Filters</h2>
7676
</div>
7777
</div>
7878
</div>
79-
<div class="accordion-item">
80-
<h2 class="accordion-header"
81-
id="flush-heading_{{ form.geographic_levels.auto_id }}">
82-
<button data-mdb-collapse-init
83-
class="accordion-button collapsed"
84-
type="button"
85-
data-mdb-toggle="collapse"
86-
data-mdb-target="#flush-collapse_{{ form.geographic_levels.auto_id }}"
87-
aria-expanded="false"
88-
aria-controls="flush-collapse_{{ form.geographic_levels.auto_id }}">
89-
Geographic Level
90-
<a tabindex="0"
91-
type="button"
92-
class="info-button filter-description-popover"
93-
data-mdb-container="body"
94-
data-mdb-ripple-init
95-
data-mdb-popover-init
96-
data-mdb-trigger="hover"
97-
data-mdb-placement="right"
98-
data-mdb-content="{{ filters_descriptions|dict_get:"geographic_levels" }}">
99-
<i class="far fa-circle-question"></i>
100-
</a>
101-
</button>
102-
</h2>
103-
<div id="flush-collapse_{{ form.geographic_levels.auto_id }}"
104-
class="accordion-collapse {% if form.geographic_levels.value %} {% else %}collapse{% endif %}"
105-
aria-labelledby="flush-heading_{{ form.geographic_levels.auto_id }}"
106-
data-mdb-parent="#accordionIndicatorSetFilters">
107-
<div class="accordion-body margin-top-1rem">
108-
<div class="bulk-select form-check">
109-
<input type="checkbox" class="form-check-input" id="select-all" />
110-
<label class="form-check-label" for="select-all">Select all</label>
111-
</div>
112-
{{ form.geographic_levels|as_crispy_field }}
113-
</div>
114-
</div>
115-
</div>
116-
<div class="accordion-item">
117-
<h2 class="accordion-header"
118-
id="flush-heading_{{ form.temporal_granularity.auto_id }}">
119-
<button data-mdb-collapse-init
120-
class="accordion-button collapsed"
121-
type="button"
122-
data-mdb-toggle="collapse"
123-
data-mdb-target="#flush-collapse_{{ form.temporal_granularity.auto_id }}"
124-
aria-expanded="false"
125-
aria-controls="flush-collapse_{{ form.temporal_granularity.auto_id }}">
126-
Temporal Granularity
127-
<a tabindex="0"
128-
type="button"
129-
class="info-button filter-description-popover"
130-
data-mdb-container="body"
131-
data-mdb-ripple-init
132-
data-mdb-popover-init
133-
data-mdb-trigger="hover"
134-
data-mdb-placement="right"
135-
data-mdb-content="{{ filters_descriptions|dict_get:"temporal_granularity" }}">
136-
<i class="far fa-circle-question"></i>
137-
</a>
138-
</button>
139-
</h2>
140-
<div id="flush-collapse_{{ form.temporal_granularity.auto_id }}"
141-
class="accordion-collapse {% if form.temporal_granularity.value %} {% else %}collapse{% endif %}"
142-
aria-labelledby="flush-heading_{{ form.temporal_granularity.auto_id }}"
143-
data-mdb-parent="#accordionIndicatorSetFilters">
144-
<div class="accordion-body margin-top-1rem">{{ form.temporal_granularity|as_crispy_field }}</div>
145-
</div>
146-
</div>
147-
<div class="accordion-item">
148-
<h2 class="accordion-header"
149-
id="flush-heading_{{ form.severity_pyramid_rungs.auto_id }}">
150-
<button data-mdb-collapse-init
151-
class="accordion-button collapsed"
152-
type="button"
153-
data-mdb-toggle="collapse"
154-
data-mdb-target="#flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}"
155-
aria-expanded="false"
156-
aria-controls="flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}">
157-
Surveillance Category
158-
<a tabindex="0"
159-
type="button"
160-
class="info-button filter-description-popover"
161-
data-mdb-container="body"
162-
data-mdb-ripple-init
163-
data-mdb-popover-init
164-
data-mdb-trigger="hover"
165-
data-mdb-placement="right"
166-
data-mdb-content="{{ filters_descriptions|dict_get:"severity_pyramid_rungs" }}">
167-
<i class="far fa-circle-question"></i>
168-
</a>
169-
</button>
170-
</h2>
171-
<div id="flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}"
172-
class="accordion-collapse {% if form.severity_pyramid_rungs.value %} {% else %}collapse{% endif %}"
173-
aria-labelledby="flush-heading_{{ form.severity_pyramid_rungs.auto_id }}"
174-
data-mdb-parent="#accordionIndicatorSetFilters">
175-
<div class="accordion-body margin-top-1rem">
176-
<div class="bulk-select form-check">
177-
<input type="checkbox" class="form-check-input" id="select-all" />
178-
<label class="form-check-label" for="select-all">Select all</label>
179-
</div>
180-
{{ form.severity_pyramid_rungs|as_crispy_field }}
181-
</div>
182-
</div>
183-
</div>
18479
<div class="accordion-item">
18580
<h2 class="accordion-header"
18681
id="flush-heading_{{ form.original_data_provider.auto_id }}">
@@ -232,6 +127,127 @@ <h2 class="card-title font-size-25">Filters</h2>
232127
<i class="far fa-circle-question"></i>
233128
</a>
234129
</div>
130+
<hr />
131+
<button
132+
class="btn btn-primary mb-3 additional-filters-button"
133+
type="button"
134+
data-mdb-collapse-init
135+
data-mdb-ripple-init
136+
data-mdb-target="#additional-filters"
137+
aria-expanded="false"
138+
aria-controls="additional-filters"
139+
>
140+
Additional filters
141+
</button>
142+
<div class="additional-filters {% if form.geographic_levels.value or form.temporal_granularity.value or form.severity_pyramid_rungs.value %}{% else %}collapse{% endif %}" id="additional-filters">
143+
<div class="accordion accordion-flush" id="accordionAdditionalFilters">
144+
<div class="accordion-item">
145+
<h2 class="accordion-header"
146+
id="flush-heading_{{ form.geographic_levels.auto_id }}">
147+
<button data-mdb-collapse-init
148+
class="accordion-button collapsed"
149+
type="button"
150+
data-mdb-toggle="collapse"
151+
data-mdb-target="#flush-collapse_{{ form.geographic_levels.auto_id }}"
152+
aria-expanded="false"
153+
aria-controls="flush-collapse_{{ form.geographic_levels.auto_id }}">
154+
Geographic Level
155+
<a tabindex="0"
156+
type="button"
157+
class="info-button filter-description-popover"
158+
data-mdb-container="body"
159+
data-mdb-ripple-init
160+
data-mdb-popover-init
161+
data-mdb-trigger="hover"
162+
data-mdb-placement="right"
163+
data-mdb-content="{{ filters_descriptions|dict_get:"geographic_levels" }}">
164+
<i class="far fa-circle-question"></i>
165+
</a>
166+
</button>
167+
</h2>
168+
<div id="flush-collapse_{{ form.geographic_levels.auto_id }}"
169+
class="accordion-collapse {% if form.geographic_levels.value %} {% else %}collapse{% endif %}"
170+
aria-labelledby="flush-heading_{{ form.geographic_levels.auto_id }}"
171+
data-mdb-parent="#accordionAdditionalFilters">
172+
<div class="accordion-body margin-top-1rem">
173+
<div class="bulk-select form-check">
174+
<input type="checkbox" class="form-check-input" id="select-all" />
175+
<label class="form-check-label" for="select-all">Select all</label>
176+
</div>
177+
{{ form.geographic_levels|as_crispy_field }}
178+
</div>
179+
</div>
180+
</div>
181+
<div class="accordion-item">
182+
<h2 class="accordion-header"
183+
id="flush-heading_{{ form.temporal_granularity.auto_id }}">
184+
<button data-mdb-collapse-init
185+
class="accordion-button collapsed"
186+
type="button"
187+
data-mdb-toggle="collapse"
188+
data-mdb-target="#flush-collapse_{{ form.temporal_granularity.auto_id }}"
189+
aria-expanded="false"
190+
aria-controls="flush-collapse_{{ form.temporal_granularity.auto_id }}">
191+
Temporal Granularity
192+
<a tabindex="0"
193+
type="button"
194+
class="info-button filter-description-popover"
195+
data-mdb-container="body"
196+
data-mdb-ripple-init
197+
data-mdb-popover-init
198+
data-mdb-trigger="hover"
199+
data-mdb-placement="right"
200+
data-mdb-content="{{ filters_descriptions|dict_get:"temporal_granularity" }}">
201+
<i class="far fa-circle-question"></i>
202+
</a>
203+
</button>
204+
</h2>
205+
<div id="flush-collapse_{{ form.temporal_granularity.auto_id }}"
206+
class="accordion-collapse {% if form.temporal_granularity.value %} {% else %}collapse{% endif %}"
207+
aria-labelledby="flush-heading_{{ form.temporal_granularity.auto_id }}"
208+
data-mdb-parent="#accordionAdditionalFilters">
209+
<div class="accordion-body margin-top-1rem">{{ form.temporal_granularity|as_crispy_field }}</div>
210+
</div>
211+
</div>
212+
<div class="accordion-item">
213+
<h2 class="accordion-header"
214+
id="flush-heading_{{ form.severity_pyramid_rungs.auto_id }}">
215+
<button data-mdb-collapse-init
216+
class="accordion-button collapsed"
217+
type="button"
218+
data-mdb-toggle="collapse"
219+
data-mdb-target="#flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}"
220+
aria-expanded="false"
221+
aria-controls="flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}">
222+
Surveillance Category
223+
<a tabindex="0"
224+
type="button"
225+
class="info-button filter-description-popover"
226+
data-mdb-container="body"
227+
data-mdb-ripple-init
228+
data-mdb-popover-init
229+
data-mdb-trigger="hover"
230+
data-mdb-placement="right"
231+
data-mdb-content="{{ filters_descriptions|dict_get:"severity_pyramid_rungs" }}">
232+
<i class="far fa-circle-question"></i>
233+
</a>
234+
</button>
235+
</h2>
236+
<div id="flush-collapse_{{ form.severity_pyramid_rungs.auto_id }}"
237+
class="accordion-collapse {% if form.severity_pyramid_rungs.value %} {% else %}collapse{% endif %}"
238+
aria-labelledby="flush-heading_{{ form.severity_pyramid_rungs.auto_id }}"
239+
data-mdb-parent="#accordionAdditionalFilters">
240+
<div class="accordion-body margin-top-1rem">
241+
<div class="bulk-select form-check">
242+
<input type="checkbox" class="form-check-input" id="select-all" />
243+
<label class="form-check-label" for="select-all">Select all</label>
244+
</div>
245+
{{ form.severity_pyramid_rungs|as_crispy_field }}
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
235251
</div>
236252
<div class="card-body no-padding-top">
237253
<div class="d-grid gap-2 mt-3">

0 commit comments

Comments
 (0)