diff options
Diffstat (limited to 'qc_app/templates/samples/upload-samples.html')
| -rw-r--r-- | qc_app/templates/samples/upload-samples.html | 132 |
1 files changed, 63 insertions, 69 deletions
diff --git a/qc_app/templates/samples/upload-samples.html b/qc_app/templates/samples/upload-samples.html index 29b08f6..e62de57 100644 --- a/qc_app/templates/samples/upload-samples.html +++ b/qc_app/templates/samples/upload-samples.html @@ -3,16 +3,7 @@ {%block title%}Upload Samples{%endblock%} -{%block css%} -<style type="text/css"> - #form-samples { - background-color: #D1D1D1; - } - #form-samples fieldset:nth-child(odd){ - background-color: white; - } -</style> -{%endblock%} +{%block css%}{%endblock%} {%block contents%} <h1 class="heading">upload samples</h1> @@ -20,23 +11,23 @@ {{flash_messages("alert-success")}} <p>You can now upload a character-separated value (CSV) file that contains - details about your samples. The CSV file should have the following fields: - <dl> - <dt>Name</dt> - <dd>The primary name for the sample</dd> + details about your samples. The CSV file should have the following fields: + <dl> + <dt>Name</dt> + <dd>The primary name for the sample</dd> - <dt>Name2</dt> - <dd>A secondary name for the sample. This can simply be the same as - <strong>Name</strong> above. This field <strong>MUST</strong> contain a - value.</dd> + <dt>Name2</dt> + <dd>A secondary name for the sample. This can simply be the same as + <strong>Name</strong> above. This field <strong>MUST</strong> contain a + value.</dd> - <dt>Symbol</dt> - <dd>A symbol for the sample. Can be an empty field.</dd> + <dt>Symbol</dt> + <dd>A symbol for the sample. Can be an empty field.</dd> - <dt>Alias</dt> - <dd>An alias for the sample. Can be an empty field.</dd> - </dl> - </p> + <dt>Alias</dt> + <dd>An alias for the sample. Can be an empty field.</dd> + </dl> +</p> <form id="form-samples" method="POST" @@ -45,32 +36,32 @@ population_id=population.InbredSetId)}}" enctype="multipart/form-data"> <legend class="heading">upload samples</legend> - <fieldset> + + <div class="form-group"> <input type="hidden" name="species_id" value="{{species.SpeciesId}}" /> - <label class="form-col-1">species:</label> - <span class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</span> - </fieldset> + <label class="form-label">species:</label> + <span class="form-text">{{species.SpeciesName}} [{{species.MenuName}}]</span> + </div> - <fieldset> + <div class="form-group"> <input type="hidden" name="inbredset_id" value="{{population.InbredSetId}}" /> - <label class="form-col-1">grouping/population:</label> - <span class="form-col-2">{{population.Name}} [{{population.FullName}}]</span> - </fieldset> + <label class="form-label">grouping/population:</label> + <span class="form-text">{{population.Name}} [{{population.FullName}}]</span> + </div> - <fieldset> - <input id="chk:heading" - type="checkbox" - name="first_line_heading" - class="form-col-1" /> - <label for="chk:heading" class="form-col-2">first line is a heading?</label> - </fieldset> + <div class="form-group"> + <label for="file-samples" class="form-label">select file</label> + <input type="file" name="samples_file" id="file:samples" + accept="text/csv, text/tab-separated-values" + class="form-control" /> + </div> - <fieldset> - <label for="select:separator" class="form-col-1">field separator</label> + <div class="form-group"> + <label for="select:separator" class="form-label">field separator</label> <select id="select:separator" name="separator" required="required" - class="form-col-2"> + class="form-control"> <option value="">Select separator for your file: (default is comma)</option> <option value="	">TAB</option> <option value=" ">Space</option> @@ -81,43 +72,46 @@ <input id="txt:separator" type="text" name="other_separator" - class="form-col-2" /> - <span class="form-col-2"> - This is the character that separates the fields in your CSV file. If you - select "<strong>Other</strong>", then you must provide the separator in - the text field provided. - </span> - </fieldset> - - <fieldset> - <label for="txt:delimiter" class="form-col-1">field delimiter</label> + class="form-control" /> + <small class="form-text text-muted"> + If you select '<strong>Other</strong>' for the field separator value, + enter the character that separates the fields in your CSV file in the form + field below. + </small> + </div> + + <div class="form-group form-check"> + <input id="chk:heading" + type="checkbox" + name="first_line_heading" + class="form-check-input" /> + <label for="chk:heading" class="form-check-label"> + first line is a heading?</label> + <small class="form-text text-muted"> + Select this if the first line in your file contains headings for the + columns. + </small> + </div> + + <div class="form-group"> + <label for="txt:delimiter" class="form-label">field delimiter</label> <input id="txt:delimiter" type="text" name="field_delimiter" maxlength="1" - class="form-col-2" /> - <span class="form-col-2"> + class="form-control" /> + <small class="form-text text-muted"> If there is a character delimiting the string texts within particular fields in your CSV, provide the character here. This can be left blank if no such delimiters exist in your file. - </span> - </fieldset> + </small> + </div> - <fieldset> - <label for="file:samples" class="form-col-1">select file</label> - <input type="file" name="samples_file" id="file:samples" - accept="text/csv, text/tab-separated-values" - class="form-col-2" /> - </fieldset> - - <fieldset> - <input type="submit" - value="upload samples file" - class="btn btn-primary form-col-2" /> - </fieldset> + <button type="submit" + class="btn btn-primary">upload samples file</button> </form> -<table id="tbl:samples-preview"> +<table id="tbl:samples-preview" class="table"> <caption class="heading">preview content</caption> <thead> |