aboutsummaryrefslogtreecommitdiff
path: root/qc_app
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2022-07-07 13:09:29 +0300
committerFrederick Muriuki Muriithi2022-07-07 13:09:29 +0300
commitfdec747a0a33a96aefb3cc8d2e8717f13bea6c20 (patch)
tree4fcb1b3d0e532e286fecc5a646ee13ffb9db6533 /qc_app
parentb367d04c57b21c0a9e2da22e8b20404de076768d (diff)
downloadgn-uploader-fdec747a0a33a96aefb3cc8d2e8717f13bea6c20.tar.gz
Rework styling for form elements
Diffstat (limited to 'qc_app')
-rw-r--r--qc_app/static/css/styles.css7
-rw-r--r--qc_app/templates/index.html24
-rw-r--r--qc_app/templates/select_dataset.html20
3 files changed, 31 insertions, 20 deletions
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>