From d3f262c45e853795f812a2f9eb82b766625da10a Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 8 Oct 2021 11:18:17 +0200
Subject: [PATCH] Label dor "start" and "Finish", as well as their correct
 responsive size

---
 cara/apps/calculator/static/css/form.css         |  4 ++++
 .../calculator/templates/calculator.form.html.j2 | 16 ++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/cara/apps/calculator/static/css/form.css b/cara/apps/calculator/static/css/form.css
index 32377dbb..854192f6 100644
--- a/cara/apps/calculator/static/css/form.css
+++ b/cara/apps/calculator/static/css/form.css
@@ -22,6 +22,10 @@
   align-self: center;
 }
 
+.start_time, .finish_time {
+  margin-bottom: 10px;
+}
+
 /* -------Tool tip ------- */
 
 .tooltip_text {
diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 1281b6b2..fb49021d 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -271,27 +271,31 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
 
 
     <div style=" margin-right:2rem;">
-      <div class="boxMargin">
+      <div class="boxMargin pb-0">
         Exposed person(s) presence:<br>
         <div class="split">
         <div>
-        Start: <input type="time" id="exposed_start" class="start_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_start" value="08:30" required> &nbsp;&nbsp;
+          <label class="tabbed mb-0">Start: </label>
+          <input type="time" id="exposed_start" class="start_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_start" value="08:30" required> &nbsp;&nbsp;
         </div>
         <div>
-        Finish: <input type="time" id="exposed_finish" class="finish_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_finish" value="17:30" required><br>
+          <label class="tabbed mb-0">Finish: </label>
+          <input type="time" id="exposed_finish" class="finish_time" data-time-group="exposed" data-lunch-break="exposed_lunch" name="exposed_finish" value="17:30" required><br>
         </div>
         </div>
       </div>
       <br>
 
-      <div class="boxMargin">
+      <div class="boxMargin pb-0">
         Infected person(s) presence:<br>
         <div class="split">
         <div>
-        Start: <input type="time" id="infected_start" class="start_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_start" value="08:30" required> &nbsp;&nbsp;
+          <label class="tabbed mb-0">Start: </label> 
+          <input type="time" id="infected_start" class="start_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_start" value="08:30" required> &nbsp;&nbsp;
         </div>
         <div>
-        Finish: <input type="time" id="infected_finish" class="finish_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_finish" value="17:30" required><br>
+          <label class="tabbed mb-0">Finish: </label>
+          <input type="time" id="infected_finish" class="finish_time" data-time-group="infected" data-lunch-break="infected_lunch" name="infected_finish" value="17:30" required><br>
         </div>
         </div>
       </div>