Skip to content

Commit f851243

Browse files
dmytrotskodmytrotsko
committed
OKRS24-165 Replaced modal with popover.
1 parent 717ed2c commit f851243

File tree

3 files changed

+30
-195
lines changed

3 files changed

+30
-195
lines changed

‎src/assets/css/custom.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,8 @@
125125

126126
.select2-container .select2-selection--single .select2-selection__rendered {
127127
padding-left: 0px!important;
128-
}
128+
}
129+
130+
.popover {
131+
max-width: 50%;
132+
}

‎src/templates/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
<link href="{% static 'vendor/remixicon/remixicon.css' %}" rel="stylesheet">
2828
<link href="{% static 'vendor/simple-datatables/style.css' %}" rel="stylesheet">
2929

30+
<!-- Vendor JS Files -->
31+
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
32+
3033
<!-- Template Main CSS File -->
3134
<link href="{% static 'css/style.css' %}" rel="stylesheet" />
3235
<link href="{% static 'css/custom.css' %}" rel="stylesheet" />
@@ -127,7 +130,6 @@
127130
<!-- Template Main JS File -->
128131

129132
<script src="{% static 'vendor/apexcharts/apexcharts.min.js' %}"></script>
130-
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
131133
<script src="{% static 'vendor/chart.js/chart.umd.js' %}"></script>
132134
<script src="{% static 'vendor/echarts/echarts.min.js' %}"></script>
133135
<script src="{% static 'vendor/quill/quill.min.js' %}"></script>
@@ -136,7 +138,7 @@
136138

137139
<script src="{% static 'js/main.js' %}"></script>
138140

139-
141+
140142
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
141143
</body>
142144
</html>

‎src/templates/signals/signals.html

+21-192
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ <h2 class="accordion-header" id="pathogen-heading">
2525
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#pathogen-collapse" aria-expanded="true" aria-controls="pathogen-collapse">
2626
<label for="id_pathogen" class="form-label">
2727
Pathogen
28-
<a href="#" data-bs-toggle="modal" data-bs-target="#pathogen_modal">
29-
<i class="bi bi-info-circle"></i>
30-
</a>
28+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Pathogen" data-bs-content="{{ filters_descriptions.SignalFilter.pathogen }}"><i class="bi bi-info-circle"></i></a>
3129
</label>
3230
</button>
3331
</h2>
@@ -50,9 +48,7 @@ <h2 class="accordion-header" id="active-heading">
5048
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#active-collapse" aria-expanded="false" aria-controls="active-collapse">
5149
<label for="id_active" class="form-label">
5250
Active
53-
<a href="#" data-bs-toggle="modal" data-bs-target="#active_modal">
54-
<i class="bi bi-info-circle"></i>
55-
</a>
51+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Active" data-bs-content="{{ filters_descriptions.SignalFilter.active }}"><i class="bi bi-info-circle"></i></a>
5652
</label>
5753
</button>
5854
</h2>
@@ -71,9 +67,7 @@ <h2 class="accordion-header" id="available_geography-heading">
7167
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#available_geography-collapse" aria-expanded="false" aria-controls="active-collapse">
7268
<label for="id_available_geography" class="form-label">
7369
Available Geography
74-
<a href="#" data-bs-toggle="modal" data-bs-target="#available_geography_modal">
75-
<i class="bi bi-info-circle"></i>
76-
</a>
70+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Available Geography" data-bs-content="{{ filters_descriptions.SignalFilter.available_geography }}"><i class="bi bi-info-circle"></i></a>
7771
</label>
7872
</button>
7973
</h2>
@@ -96,9 +90,7 @@ <h2 class="accordion-header" id="available_geography-heading">
9690
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#signal_type-collapse" aria-expanded="false" aria-controls="active-collapse">
9791
<label for="id_signal_type" class="form-label">
9892
Signal Type
99-
<a href="#" data-bs-toggle="modal" data-bs-target="#signal_type_modal">
100-
<i class="bi bi-info-circle"></i>
101-
</a>
93+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Signal Type" data-bs-content="{{ filters_descriptions.SignalFilter.signal_type }}"><i class="bi bi-info-circle"></i></a>
10294
</label>
10395
</button>
10496
</h2>
@@ -121,9 +113,7 @@ <h2 class="accordion-header" id="available_geography-heading">
121113
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#category-collapse" aria-expanded="false" aria-controls="active-collapse">
122114
<label for="id_category" class="form-label">
123115
Category
124-
<a href="#" data-bs-toggle="modal" data-bs-target="#category_modal">
125-
<i class="bi bi-info-circle"></i>
126-
</a>
116+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Category" data-bs-content="{{ filters_descriptions.SignalFilter.category }}"><i class="bi bi-info-circle"></i></a>
127117
</label>
128118
</button>
129119
</h2>
@@ -146,9 +136,7 @@ <h2 class="accordion-header" id="available_geography-heading">
146136
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#format_type-collapse" aria-expanded="false" aria-controls="active-collapse">
147137
<label for="id_format_type" class="form-label">
148138
Format Type
149-
<a href="#" data-bs-toggle="modal" data-bs-target="#format_type_modal">
150-
<i class="bi bi-info-circle"></i>
151-
</a>
139+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Format Type" data-bs-content="{{ filters_descriptions.SignalFilter.format_type }}"><i class="bi bi-info-circle"></i></a>
152140
</label>
153141
</button>
154142
</h2>
@@ -171,9 +159,7 @@ <h2 class="accordion-header" id="available_geography-heading">
171159
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#source-collapse" aria-expanded="false" aria-controls="active-collapse">
172160
<label for="id_source" class="form-label">
173161
Source
174-
<a href="#" data-bs-toggle="modal" data-bs-target="#source_modal">
175-
<i class="bi bi-info-circle"></i>
176-
</a>
162+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Source" data-bs-content="{{ filters_descriptions.SignalFilter.source }}"><i class="bi bi-info-circle"></i></a>
177163
</label>
178164
</button>
179165
</h2>
@@ -196,9 +182,7 @@ <h2 class="accordion-header" id="available_geography-heading">
196182
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#time_label-collapse" aria-expanded="false" aria-controls="active-collapse">
197183
<label for="id_time_label" class="form-label">
198184
Time Label
199-
<a href="#" data-bs-toggle="modal" data-bs-target="#time_label_modal">
200-
<i class="bi bi-info-circle"></i>
201-
</a>
185+
<a tabindex="0" role="button" class="info-button" data-bs-toggle="popover" data-bs-title="Time Label" data-bs-content="{{ filters_descriptions.SignalFilter.time_label }}"><i class="bi bi-info-circle"></i></a>
202186
</label>
203187
</button>
204188
</h2>
@@ -223,12 +207,6 @@ <h2 class="accordion-header" id="available_geography-heading">
223207
</div>
224208
<div class="col-9">
225209
<div class="row margin-bottom-1rem d-flex justify-content-end">
226-
<!-- <div class="col-4">
227-
<div class="btn-group" role="group">
228-
<a href="https://delphi.cmu.edu/covidcast/export/" target="_blank" class="btn btn-primary" role="button">Export</a>
229-
<a href="https://delphi.cmu.edu/epivis/" target="_blank" class="btn btn-primary" role="button">Chart</a>
230-
</div>
231-
</div> -->
232210
<div class="col-4">
233211
<div class="input-group mb-3 d-flex justify-content-end">
234212
<label class="input-group-text form-label" for="id_order_by" id="order_by_label">Sort By</label>
@@ -294,172 +272,23 @@ <h2 class="accordion-header" id="available_geography-heading">
294272
</div>
295273
</div>
296274
</div>
297-
<div class="modal fade" id="pathogen_modal" tabindex="-1" style="display: none;" aria-hidden="true">
298-
<div class="modal-dialog modal-lg">
299-
<div class="modal-content">
300-
<div class="modal-header">
301-
<h5 class="modal-title">Pathogen</h5>
302-
<button type="button" class="btn-close" data-bs-dismiss="modal"
303-
aria-label="Close"></button>
304-
</div>
305-
<div class="modal-body">
306-
{{ filters_descriptions.SignalFilter.pathogen }}
307-
</div>
308-
<div class="modal-footer">
309-
<button type="button" class="btn btn-secondary"
310-
data-bs-dismiss="modal">Close</button>
311-
</div>
312-
</div>
313-
</div>
314-
</div>
315-
<div class="modal fade" id="active_modal" tabindex="-1" style="display: none;" aria-hidden="true">
316-
<div class="modal-dialog modal-lg">
317-
<div class="modal-content">
318-
<div class="modal-header">
319-
<h5 class="modal-title">Active</h5>
320-
<button type="button" class="btn-close" data-bs-dismiss="modal"
321-
aria-label="Close"></button>
322-
</div>
323-
<div class="modal-body">
324-
{{ filters_descriptions.SignalFilter.active }}
325-
</div>
326-
<div class="modal-footer">
327-
<button type="button" class="btn btn-secondary"
328-
data-bs-dismiss="modal">Close</button>
329-
</div>
330-
</div>
331-
</div>
332-
</div>
333-
<div class="modal fade" id="available_geography_modal" tabindex="-1" style="display: none;" aria-hidden="true">
334-
<div class="modal-dialog modal-lg">
335-
<div class="modal-content">
336-
<div class="modal-header">
337-
<h5 class="modal-title">Available Geography</h5>
338-
<button type="button" class="btn-close" data-bs-dismiss="modal"
339-
aria-label="Close"></button>
340-
</div>
341-
<div class="modal-body">
342-
{{ filters_descriptions.SignalFilter.available_geography }}
343-
</div>
344-
<div class="modal-footer">
345-
<button type="button" class="btn btn-secondary"
346-
data-bs-dismiss="modal">Close</button>
347-
</div>
348-
</div>
349-
</div>
350-
</div>
351-
<div class="modal fade" id="signal_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
352-
<div class="modal-dialog modal-lg">
353-
<div class="modal-content">
354-
<div class="modal-header">
355-
<h5 class="modal-title">Signal Type</h5>
356-
<button type="button" class="btn-close" data-bs-dismiss="modal"
357-
aria-label="Close"></button>
358-
</div>
359-
<div class="modal-body">
360-
{{ filters_descriptions.SignalFilter.signal_type }}
361-
</div>
362-
<div class="modal-footer">
363-
<button type="button" class="btn btn-secondary"
364-
data-bs-dismiss="modal">Close</button>
365-
</div>
366-
</div>
367-
</div>
368-
</div>
369-
<div class="modal fade" id="signal_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
370-
<div class="modal-dialog modal-lg">
371-
<div class="modal-content">
372-
<div class="modal-header">
373-
<h5 class="modal-title">Signal Type</h5>
374-
<button type="button" class="btn-close" data-bs-dismiss="modal"
375-
aria-label="Close"></button>
376-
</div>
377-
<div class="modal-body">
378-
{{ filters_descriptions.SignalFilter.signal_type }}
379-
</div>
380-
<div class="modal-footer">
381-
<button type="button" class="btn btn-secondary"
382-
data-bs-dismiss="modal">Close</button>
383-
</div>
384-
</div>
385-
</div>
386-
</div>
387-
<div class="modal fade" id="category_modal" tabindex="-1" style="display: none;"aria-hidden="true">
388-
<div class="modal-dialog modal-lg">
389-
<div class="modal-content">
390-
<div class="modal-header">
391-
<h5 class="modal-title">Category</h5>
392-
<button type="button" class="btn-close" data-bs-dismiss="modal"
393-
aria-label="Close"></button>
394-
</div>
395-
<div class="modal-body">
396-
{{ filters_descriptions.SignalFilter.category }}
397-
</div>
398-
<div class="modal-footer">
399-
<button type="button" class="btn btn-secondary"
400-
data-bs-dismiss="modal">Close</button>
401-
</div>
402-
</div>
403-
</div>
404-
</div>
405-
<div class="modal fade" id="format_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
406-
<div class="modal-dialog modal-lg">
407-
<div class="modal-content">
408-
<div class="modal-header">
409-
<h5 class="modal-title">Format Type</h5>
410-
<button type="button" class="btn-close" data-bs-dismiss="modal"
411-
aria-label="Close"></button>
412-
</div>
413-
<div class="modal-body">
414-
{{ filters_descriptions.SignalFilter.format_type }}
415-
</div>
416-
<div class="modal-footer">
417-
<button type="button" class="btn btn-secondary"
418-
data-bs-dismiss="modal">Close</button>
419-
</div>
420-
</div>
421-
</div>
422-
</div>
423-
<div class="modal fade" id="source_modal" tabindex="-1" style="display: none;" aria-hidden="true">
424-
<div class="modal-dialog modal-lg">
425-
<div class="modal-content">
426-
<div class="modal-header">
427-
<h5 class="modal-title">Source</h5>
428-
<button type="button" class="btn-close" data-bs-dismiss="modal"
429-
aria-label="Close"></button>
430-
</div>
431-
<div class="modal-body">
432-
{{ filters_descriptions.SignalFilter.source }}
433-
</div>
434-
<div class="modal-footer">
435-
<button type="button" class="btn btn-secondary"
436-
data-bs-dismiss="modal">Close</button>
437-
</div>
438-
</div>
439-
</div>
440-
</div>
441-
<div class="modal fade" id="time_label_modal" tabindex="-1" style="display: none;" aria-hidden="true">
442-
<div class="modal-dialog modal-lg">
443-
<div class="modal-content">
444-
<div class="modal-header">
445-
<h5 class="modal-title">Time Label</h5>
446-
<button type="button" class="btn-close" data-bs-dismiss="modal"
447-
aria-label="Close"></button>
448-
</div>
449-
<div class="modal-body">
450-
{{ filters_descriptions.SignalFilter.time_label }}
451-
</div>
452-
<div class="modal-footer">
453-
<button type="button" class="btn btn-secondary"
454-
data-bs-dismiss="modal">Close</button>
455-
</div>
456-
</div>
457-
</div>
458-
</div>
275+
</div>
459276
</form>
460277

461278
<script>
462279

280+
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
281+
var popoverOptions = {
282+
trigger: "hover,click,focus",
283+
container: "body",
284+
delay: {
285+
"show": 500,
286+
"hide": 100
287+
}
288+
};
289+
const popoverList = [...popoverTriggerList].map(
290+
popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, popoverOptions));
291+
463292
function showAllOptions(event, parentDiv) {
464293
event.preventDefault();
465294
var childDivs = parentDiv.querySelectorAll('.form-check');

0 commit comments

Comments
 (0)