webui: configs.html: Improve the form layout and styles

2 files changed, 49 insertions, 33 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 67f324b..aecb48d 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -221,7 +221,7 @@ label, legend {
 .form-inline .form-control {
     display: inline-block;
     width: auto;
-    margin-bottom: 0;
+    margin-bottom: 0.3rem;
     vertical-align: middle;
 }
 .form-inline .checkboxes {
@@ -230,6 +230,12 @@ label, legend {
     vertical-align: middle;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
 /* Checkboxes & Radios */
 .checkboxes .legend,
 .radios .legend {
diff --git a/fg21sim/webui/templates/configs.html b/fg21sim/webui/templates/configs.html
index 3fee24e..a7a8f43 100644
--- a/fg21sim/webui/templates/configs.html
+++ b/fg21sim/webui/templates/configs.html
@@ -67,13 +67,17 @@
             </div>
           </div>
           <div class="row">
-            <div class="column column-50 form-group">
-              <label for="conf-common-lmin">Multipole <i>l</i><sub>min</sub>:</label>
-              <input class="form-control" type="number" id="conf-common-lmin" name="common/lmin" min="0" required />
-            </div>
-            <div class="column column-50 form-group">
-              <label for="conf-common-lmax">Multipole <i>l</i><sub>max</sub>:</label>
-              <input class="form-control" type="number" id="conf-common-lmax" name="common/lmax" min="1" required />
+            <div class="column">
+              <span>Power Spectrum Multiple:</span>
+              <div class="form-group">
+                <label class="sr-only" for="conf-common-lmin">Multipole <i>l</i><sub>min</sub>:</label>
+                <input class="form-control" type="number" id="conf-common-lmin" name="common/lmin" min="0" title="Minimum multipole" required />
+              </div>
+              <span> &mdash; </span>
+              <div class="form-group">
+                <label class="sr-only" for="conf-common-lmax">Multipole <i>l</i><sub>max</sub>:</label>
+                <input class="form-control" type="number" id="conf-common-lmax" name="common/lmax" min="1" title="Maximum multipole" required />
+              </div>
             </div>
           </div>
           <div class="row">
@@ -345,17 +349,19 @@
             </h5>
             <div class="body">
               <div class="row">
-                <div class="column column-40 form-group">
-                  <label for="conf-g-synchrotron-template">Template Map:</label>
-                  <input class="form-control code" type="text" id="conf-g-synchrotron-template" name="galactic/synchrotron/template" required />
-                </div>
-                <div class="column column-30 form-group">
-                  <label for="conf-g-synchrotron-template-freq">Frequency:</label>
-                  <input class="form-control" type="number" id="conf-g-synchrotron-template-freq" name="galactic/synchrotron/template_freq" placeholder="MHz" step="any" min="0" required />
-                </div>
-                <div class="column column-30 form-group">
-                  <label for="conf-g-synchrotron-template-unit">Unit:</label>
-                  <input class="form-control" type="text" id="conf-g-synchrotron-template-unit" name="galactic/synchrotron/template_unit" required />
+                <div class="column">
+                  <div class="form-group">
+                    <label for="conf-g-synchrotron-template">Template Map:</label>
+                    <input class="form-control code" type="text" id="conf-g-synchrotron-template" name="galactic/synchrotron/template" required />
+                  </div>
+                  <div class="form-group">
+                    <label class="sr-only" for="conf-g-synchrotron-template-freq">Frequency:</label>
+                    <input class="form-control" type="number" id="conf-g-synchrotron-template-freq" name="galactic/synchrotron/template_freq" placeholder="frequency (MHz)" step="any" min="0" required />
+                  </div>
+                  <div class="form-group">
+                    <label class="sr-only" for="conf-g-synchrotron-template-unit">Unit:</label>
+                    <input class="form-control" type="text" id="conf-g-synchrotron-template-unit" name="galactic/synchrotron/template_unit" placeholder="unit" required />
+                  </div>
                 </div>
               </div>
               <div class="row">
@@ -400,23 +406,27 @@
             </h5>
             <div class="body">
               <div class="row">
-                <div class="column column-40 form-group">
-                  <label for="conf-g-freefree-halphamap">Hα Template Map:</label>
-                  <input class="form-control code" type="text" id="conf-g-freefree-halphapam" name="galactic/freefree/halphamap" required />
-                </div>
-                <div class="column column-30 form-group">
-                  <label for="conf-g-freefree-halphamap-unit">Unit:</label>
-                  <input class="form-control" type="text" id="conf-g-freefree-halphamap-unit" name="galactic/freefree/halphamap_unit" required />
+                <div class="column">
+                  <div class="form-group">
+                    <label for="conf-g-freefree-halphamap">Hα Template Map:</label>
+                    <input class="form-control code" type="text" id="conf-g-freefree-halphapam" name="galactic/freefree/halphamap" required />
+                  </div>
+                  <div class="form-group">
+                    <label class="sr-only" for="conf-g-freefree-halphamap-unit">Unit:</label>
+                    <input class="form-control" type="text" id="conf-g-freefree-halphamap-unit" name="galactic/freefree/halphamap_unit" placeholder="unit" required />
+                  </div>
                 </div>
               </div>
               <div class="row">
-                <div class="column column-40 form-group">
-                  <label for="conf-g-freefree-dustmap">Dust Template Map:</label>
-                  <input class="form-control code" type="text" id="conf-g-freefree-dustmap" name="galactic/freefree/dustmap" required />
-                </div>
-                <div class="column column-30 form-group">
-                  <label for="conf-g-freefree-dustmap-unit">Unit:</label>
-                  <input class="form-control" type="text" id="conf-g-freefree-dustmap-unit" name="galactic/freefree/dustmap_unit" required />
+                <div class="column">
+                  <div class="form-group">
+                    <label for="conf-g-freefree-dustmap">Dust Template Map:</label>
+                    <input class="form-control code" type="text" id="conf-g-freefree-dustmap" name="galactic/freefree/dustmap" required />
+                  </div>
+                  <div class="form-group">
+                    <label class="sr-only" for="conf-g-freefree-dustmap-unit">Unit:</label>
+                    <input class="form-control" type="text" id="conf-g-freefree-dustmap-unit" name="galactic/freefree/dustmap_unit" placeholder="unit" required />
+                  </div>
                 </div>
               </div>
               <div class="row">