From fdec747a0a33a96aefb3cc8d2e8717f13bea6c20 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Thu, 7 Jul 2022 13:09:29 +0300
Subject: Rework styling for form elements

---
 qc_app/static/css/styles.css         |  7 ++++---
 qc_app/templates/index.html          | 24 ++++++++++++++++--------
 qc_app/templates/select_dataset.html | 20 +++++++++++---------
 3 files changed, 31 insertions(+), 20 deletions(-)

(limited to 'qc_app')

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index 922924c..d27952a 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -60,6 +60,7 @@ fieldset {
 }
 
 table {
+    margin-left: 1em;
     border-collapse: collapse;
     border: 1px solid;
     border-color: #336699;
@@ -106,15 +107,15 @@ table th,td {
 fieldset {
     border-style: none;
     display: grid;
-    grid-template-columns: 5em 1fr;
+    grid-template-columns: 1fr 9fr;
     column-gap: 5px;
 }
 
-label {
+.form-col-1 {
     grid-column: 1 / 2;
 }
 
-fieldset input,select,button {
+.form-col-2 {
     grid-column: 2 / 3;
     width: 20%;
 }
diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index 18eb784..312a876 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -21,19 +21,27 @@
     <legend>file type</legend>
 
     <input type="radio" name="filetype" value="average" id="filetype_average"
-	   required="required" />
-    <label for="filetype_average">average</label>
+	   required="required" class="form-col-1" />
+    <label for="filetype_average" class="form-col-2">average</label>
 
     <input type="radio" name="filetype" value="standard-error"
-	   id="filetype_standard_error" required="required" />
-    <label for="filetype_standard_error">standard error</label>
+	   id="filetype_standard_error" required="required"
+	   class="form-col-1" />
+    <label for="filetype_standard_error" class="form-col-2">
+      standard error
+    </label>
   </fieldset>
 
-  <label for="file_upload">select file</label>
-  <input type="file" name="qc_text_file" id="file_upload"
-	 accept="text/tab-separated-values, application/zip" />
+  <fieldset>
+    <label for="file_upload" class="form-col-1">select file</label>
+    <input type="file" name="qc_text_file" id="file_upload"
+	   accept="text/tab-separated-values, application/zip"
+	   class="form-col-2"/>
+  </fieldset>
 
-  <input type="submit" value="upload file" class="btn btn-main" />
+  <fieldset>
+    <input type="submit" value="upload file" class="btn btn-main form-col-2" />
+  </fieldset>
 </form>
 
 <div id="progress-indicator" class="hidden">
diff --git a/qc_app/templates/select_dataset.html b/qc_app/templates/select_dataset.html
index db48694..4846f2c 100644
--- a/qc_app/templates/select_dataset.html
+++ b/qc_app/templates/select_dataset.html
@@ -10,10 +10,11 @@
       data-menu-content="{{menu_contents}}"
       data-genechips="{{genechips_data}}">
   <input type="hidden" name="filename" value="{{filename}}" />
+  <input type="hidden" name="filetype" value="{{filetype}}" />
 
   <fieldset>
-    <label for="species">species:</label>
-    <select id="species" name="species">
+    <label for="species" class="form-col-1">species:</label>
+    <select id="species" name="species" class="form-col-2">
       {%for row in species:%}
       <option value="{{row[0]}}"
 	      {%if row[0] == default_species:%}
@@ -26,8 +27,8 @@
   </fieldset>
 
   <fieldset>
-    <label for="group">group:</label>
-    <select id="group" name="group">
+    <label for="group" class="form-col-1">group:</label>
+    <select id="group" name="group" class="form-col-2">
       {%for grouping, grps in groups.items():%}
       <optgroup label="{{grouping}}">
 	{%for group in grps:%}
@@ -39,8 +40,8 @@
   </fieldset>
 
   <fieldset>
-    <label for="type">type:</label>
-    <select id="type" name="type">
+    <label for="type" class="form-col-1">type:</label>
+    <select id="type" name="type" class="form-col-2">
       {%for grouping, typs in types.items():%}
       <optgroup label="{{grouping}}">
 	{%for type in typs:%}
@@ -52,8 +53,8 @@
   </fieldset>
 
   <fieldset>
-    <label for="dataset">dataset:</label>
-    <select id="dataset" name="dataset">
+    <label for="dataset" class="form-col-1">dataset:</label>
+    <select id="dataset" name="dataset" class="form-col-2">
       {%for dataset_id, name1, name2 in datasets:%}
       <option value="{{dataset_id}}">[{{name1}}] {{name2}}</option>
       {%endfor%}
@@ -92,7 +93,8 @@
   </table>
 
   <fieldset>
-    <input type="submit" class="btn btn-main" value="update database" />
+    <input type="submit" class="btn btn-main form-col-2"
+	   value="update database" />
   </fieldset>
 
 </form>
-- 
cgit v1.2.3