Skip to content

Commit 8c88f58

Browse files
dmytrotskodmytrotsko
authored
Merge pull request #119 from cmu-delphi/OKRS24-165
OKRS24-165
2 parents 176bd87 + 955591c commit 8c88f58

File tree

3 files changed

+32
-197
lines changed

3 files changed

+32
-197
lines changed

‎src/assets/css/custom.css

+4
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,7 @@
130130
.select2-container .select2-selection--single .select2-selection__rendered {
131131
padding-left: 0px!important;
132132
}
133+
134+
.popover {
135+
max-width: 50%;
136+
}

‎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

+24-195
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>
@@ -193,12 +179,10 @@ <h2 class="accordion-header" id="available_geography-heading">
193179
</div>
194180
<div class="accordion-item">
195181
<h2 class="accordion-header" id="available_geography-heading">
196-
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#time_type-collapse" aria-expanded="false" aria-controls="active-collapse">
197-
<label for="id_time_type" class="form-label">
198-
Time Type
199-
<a href="#" data-bs-toggle="modal" data-bs-target="#time_type_modal">
200-
<i class="bi bi-info-circle"></i>
201-
</a>
182+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#time_label-collapse" aria-expanded="false" aria-controls="active-collapse">
183+
<label for="id_time_label" class="form-label">
184+
Time Label
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-6">
233211
<div class="input-group mb-3 d-flex justify-content-start">
234212
<span class="pt-05">
@@ -301,172 +279,23 @@ <h2 class="accordion-header" id="available_geography-heading">
301279
</div>
302280
</div>
303281
</div>
304-
<div class="modal fade" id="pathogen_modal" tabindex="-1" style="display: none;" aria-hidden="true">
305-
<div class="modal-dialog modal-lg">
306-
<div class="modal-content">
307-
<div class="modal-header">
308-
<h5 class="modal-title">Pathogen</h5>
309-
<button type="button" class="btn-close" data-bs-dismiss="modal"
310-
aria-label="Close"></button>
311-
</div>
312-
<div class="modal-body">
313-
{{ filters_descriptions.SignalFilter.pathogen }}
314-
</div>
315-
<div class="modal-footer">
316-
<button type="button" class="btn btn-secondary"
317-
data-bs-dismiss="modal">Close</button>
318-
</div>
319-
</div>
320-
</div>
321-
</div>
322-
<div class="modal fade" id="active_modal" tabindex="-1" style="display: none;" aria-hidden="true">
323-
<div class="modal-dialog modal-lg">
324-
<div class="modal-content">
325-
<div class="modal-header">
326-
<h5 class="modal-title">Active</h5>
327-
<button type="button" class="btn-close" data-bs-dismiss="modal"
328-
aria-label="Close"></button>
329-
</div>
330-
<div class="modal-body">
331-
{{ filters_descriptions.SignalFilter.active }}
332-
</div>
333-
<div class="modal-footer">
334-
<button type="button" class="btn btn-secondary"
335-
data-bs-dismiss="modal">Close</button>
336-
</div>
337-
</div>
338-
</div>
339-
</div>
340-
<div class="modal fade" id="available_geography_modal" tabindex="-1" style="display: none;" aria-hidden="true">
341-
<div class="modal-dialog modal-lg">
342-
<div class="modal-content">
343-
<div class="modal-header">
344-
<h5 class="modal-title">Available Geography</h5>
345-
<button type="button" class="btn-close" data-bs-dismiss="modal"
346-
aria-label="Close"></button>
347-
</div>
348-
<div class="modal-body">
349-
{{ filters_descriptions.SignalFilter.available_geography }}
350-
</div>
351-
<div class="modal-footer">
352-
<button type="button" class="btn btn-secondary"
353-
data-bs-dismiss="modal">Close</button>
354-
</div>
355-
</div>
356-
</div>
357-
</div>
358-
<div class="modal fade" id="signal_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
359-
<div class="modal-dialog modal-lg">
360-
<div class="modal-content">
361-
<div class="modal-header">
362-
<h5 class="modal-title">Signal Type</h5>
363-
<button type="button" class="btn-close" data-bs-dismiss="modal"
364-
aria-label="Close"></button>
365-
</div>
366-
<div class="modal-body">
367-
{{ filters_descriptions.SignalFilter.signal_type }}
368-
</div>
369-
<div class="modal-footer">
370-
<button type="button" class="btn btn-secondary"
371-
data-bs-dismiss="modal">Close</button>
372-
</div>
373-
</div>
374-
</div>
375-
</div>
376-
<div class="modal fade" id="signal_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
377-
<div class="modal-dialog modal-lg">
378-
<div class="modal-content">
379-
<div class="modal-header">
380-
<h5 class="modal-title">Signal Type</h5>
381-
<button type="button" class="btn-close" data-bs-dismiss="modal"
382-
aria-label="Close"></button>
383-
</div>
384-
<div class="modal-body">
385-
{{ filters_descriptions.SignalFilter.signal_type }}
386-
</div>
387-
<div class="modal-footer">
388-
<button type="button" class="btn btn-secondary"
389-
data-bs-dismiss="modal">Close</button>
390-
</div>
391-
</div>
392-
</div>
393-
</div>
394-
<div class="modal fade" id="category_modal" tabindex="-1" style="display: none;"aria-hidden="true">
395-
<div class="modal-dialog modal-lg">
396-
<div class="modal-content">
397-
<div class="modal-header">
398-
<h5 class="modal-title">Category</h5>
399-
<button type="button" class="btn-close" data-bs-dismiss="modal"
400-
aria-label="Close"></button>
401-
</div>
402-
<div class="modal-body">
403-
{{ filters_descriptions.SignalFilter.category }}
404-
</div>
405-
<div class="modal-footer">
406-
<button type="button" class="btn btn-secondary"
407-
data-bs-dismiss="modal">Close</button>
408-
</div>
409-
</div>
410-
</div>
411-
</div>
412-
<div class="modal fade" id="format_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
413-
<div class="modal-dialog modal-lg">
414-
<div class="modal-content">
415-
<div class="modal-header">
416-
<h5 class="modal-title">Format Type</h5>
417-
<button type="button" class="btn-close" data-bs-dismiss="modal"
418-
aria-label="Close"></button>
419-
</div>
420-
<div class="modal-body">
421-
{{ filters_descriptions.SignalFilter.format_type }}
422-
</div>
423-
<div class="modal-footer">
424-
<button type="button" class="btn btn-secondary"
425-
data-bs-dismiss="modal">Close</button>
426-
</div>
427-
</div>
428-
</div>
429-
</div>
430-
<div class="modal fade" id="source_modal" tabindex="-1" style="display: none;" aria-hidden="true">
431-
<div class="modal-dialog modal-lg">
432-
<div class="modal-content">
433-
<div class="modal-header">
434-
<h5 class="modal-title">Source</h5>
435-
<button type="button" class="btn-close" data-bs-dismiss="modal"
436-
aria-label="Close"></button>
437-
</div>
438-
<div class="modal-body">
439-
{{ filters_descriptions.SignalFilter.source }}
440-
</div>
441-
<div class="modal-footer">
442-
<button type="button" class="btn btn-secondary"
443-
data-bs-dismiss="modal">Close</button>
444-
</div>
445-
</div>
446-
</div>
447-
</div>
448-
<div class="modal fade" id="time_type_modal" tabindex="-1" style="display: none;" aria-hidden="true">
449-
<div class="modal-dialog modal-lg">
450-
<div class="modal-content">
451-
<div class="modal-header">
452-
<h5 class="modal-title">Time Type</h5>
453-
<button type="button" class="btn-close" data-bs-dismiss="modal"
454-
aria-label="Close"></button>
455-
</div>
456-
<div class="modal-body">
457-
{{ filters_descriptions.SignalFilter.time_type }}
458-
</div>
459-
<div class="modal-footer">
460-
<button type="button" class="btn btn-secondary"
461-
data-bs-dismiss="modal">Close</button>
462-
</div>
463-
</div>
464-
</div>
465-
</div>
282+
</div>
466283
</form>
467284

468285
<script>
469286

287+
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
288+
var popoverOptions = {
289+
trigger: "hover,click,focus",
290+
container: "body",
291+
delay: {
292+
"show": 500,
293+
"hide": 100
294+
}
295+
};
296+
const popoverList = [...popoverTriggerList].map(
297+
popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, popoverOptions));
298+
470299
function showAllOptions(event, parentDiv) {
471300
event.preventDefault();
472301
var childDivs = parentDiv.querySelectorAll('.form-check');

0 commit comments

Comments
 (0)