Change the UI for the phenotype editing page

Edit Sample Data and Edit Metadata are now two separate sections, and Edit Sample Data appears first

1 files changed, 55 insertions, 47 deletions

diff --git a/wqflask/wqflask/templates/edit_phenotype.html b/wqflask/wqflask/templates/edit_phenotype.html
index a5e76868..8b80ff89 100644
--- a/wqflask/wqflask/templates/edit_phenotype.html
+++ b/wqflask/wqflask/templates/edit_phenotype.html
@@ -17,15 +17,35 @@
         <small><a href="{{url_for('metadata_edit.show_history', dataset_id=dataset_id, name=name)}}" target="_blank">[View History]</a></small>
     </div>
 
-    <form id="edit-form" class="container form-horizontal" method="post" action="/datasets/{{dataset_id}}/traits/{{ publish_xref.id_ }}?resource-id={{ resource_id }}" enctype='multipart/form-data'>
+    <form id="edit-form" class="form-horizontal" method="post" action="/datasets/{{dataset_id}}/traits/{{ publish_xref.id_ }}?resource-id={{ resource_id }}" enctype='multipart/form-data'>
 	<div class="form-group">
 	    <div class="controls left-block col-sm-8 col-lg-8" style="width: max-content;">
-		<input name="inbred-set-id" class="changed" type="hidden" value="{{ publish_xref.inbred_set_id }}"/>
-		<input name="phenotype-id" class="changed" type="hidden" value="{{ publish_xref.phenotype_id }}"/>
-		<input name="comments" class="changed" type="hidden" value="{{ publish_xref.comments }}"/>
-		<input type="submit" style="width: 125px; margin-right: 25px;" class="btn btn-success form-control col-xs-2 changed" value="Submit Change">
-            </div>
+            <input name="inbred-set-id" class="changed" type="hidden" value="{{ publish_xref.inbred_set_id }}"/>
+            <input name="phenotype-id" class="changed" type="hidden" value="{{ publish_xref.phenotype_id }}"/>
+            <input name="comments" class="changed" type="hidden" value="{{ publish_xref.comments }}"/>
+        </div>
 	</div>
+    <div>
+        <h2>Edit Sample Data</h2>
+        <p>
+            Download a spreadsheet of sample values to edit in Excel (or a similar program) and then upload the edited file
+        </p>
+        <div>
+            <a href="/datasets/{{ publish_xref.id_ }}/traits/{{ publish_xref.phenotype_id }}/csv?resource-id={{ resource_id }}" class="btn btn-link">
+                Click to Download Sample Data
+            </a>
+        </div>
+        <div class="form-group">
+            <input type = "file" class="col-md-4 control-label text-left" name = "file" />
+        </div>
+        <div class="form-group">
+            <a href="{{url_for('metadata_edit.show_case_attribute_columns')}}" target="_blank" style="margin-left: 25px;">(You can find sample metadata column descriptions here)</a>
+        </div>
+        <input type="submit" style="width: 125px; margin-right: 25px;" class="btn btn-success form-control changed" value="Submit Change">
+    </div>
+    <hr>
+    <div>
+        <h2>Edit Metadata</h2>
         <div class="form-group">
             <label for="pubmed-id" class="col-sm-3 col-lg-2 control-label text-left">PubMed ID</label>
             <!-- Do not enter PubMed_ID if this trait has not been Published.
@@ -121,22 +141,22 @@
                 <textarea name="authors" class="form-control" rows="3" placeholder="Example: Roy S, Ingels J, Bohl CJ, McCarty M, Lu L, Mulligan MK, Mozhui K, Centeno A, Williams EG, Auwerx J, Williams RW">{{ publication.authors |default('', true) }}</textarea>
                 <input name="old_authors" class="changed" type="hidden" value="{{ publication.authors |default('', true) }}"/>
             </div>
-	</div>
-	<div class="form-group">
-            <label for="year" class="col-sm-3 col-lg-2 control-label text-left">Year</label>
-            <div class="col-sm-7 col-lg-8">
-                <textarea name="year" class="form-control" rows="1">{{ publication.year |default('', true) }}</textarea>
-                <input name="old_year" class="changed" type="hidden" value="{{ publication.year |default('', true) }}"/>
-            </div>
-	</div>
-	<div class="form-group">
-            <label for="month" class="col-sm-3 col-lg-2 control-label text-left">Month</label>
-            <div class="col-sm-7 col-lg-8">
-                <textarea name="month" class="form-control" rows="1">{{ publication.month |default('', true) }}</textarea>
-                <input name="old_month" class="changed" type="hidden" value="{{ publication.month |default('', true) }}"/>
-            </div>
-	</div>
-	<div class="form-group">
+	    </div>
+        <div class="form-group">
+                <label for="year" class="col-sm-3 col-lg-2 control-label text-left">Year</label>
+                <div class="col-sm-7 col-lg-8">
+                    <textarea name="year" class="form-control" rows="1">{{ publication.year |default('', true) }}</textarea>
+                    <input name="old_year" class="changed" type="hidden" value="{{ publication.year |default('', true) }}"/>
+                </div>
+        </div>
+        <div class="form-group">
+                <label for="month" class="col-sm-3 col-lg-2 control-label text-left">Month</label>
+                <div class="col-sm-7 col-lg-8">
+                    <textarea name="month" class="form-control" rows="1">{{ publication.month |default('', true) }}</textarea>
+                    <input name="old_month" class="changed" type="hidden" value="{{ publication.month |default('', true) }}"/>
+                </div>
+        </div>
+	    <div class="form-group">
             <label for="title" class="col-sm-3 col-lg-2 control-label text-left">Title</label>
             <div class="col-sm-7 col-lg-8">
                 <textarea name="title" class="form-control" rows="2">{{ publication.title |default('', true) }}</textarea>
@@ -150,13 +170,13 @@
                 <input name="old_abstract" class="changed" type="hidden" value="{{ publication.abstract |default('', true) }}"/>
             </div>
         </div>
-	<div class="form-group">
-            <label for="volume" class="col-sm-3 col-lg-2 control-label text-left">Volume</label>
-            <div class="col-sm-7 col-lg-8">
-                <textarea name="volume" class="form-control" rows="1">{{ publication.volume |default('', true) }}</textarea>
-                <input name="old_volume" class="changed" type="hidden" value="{{ publication.volume |default('', true) }}"/>
-            </div>
-	</div>
+        <div class="form-group">
+                <label for="volume" class="col-sm-3 col-lg-2 control-label text-left">Volume</label>
+                <div class="col-sm-7 col-lg-8">
+                    <textarea name="volume" class="form-control" rows="1">{{ publication.volume |default('', true) }}</textarea>
+                    <input name="old_volume" class="changed" type="hidden" value="{{ publication.volume |default('', true) }}"/>
+                </div>
+        </div>
 		<div class="form-group">
             <label for="journal" class="col-sm-3 col-lg-2 control-label text-left">Journal</label>
             <div class="col-sm-7 col-lg-8">
@@ -171,25 +191,13 @@
                 <input name="old_pages" class="changed" type="hidden" value="{{ publication.pages |default('', true) }}"/>
             </div>
         </div>
-        <div>
-            <a href="/datasets/{{ publish_xref.id_ }}/traits/{{ publish_xref.phenotype_id }}/csv?resource-id={{ resource_id }}" class="btn btn-link btn-sm">
-                Click to Download CSV Sample Data
-            </a>
-        </div>
-        <div class="form-group">
-            <input type = "file" class="col-md-4 control-label text-left" name = "file" />
-        </div>
-        <div class="col-xs-6">
-            <p>
-		<a href="{{url_for('metadata_edit.show_case_attribute_columns')}}" target="_blank">You can find these case-attribute  descriptions here.</a>
-            </p>
-	</div>
 
-	<div class="form-group col-xs-7">
-	    <div class="controls left-block col-sm-8 col-lg-8" style="width: max-content;">
-		<input type="submit" style="width: 125px; margin-right: 25px;" class="btn btn-success form-control col-xs-2 changed" value="Submit Change">
-	    </div>
-	</div>
+        <div class="form-group col-xs-7">
+            <div class="controls left-block col-sm-8 col-lg-8" style="width: max-content;">
+            <input type="submit" style="width: 125px; margin-right: 25px;" class="btn btn-success form-control col-xs-2 changed" value="Submit Change">
+            </div>
+        </div>
+    </div>
     </form>
 </div>