UI adjustments

CERN · Oct 7, 2022 · d50d63d · d50d63d
1 parent a91ef8f
commit d50d63d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/caimira/apps/calculator/static/css/form.css b/caimira/apps/calculator/static/css/form.css
@@ -66,7 +66,7 @@
   content: attr(data-tooltip);
   padding: 10px 18px;
   min-width: 50px;
-  max-width: 220px;
+  max-width: 200px;
   width: max-content;
   width: -moz-max-content;
   border-radius: 6px;

diff --git a/caimira/apps/static/css/style.css b/caimira/apps/static/css/style.css
@@ -276,6 +276,10 @@ footer img {
     display: inline!important;
   }
 
+  #event_data_tooltip:before{
+    max-width: 350px!important;
+  }
+
 }
 
 @media (max-width: 40em) {

diff --git a/caimira/apps/templates/base/calculator.form.html.j2 b/caimira/apps/templates/base/calculator.form.html.j2
@@ -303,7 +303,7 @@
 
     <!-- Event Options -->
     <b>Event data:</b>
-    <div data-tooltip="The total no. of occupants in the room. 
+    <div id="event_data_tooltip" data-tooltip="The total no. of occupants in the room. 
     Deterministic exposure: add no. occupants that are infected.
     Probabilistic exposure: event at a given time & location (e.g. meeting or conference), considering the incidence rate in that area.">
         <span class="tooltip_text">?</span>
@@ -337,7 +337,7 @@
       </div>
       <div class="form-group row">
         <div class="col-sm-4"><label class="col-form-label">New confirmed cases (weekly):</label></div>
-        <div class="col-sm-6 pl-0 align-self-center"><input type="number" step="any" id="geographic_cases" class="non_zero form-control" name="geographic_cases" placeholder="Cases (#7-day rolling average)" min="0"></div>
+        <div class="col-sm-6 pl-0 align-self-center"><input type="number" step="any" id="geographic_cases" class="non_zero form-control" name="geographic_cases" placeholder="Cases (#7-day rolling avg)" min="0"></div>
       </div>
       <div class="form-group row">
       <div class="col-sm-4"><label class="col-form-label">Confidence level:</label></div>