added back-top button and about this app infobox

1 files changed, 57 insertions, 1 deletions

diff --git a/views/layout.haml b/views/layout.haml
index 6500da8..9d638a8 100644
--- a/views/layout.haml
+++ b/views/layout.haml
@@ -6,7 +6,6 @@
     %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"}
     %script{:type => "text/javascript", :src  => "/jquery-1.8.2.js"}
     :javascript
-      //$(document).ready(function() { $.ajax({ url: "/cid/#{@cid}/experiments", cache: true }); });
       function show(title,element,uri) {
         $(element).html("<h4>"+title+"</h4>"+"Retrieving data from PubChem. This may take some time, please be patient."+"<img src=\"/spinning-wait-icons/wait30trans.gif\" alt=\"Searching PubChem\">");
         $.ajax({
@@ -44,11 +43,68 @@
       }
 
   %body
+    %noscript
+      %div{ :style=>"width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"}
+        Your web browser must have JavaScript enabled in order for this application to display correctly.
+
     %h1 PubChem read across
+    %button{:id=>"about", :style => "margin-left:80%;z-index:4;position:absolute; top:10px; right:0px;"}
+      About this application
+    :javascript
+      $("#about").click(function() {
+        $("info").toggle();
+      });
+    %info{:id=>"info", :style => "display:none;z-index:5;position:fixed; top:10px; left:25%; width: 50%; background-color:#F5F5F5;border:solid 1px black;"}
+      %button{:id => "x", :style => "position:absolute;right:0px;"} x
+      %div{:style => "align:justify;padding:1em;"}
+        %dt
+          (experimental)
+        %dd
+          Filtered experimental data from pubchem database.
+        %br
+        %dt
+          (read across)
+        %dd
+          Prediction results of processed pubchem data.
+        %br
+        %dt
+          Prediction relationship
+        %dd
+          Similar compounds, predicted assays and predicted targets are related considering relevant data.
+      :javascript
+        $("#x").click(function() {
+          $("info").toggle();
+        });
     %form{:name => "form", :action => '/search', :method => "GET"}
       %fieldset
         %label{:for => 'name'} Compound name:
         %input{:type => 'text', :name => 'name', :id => 'name'}
         %input{ :type => "submit", :value => "Search" }
     %em This is an experimental version. Loading data from PubChem can be slow. Please use the "Back" button and retry the offending operation if you have timeout problems.
+
+    #back-top{:style => "z-index: 100;position: fixed;bottom: 3%;margin-left: 91%;display:block;"}
+      %a{:href => ""}
+        %img{:src => "/arrow_up.png", :alt => "top"}
+      %p{:style=>"margin-top:0px;font-size:x-small;"}
+        TOP
+    :javascript
+      $("#back-top").hide();
+      $(function () {
+        $(window).scroll(function () {
+          if ($(this).scrollTop() > 600) {
+            $('#back-top').fadeIn();
+          } else {
+            $('#back-top').fadeOut();
+          }
+        });
+        // scroll body to 0px on click
+        $('#back-top a').click(function () {
+          $('body,html').animate({
+            scrollTop: 0
+          }, 500);
+          return false;
+        });
+      });
+
+
     = yield