ui: Add scroll-up arrow to sticky bar

include/staff/ticket-view.inc.php

@@ -164,6 +164,9 @@ if($ticket->isOverdue())
                 }?>
               </ul>
             </div>
+            <a class="only sticky scroll-up" href="#" onclick="javascript: $('html, body').animate({scrollTop: 0}, 'fast'); return false;"
+                ><i class="icon-chevron-up icon-large"></i>
+            </a>
         </div>
         <div class="flush-left">
              <h2><a href="tickets.php?id=<?php echo $ticket->getId(); ?>"

include/staff/tickets.inc.php

@@ -326,7 +326,7 @@ return false;">
 <!-- SEARCH FORM END -->
 <div class="clear"></div>
 <div style="margin-bottom:20px; padding-top:10px;">
-<div class="sticky bar">
+<div class="sticky bar opaque">
     <div class="content">
         <div class="pull-left flush-left">
             <h2><a href="<?php echo $refresh_url; ?>"
@@ -334,7 +334,7 @@ return false;">
                 $results_type.$showing; ?></a></h2>
         </div>
         <div class="pull-right flush-right">
-            <span style="display:inline-block">
+            <span class="notsticky" style="display:inline-block">
                 <span style="vertical-align: baseline">Sort:</span>
             <select name="sort" onchange="javascript: $.pjax({
                 url:'?' + addSearchParam('sort', $(this).val()),
@@ -356,6 +356,9 @@ return false;">
             class="icon-trash"></i> <?php echo __('Delete'); ?></a>
             <?php
             } ?>
+            <a class="only sticky scroll-up" href="#" onclick="javascript: $('html, body').animate({scrollTop: 0}, 'fast'); return false;"
+                ><i class="icon-chevron-up icon-large"></i>
+            </a>
         </div>
     </div>
 </div>

scp/css/scp.css

@@ -2211,7 +2211,7 @@ td.indented {
   z-index: 6;
   width: 100%;
   background-color: white;
-  background-color: rgba(255,255,255,0.9);
+  background-color: rgba(255,255,255,0.95);
   padding: 10px 20px;
   box-sizing: border-box;
   box-shadow: 0 3px 10px rgba(0,0,0,0.3);
@@ -2219,3 +2219,41 @@ td.indented {
 .sticky.bar .content {
   margin: auto;
 }
+.sticky.bar.fixed .notsticky {
+  display: none !important;
+}
+.sticky.bar.opaque {
+  background-color: white;
+}
+.sticky.bar.fixed h2 {
+  margin: 0;
+}
+.sticky.bar:not(.fixed) .sticky.only {
+    display:none;
+}
+.scroll-up {
+  display:none;
+}
+@media screen and (min-width: 1040px) {
+  .scroll-up {
+    display: inline;
+    background-color: #eee;
+    background-color: rgba(0,0,0,0.1);
+    position: absolute;
+    top: 0px;
+    right: 20px;
+    padding: 8px 8px 5px;
+    border-radius: 0 0 5px 5px;
+    border: 1px dotted #888;
+    border-top: none;
+    color: #888 !important;
+    box-shadow: 0 3px 8px -6px rgba(0,0,0,0.9);
+  }
+  .scroll-up:hover {
+    background-color: #444;
+    background-color: rgba(0,0,0,0.7);
+    color: #ddd !important;
+    color: rgba(255,255,255,0.8) !important;
+    border-color:transparent;
+  }
+}