From b26b84f5bd14716f63e32059d3f59e8e0ea702b8 Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Thu, 21 May 2015 20:09:43 -0500
Subject: [PATCH] ui: Add scroll-up arrow to sticky bar
---
include/staff/ticket-view.inc.php | 3 +++
include/staff/tickets.inc.php | 7 ++++--
scp/css/scp.css | 40 ++++++++++++++++++++++++++++++-
3 files changed, 47 insertions(+), 3 deletions(-)
diff --git a/include/staff/ticket-view.inc.php b/include/staff/ticket-view.inc.php
index 74407ea19..00a565ad8 100644
--- a/include/staff/ticket-view.inc.php
+++ b/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(); ?>"
diff --git a/include/staff/tickets.inc.php b/include/staff/tickets.inc.php
index 4b52fbe4e..ad0474a85 100644
--- a/include/staff/tickets.inc.php
+++ b/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>
diff --git a/scp/css/scp.css b/scp/css/scp.css
index b0c9efa6a..6bd2ddeaf 100644
--- a/scp/css/scp.css
+++ b/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;
+ }
+}
--
GitLab