diff --git a/include/staff/ticket-view.inc.php b/include/staff/ticket-view.inc.php index 74407ea1952c951da73f9345baa0dc6fe88ddb5a..00a565ad83b10389e45cdabd0646756fa3d8e363 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 4b52fbe4e6afe10174737d902c0a92afcce6a50b..ad0474a85aed7f11679ec64282088e1de56dc91f 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 b0c9efa6a08ea5c16074fb0e4f49c46b0af029bd..6bd2ddeaf536c2297358d32affd7d7c03d478d34 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; + } +}