Fiddled with the Back to the Top button a bit so it's better visible on the white background, also only on widescreen now.

This commit is contained in:
Taloth Saldono 2016-02-15 22:30:47 +01:00
parent 72f0085ef7
commit 34d5fb1aa0
3 changed files with 19 additions and 15 deletions

View File

@ -72,21 +72,24 @@
} }
#scroll-up { #scroll-up {
.clickable;
&:hover { i {
text-decoration : none; .clickable;
.opacity (0.4); .opacity(0.3);
margin: 0px 20px;
&:hover {
.opacity(0.4);
}
} }
.opacity (0.2);
position : fixed; position : fixed;
z-index : 9999; z-index : 9999;
bottom : 50px; bottom : 30px;
right : 50px; right : 0px;
display : none; display : none;
font-size : 56px; font-size : 56px;
color : white; color : gray;
} }
.control-panel-visible { .control-panel-visible {

View File

@ -55,9 +55,9 @@
<div id="modal-region2"></div> <div id="modal-region2"></div>
</div> </div>
</div> </div>
<a id="scroll-up" title="Back to the top!"> <div id="scroll-up">
<i class="icon-sonarr-back-to-top"></i> <i class="icon-sonarr-back-to-top visible-lg-inline" title="Back to the top!"></i>
</a> </div>
</div> </div>
<div class="footer"> <div class="footer">
<div class="container-fluid"> <div class="container-fluid">

View File

@ -3,13 +3,14 @@ var _ = require('underscore');
$(document).ready(function() { $(document).ready(function() {
var _window = $(window); var _window = $(window);
var _scrollButton = $('#scroll-up'); var _scrollContainer = $('#scroll-up');
var _scrollButton = $('#scroll-up i');
var _scrollHandler = function() { var _scrollHandler = function() {
if (_window.scrollTop() > 100) { if (_window.scrollTop() > 400) {
_scrollButton.fadeIn(); _scrollContainer.fadeIn();
} else { } else {
_scrollButton.fadeOut(); _scrollContainer.fadeOut();
} }
}; };