diff --git a/cara/apps/calculator/static/css/form.css b/cara/apps/calculator/static/css/form.css index 4c495f66..254dc4b4 100644 --- a/cara/apps/calculator/static/css/form.css +++ b/cara/apps/calculator/static/css/form.css @@ -16,4 +16,89 @@ #disclaimer,#code_license { font-size: 9pt; +} + +/* -------Tool tip ------- */ + +.tooltip_text { + position: relative; + background: rgba(59, 72, 80, 0.9); + padding: 0px 7px; + margin: 5px; + font-size: 18px; + border-radius: 80%; + 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/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2 index 401cefd9..c040e903 100644 --- a/cara/apps/calculator/templates/calculator.form.html.j2 +++ b/cara/apps/calculator/templates/calculator.form.html.j2 @@ -37,7 +37,10 @@ Simulation name:
Room number:
- Room data:
+ Room data: +
+ ? +

Room volume:   
@@ -46,6 +49,10 @@
+ Ventilation data: +
+ ? +

Ventilation type: No ventilation Mechanical @@ -77,7 +84,10 @@
- Face masks:
+ Face masks: +
+ ? +

Are masks worn when occupants are at workstations? Yes No
@@ -90,8 +100,10 @@
- Event data:
- Attendees:
+ Event data: +
+ ? +

Total number of occupants:
Number of infected people:
@@ -110,7 +122,10 @@
- When is the event?
+ When is the event? +
+ ? +

   @@ -135,6 +150,7 @@
+ Activity breaks:
Lunch break: @@ -171,26 +187,32 @@
+ + Quick Guide:
This tool simulates the long range airborne spread SARS-CoV-2 virus in a finite volume and estimates the risk of COVID-19 infection. It is based on current scientific data and can be used to measures the effectiveness of different mitigation measures.
- - For detailed explanations on how to use this tool please see the COVID Calculator user-guide .
- - Usage summary:
- - Room data
- Enter the data about the area you wish to study. You can find these figures in GIS Portal, or by measuring them yourself.
- Ventilation data
- Enter the data on the available means for venting of indoor spaces. For mechanical ventilation, you should check with a specialist for the air flow or air change rate.
- For HEPA filtration, you should enter the air flow of the device. As a first estimate, you may use the following values based on the differnet fan velocities of a specific commercial device proposed by the HSE Unit - Level 6 (max) = 430 m^3/h (noisy); Level 5 = 250 m^3/h (ok w.r.t. noise); Level 4 = 130 m^3/h (silent); Level 3 = 95 m^3/h (silent).
- Event data
- Enter the total number of occupants in the room and how many of them you assume are infected. We have provided common activity types:
- Office/Meeting = typical scenario all persons seated, talking.
- Workshop = assembly workshop environment, all persons doing light exercise, talking.
- Training = one person (the trainer) standing, talking, all others seated, talking quietly (whispering). It is assumed the trainer is the infected person, for the worst case scenario.
-You should specify if the event is a one off (give date) or recurrent use of the same space for the same activity, in which case select the month when the activity takes place.
- Specify if a lunch break should be included, and when it starts/stops.
- If you will take coffee breaks, they are spread out evenly throughout the day, in addition to lunch.
- Mask wearing: Specify if they are worn at occupant workstations, or are removed when a physical distance of 2m is respected. + Ventilation data:
+ + Activity types:
+ + Activity breaks:
+ + Refer to COVID Calculator user-guide for more detailed explanations on how to use this tool.