diff options
| author | zsloan | 2023-01-24 21:11:10 +0000 |
|---|---|---|
| committer | zsloan | 2023-02-28 14:18:09 -0600 |
| commit | 0ab80b42d322795eeefa32fac557bb1498d9cd5e (patch) | |
| tree | 873acd65c0b34f358023a7f336f31867537cb21f | |
| parent | db30ba7d61b2fac4dabe4664da3e8288cd80b3b8 (diff) | |
| download | genenetwork2-0ab80b42d322795eeefa32fac557bb1498d9cd5e.tar.gz | |
Improve UI for mapping link
The link is now always displayed, but it is only saved (for longer than 1 hour) if the user clicks Copy and Share (which automatically copies the link)
The width of the input field (in ch) is multiplied by 0.95 because it will always be a bit shorter than the length of the link in ch (which multiplies its length by the width of the character 0). This is the best solution I could come up with for setting the width of the field.
| -rw-r--r-- | wqflask/wqflask/templates/mapping_results.html | 19 |
1 files changed, 13 insertions, 6 deletions
diff --git a/wqflask/wqflask/templates/mapping_results.html b/wqflask/wqflask/templates/mapping_results.html index e7bcfc64..e77bbad3 100644 --- a/wqflask/wqflask/templates/mapping_results.html +++ b/wqflask/wqflask/templates/mapping_results.html @@ -81,11 +81,14 @@ {% endif %} <b>Current Date/Time:</b> {{ current_datetime }}<br> <br> - <a class="export_mapping_results" href="#" target="_blank" >Download Full Results</a> + <button class="btn btn-default export_mapping_results">Download Full Results</button> <br><br> - <button type="button" class="btn btn-default share-results" style="padding-bottom: 2px; padding-top: 2px;"><span class="glyphicon glyphicon-link"></span> Generate Link</button> - <br> - <input type="text" name="mappingLink" style="display:none;" size="75"></input> + <div class="input-group"> + <input type="text" class="form-control" name="mappingLink" size="75"></input> + <div class="input-group-btn"> + <button class="btn btn-default share-results" type="button">Copy and Share</button> + </div> + </div> </div> <div id="gn1_map_options" class="col-xs-6" style="outline: 3px double #AAAAAA; padding: 10px; margin: 10px;"> <div class="col-xs-8" style="padding: 0px;"> @@ -672,8 +675,11 @@ $('#gn1_map_options').css("display", "block") }) + hash = $('input[name=inputs_hash]').val(); + mappingLink = window.location.origin + "/run_mapping?hash=" + hash; + $('input[name=mappingLink]').width(mappingLink.length*0.95 + "ch") + $('input[name=mappingLink]').val(mappingLink); $('.share-results').click(function() { - hash = $('input[name=inputs_hash]').val() $.ajax({ method: "POST", url: "/cache_mapping_inputs", @@ -681,7 +687,8 @@ inputs_hash: hash }, success: function() { - $('input[name=mappingLink]').val(window.location.origin + "/run_mapping?hash=" + hash).show(); + document.querySelector("input[name='mappingLink']").select(); + document.execCommand('copy'); } }); }) |