UI: add arrow to scroll to bottom or to scroll to top

3 files changed, 34 insertions, 1 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index c26c8a7d9..08e500425 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -23,7 +23,6 @@ beforeSend: function(xhr, settings) {
     }
 }});
 
-
 $(document).ready(function(){
     $("#main_menu > ul > li > ul").hide();
     $("#main_menu ul ul .selected").parents().show();
@@ -38,6 +37,18 @@ $(document).ready(function(){
                {item:'operation', value:$("#current_operation").val()}
         );
     });
+    if ($(document).height() < 1.5*$(window).height()){
+        $('#to_bottom_arrow').hide();
+        $('#to_top_arrow').hide();
+    }
+});
+
+$('#to_bottom_arrow').live('click', function(){
+  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
+});
+
+$('#to_top_arrow').live('click', function(){
+  $("html, body").animate({ scrollTop: 0}, 1000);
 });
 
 $("#main_menu ul li").live('click', function(){
diff --git a/ishtar_common/static/media/style.css b/ishtar_common/static/media/style.css
index f622fcb0d..d9bcd73e7 100644
--- a/ishtar_common/static/media/style.css
+++ b/ishtar_common/static/media/style.css
@@ -115,6 +115,22 @@ button:hover, input[type=submit]:hover{
     display:none;
 }
 
+div.nav-button{
+    cursor:pointer;
+    width:15px;
+    z-index:1000;
+    position:fixed;
+    right:20px;
+}
+
+#to_bottom_arrow{
+    bottom:80px;
+}
+
+#to_top_arrow{
+    top:160px;
+}
+
 div#header{
     width:100%;
     text-align:center;
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index e2aef1ca0..2f197a841 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -31,6 +31,12 @@
     {% endif %}
         {% endblock %}
     </div>
+    <div class="nav-button ui-state-default ui-corner-all" id="to_bottom_arrow">
+        <span class="ui-icon ui-icon-circle-arrow-s"></span>
+    </div>
+    <div class="nav-button ui-state-default ui-corner-all" id="to_top_arrow">
+        <span class="ui-icon ui-icon-circle-arrow-n"></span>
+    </div>
     <div id="window"></div>
     <div id="logo">
 {% if APP_NAME %}<p id="app_name">{{APP_NAME}}</p>{%endif%}