From de2bb5fd37bb48d36e386180fb6c3e11f7f0caa7 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 12 Aug 2022 16:17:51 +0100
Subject: [PATCH] handled radio button positions and mobile version for the
 breaks

---
 .../templates/base/calculator.form.html.j2    | 119 +++++++++---------
 1 file changed, 62 insertions(+), 57 deletions(-)

diff --git a/cara/apps/templates/base/calculator.form.html.j2 b/cara/apps/templates/base/calculator.form.html.j2
index 2c9cb081..0329d845 100644
--- a/cara/apps/templates/base/calculator.form.html.j2
+++ b/cara/apps/templates/base/calculator.form.html.j2
@@ -452,17 +452,17 @@
       <label for="infected_dont_have_breaks_with_exposed" class="form-check-label col-sm-12">Input separate breaks for infected and exposed person(s)</label>
 
     </div><br>
-    <div class="breakBoxExposed" id="DIVexposed_breaks" style="min-width:500px">
+    <div class="breakBoxExposed" id="DIVexposed_breaks">
       <span id="exposed_break_title" style="display:none;"><b>Exposed person(s) breaks:</b></span>
       <div class="boxMargin">
         <div class="split">
-        <div>Lunch break:</div>
-        <div>
-        <input type="radio" id="exposed_lunch_option_no" data-lunch-select="exposed" name="exposed_lunch_option" value=0>
-          <label for="exposed_lunch_option_no">No</label>
-        <input class="ml-2" type="radio" id="exposed_lunch_option_yes" data-lunch-select="exposed" data-enables="#DIVexposed_lunch_time" name="exposed_lunch_option" value=1 checked="checked">
-          <label for="exposed_lunch_option_yes">Yes</label><br>
-        </div>
+          <div>Lunch break:</div>
+          <div>
+            <input type="radio" id="exposed_lunch_option_no" data-lunch-select="exposed" name="exposed_lunch_option" value=0>
+              <label for="exposed_lunch_option_no">No</label>
+            <input class="ml-2" type="radio" id="exposed_lunch_option_yes" data-lunch-select="exposed" data-enables="#DIVexposed_lunch_time" name="exposed_lunch_option" value=1 checked="checked">
+              <label for="exposed_lunch_option_yes">Yes</label><br>
+          </div>
         </div>
         <div id="DIVexposed_lunch_time" class="split">
           <div>
@@ -475,45 +475,48 @@
 
         <!-- Coffee Options -->
         <div class="split">
-        <div>
-        Coffee Breaks:
+          <div>Coffee Breaks:</div>
+          <div>
+            <input type="radio" id="exposed_coffee_break_0" name="exposed_coffee_break_option" value="coffee_break_0" checked="checked">
+              <label for="exposed_coffee_break_0">No breaks</label>
+            <input class="ml-2" type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2" data-enables="#DIVexposed_breaks_duration">
+              <label for="exposed_coffee_break_2">2</label>
+            <input class="ml-2" type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4" data-enables="#DIVexposed_breaks_duration">
+              <label for="exposed_coffee_break_4">4</label><br>
+          </div>
         </div>
-        <div>
-        <input type="radio" id="exposed_coffee_break_0" name="exposed_coffee_break_option" value="coffee_break_0" checked="checked">
-          <label for="exposed_coffee_break_0">No breaks</label>
-        <input class="ml-2" type="radio" id="exposed_coffee_break_2" name="exposed_coffee_break_option" value="coffee_break_2" data-enables="#DIVexposed_breaks_duration">
-          <label for="exposed_coffee_break_2">2</label>
-        <input class="ml-2" type="radio" id="exposed_coffee_break_4" name="exposed_coffee_break_option" value="coffee_break_4" data-enables="#DIVexposed_breaks_duration">
-          <label for="exposed_coffee_break_4">4</label><br>
-        </div>
-        </div>
-
         <br>
-
         <div id="DIVexposed_breaks_duration" style="display:none">
-          Duration (minutes):
-          <select id="exposed_coffee_duration" name="exposed_coffee_duration">
-            <option value="5">5</option>
-            <option value="10">10</option>
-            <option value="15">15</option>
-            <option value="20">20</option>
-            <option value="25">25</option>
-            <option value="30">30</option>
-          </select><br>
+        <div class="split">
+          <div>Duration (minutes):</div>
+          <div>
+            <select id="exposed_coffee_duration" name="exposed_coffee_duration">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+              <option value="25">25</option>
+              <option value="30">30</option>
+            </select><br>
+          </div>
+        </div>
         </div>
       </div>
       <br>
     </div>
 
-    <div class="breakBoxInfected" id="DIVinfected_breaks" style="min-width:500px">
+    <div class="breakBoxInfected" id="DIVinfected_breaks">
       <b>Infected person(s) breaks:</b>
       <div class="boxMargin">
-        Lunch break:
-        <input class="ml-2" type="radio" id="infected_lunch_option_no" data-lunch-select="infected" name="infected_lunch_option" value=0 onclick="require_fields(this)">
-          <label for="infected_lunch_option_no">No</label>
-        <input class="ml-2" type="radio" id="infected_lunch_option_yes" data-lunch-select="infected" data-enables="#DIVinfected_lunch_time" name="infected_lunch_option" value=1 checked="checked" onclick="require_fields(this)">
-          <label for="infected_lunch_option_yes">Yes</label><br>
-
+        <div class="split">
+          <div>Lunch break:</div>
+          <div>
+            <input type="radio" id="infected_lunch_option_no" data-lunch-select="infected" name="infected_lunch_option" value=0 onclick="require_fields(this)">
+              <label for="infected_lunch_option_no">No</label>
+            <input class="ml-2" type="radio" id="infected_lunch_option_yes" data-lunch-select="infected" data-enables="#DIVinfected_lunch_time" name="infected_lunch_option" value=1 checked="checked" onclick="require_fields(this)">
+              <label for="infected_lunch_option_yes">Yes</label><br>
+          </div>
+        </div>
         <div id="DIVinfected_lunch_time" class="split">
         <div>
         Start: <input type="time" id="infected_lunch_start" class="start_time" data-time-group="infected_lunch" data-lunch-for="infected" data-has-radio="#infected_lunch_option_yes" name="infected_lunch_start" value="12:30" onclick="require_fields(this)">
@@ -525,31 +528,33 @@
 
         <!-- Coffee Options -->
         <div class="split">
-        <div>
-        Coffee Breaks:
-        </div>
-        <div>
-        <input type="radio" id="infected_coffee_break_0" name="infected_coffee_break_option" value="coffee_break_0" checked="checked">
-          <label for="infected_coffee_break_0" >No breaks</label>
-        <input style="ml-2" type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2" data-enables="#DIVinfected_breaks_duration">
-          <label for="infected_coffee_break_2">2</label>
-        <input style="ml-2" type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4" data-enables="#DIVinfected_breaks_duration">
-          <label for="infected_coffee_break_4">4</label><br>
-        </div>
+          <div>Coffee Breaks:</div>
+          <div>
+            <input type="radio" id="infected_coffee_break_0" name="infected_coffee_break_option" value="coffee_break_0" checked="checked">
+              <label for="infected_coffee_break_0" >No breaks</label>
+            <input style="ml-2" type="radio" id="infected_coffee_break_2" name="infected_coffee_break_option" value="coffee_break_2" data-enables="#DIVinfected_breaks_duration">
+              <label for="infected_coffee_break_2">2</label>
+            <input style="ml-2" type="radio" id="infected_coffee_break_4" name="infected_coffee_break_option" value="coffee_break_4" data-enables="#DIVinfected_breaks_duration">
+              <label for="infected_coffee_break_4">4</label><br>
+          </div>
         </div>
 
         <br>
 
         <div id="DIVinfected_breaks_duration" style="display:none">
-        Duration (minutes):
-        <select id="DIVinfected_coffee_duration" name="infected_coffee_duration">
-          <option value="5">5</option>
-          <option value="10">10</option>
-          <option value="15">15</option>
-          <option value="20">20</option>
-          <option value="25">25</option>
-          <option value="30">30</option>
-        </select><br>
+        <div class="split">
+          <div>Duration (minutes):</div>
+          <div>
+            <select id="DIVinfected_coffee_duration" name="infected_coffee_duration">
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+              <option value="25">25</option>
+              <option value="30">30</option>
+            </select><br>
+          </div>
+        </div>
         </div>
       </div>
       <br>