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 {
.clickable;
&:hover {
text-decoration : none;
.opacity (0.4);
i {
.clickable;
.opacity(0.3);
margin: 0px 20px;
&:hover {
.opacity(0.4);
}
}
.opacity (0.2);
position : fixed;
z-index : 9999;
bottom : 50px;
right : 50px;
bottom : 30px;
right : 0px;
display : none;
font-size : 56px;
color : white;
color : gray;
}
.control-panel-visible {

View File

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

View File

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