diff --git a/cara/apps/calculator/model_generator.py b/cara/apps/calculator/model_generator.py index 27f10ad5..29f7f7bb 100644 --- a/cara/apps/calculator/model_generator.py +++ b/cara/apps/calculator/model_generator.py @@ -42,7 +42,6 @@ class FormData: ventilation_type: str volume_type: str window_height: float - window_width: float windows_number: int windows_open: str @@ -113,7 +112,6 @@ class FormData: ventilation_type=form_data['ventilation_type'], volume_type=form_data['volume_type'], window_height=float(form_data['window_height']), - window_width=float(form_data['window_width']), windows_number=int(form_data['windows_number']), windows_open=form_data['windows_open'], infected_start=time_string_to_minutes(form_data['infected_start']), @@ -314,7 +312,6 @@ def baseline_raw_form_data(): 'ventilation_type': 'natural', 'volume_type': 'room_volume', 'window_height': '2', - 'window_width': '2', 'windows_number': '1', 'windows_open': 'interval' } diff --git a/cara/apps/calculator/static/css/form.css b/cara/apps/calculator/static/css/form.css index 6a936803..bbc7f767 100644 --- a/cara/apps/calculator/static/css/form.css +++ b/cara/apps/calculator/static/css/form.css @@ -12,4 +12,93 @@ .red_text { color: red; +} + +#disclaimer,#code_license { + font-size: 9pt; +} + +/* -------Tool tip ------- */ + +.tooltip_text { + position: relative; + background: rgba(59, 72, 80, 0.9); + padding: 0px 8px; + margin: 5px; + font-size: 13px; + border-radius: 100%; + color: #FFF; +} + +[data-tooltip] { + position: relative; + display: inline-block; + z-index: 10; +} + +/* Positioning and visibility settings */ +[data-tooltip]:before, +[data-tooltip]:after { + position: absolute; + visibility: hidden; + opacity: 0; + left: 50%; + bottom: calc(100% + 5px); + pointer-events: none; + transition: 0.2s; + will-change: transform; +} + +/* The actual tooltip with a dynamic width */ +[data-tooltip]:before { + content: attr(data-tooltip); + padding: 10px 18px; + min-width: 50px; + max-width: 200px; + width: max-content; + width: -moz-max-content; + border-radius: 6px; + font-size: 14px; + background-color: rgba(59, 72, 80, 0.9); + background-image: linear-gradient(30deg, + rgba(59, 72, 80, 0.44), + rgba(59, 68, 75, 0.44), + rgba(60, 82, 88, 0.44)); + box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2); + color: #fff; + text-align: center; + white-space: pre-wrap; + transform: translate(-50%, -5px) scale(0.5); +} + +/* Tooltip arrow */ +[data-tooltip]:after { + content: ''; + border-style: solid; + border-width: 5px 5px 0px 5px; + border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent; + transition-duration: 0s; /* If the mouse leaves the element, + the transition effects for the + tooltip arrow are "turned off" */ + transform-origin: top; /* Orientation setting for the + slide-down effect */ + transform: translateX(-50%) scaleY(0); +} + +/* Tooltip becomes visible at hover */ +[data-tooltip]:hover:before, +[data-tooltip]:hover:after { + visibility: visible; + opacity: 1; +} +/* Scales from 0.5 to 1 -> grow effect */ +[data-tooltip]:hover:before { + transition-delay: 0.3s; + transform: translate(-50%, -5px) scale(1); +} +/* Slide down effect only on mouseenter (NOT on mouseleave) */ +[data-tooltip]:hover:after { + transition-delay: 0.5s; /* Starting after the grow effect */ + transition-duration: 0.2s; + transform: translateX(-50%) scaleY(1); } \ No newline at end of file diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js index a15f403f..ef5f29d8 100644 --- a/cara/apps/calculator/static/js/form.js +++ b/cara/apps/calculator/static/js/form.js @@ -109,7 +109,6 @@ function require_mechanical_ventilation(option) { function require_natural_ventilation(option) { $("#windows_number").prop('required', option); $("#window_height").prop('required', option); - $("#window_width").prop('required', option); $("#opening_distance").prop('required', option); $("#always").prop('required', option); $("#interval").prop('required', option); @@ -133,12 +132,20 @@ function require_recurrent_event(option) { function require_lunch(option) { $("#lunch_start").prop('required', option); - $("#mask_ffp2").prop('required', option); + $("#lunch_finish").prop('required', option); + if (option) { + document.getElementById("lunch_start").value = "12:30"; + document.getElementById("lunch_finish").value = "13:30"; + } + else { + document.getElementById("lunch_start").value = ""; + document.getElementById("lunch_finish").value = ""; + } } -function require_lunch(option) { +function require_mask(option) { $("#mask_type1").prop('required', option); - $("#lunch_finish").prop('required', option); + $("#mask_ffp2").prop('required', option); } function require_hepa(option) { diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2 index 6f05e286..7d9ddb85 100644 --- a/cara/apps/calculator/templates/calculator.form.html.j2 +++ b/cara/apps/calculator/templates/calculator.form.html.j2 @@ -29,7 +29,7 @@