github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-29 19:18:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix scrollers when items don't fill up the row

Browse source
This commit is contained in:
JonnyWong16 2016-02-27 01:00:12 -08:00
parent b5e9ff3b4e
commit 5e15884d8f
4 changed files with 73 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
data/interfaces/default/css/plexpy.css
View file

@ -2764,7 +2764,9 @@ a.no-highlight:hover {
float: left; float: left;
} }
.btn-gray.disabled, .btn-gray.disabled,
.btn-gray.disabled:hover { .btn-gray.disabled:focus,
.btn-gray.disabled:hover,
.btn-gray.disabled:active {
color: #323232; color: #323232;
cursor: default; cursor: default;
} }
@ -2774,6 +2776,5 @@ a.no-highlight:hover {
} }
#recently-added-row-scroller, #recently-added-row-scroller,
#recently-watched-row-scroller { #recently-watched-row-scroller {
width: 8750px;
position: relative; position: relative;
} }

22
data/interfaces/default/index.html
View file

@ -50,7 +50,7 @@
<a href="#" id="recently-added-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a> <a href="#" id="recently-added-page-left" class="paginate btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li> </li>
<li> <li>
<a href="#" id="recently-added-page-right" class="paginate btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a> <a href="#" id="recently-added-page-right" class="paginate btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li> </li>
</ul> </ul>
<h3>Recently Added</h3> <h3>Recently Added</h3>
@ -131,6 +131,7 @@
data: { count : 50 }, data: { count : 50 },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#recentlyAdded").html(xhr.responseText); $("#recentlyAdded").html(xhr.responseText);
highlightAddedScrollerButton();
} }
}); });
} }
@ -147,14 +148,29 @@
} }
}); });
function highlightAddedScrollerButton() {
var scroller = $("#recently-added-row-scroller");
var numElems = scroller.find("li").length;
scroller.width(numElems * 175);
if (scroller.width() > $("body").find(".container-fluid").width()) {
$("#recently-added-page-right").removeClass("disabled");
} else {
$("#recently-added-page-right").addClass("disabled");
}
}
$(window).resize(function () {
highlightAddedScrollerButton();
});
var leftTotal = 0; var leftTotal = 0;
$(".paginate").click(function (e) { $(".paginate").click(function (e) {
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-added-row-scroller"); var scroller = $("#recently-added-row-scroller");
var containerWidth = $("body").find(".container-fluid").width(); var containerWidth = $("body").find(".container-fluid").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175; var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount); var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax); leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotal }, 250); scroller.animate({ left: leftTotal }, 250);

41
data/interfaces/default/library.html
View file

@ -123,7 +123,7 @@ DOCUMENTATION :: END
<a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a> <a href="#" id="recently-watched-page-left" class="paginate-watched btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li> </li>
<li> <li>
<a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a> <a href="#" id="recently-watched-page-right" class="paginate-watched btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li> </li>
</ul> </ul>
<div class="header-bar"> <div class="header-bar">
@ -148,7 +148,7 @@ DOCUMENTATION :: END
<a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a> <a href="#" id="recently-added-page-left" class="paginate-added btn-gray disabled" data-id="+1"><i class="fa fa-lg fa-chevron-left"></i></a>
</li> </li>
<li> <li>
<a href="#" id="recently-added-page-right" class="paginate-added btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a> <a href="#" id="recently-added-page-right" class="paginate-added btn-gray disabled" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a>
</li> </li>
</ul> </ul>
<div class="header-bar"> <div class="header-bar">
@ -486,6 +486,7 @@ DOCUMENTATION :: END
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#library-recently-watched").html(xhr.responseText); $("#library-recently-watched").html(xhr.responseText);
highlightWatchedScrollerButton();
} }
}); });
} }
@ -501,15 +502,39 @@ DOCUMENTATION :: END
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#library-recently-added").html(xhr.responseText); $("#library-recently-added").html(xhr.responseText);
highlightAddedScrollerButton();
} }
}); });
} }
recentlyWatched(); recentlyWatched();
recentlyAdded(); recentlyAdded();
function highlightWatchedScrollerButton() {
var scroller = $("#recently-watched-row-scroller");
var numElems = scroller.find("li").length;
scroller.width(numElems * 175);
if (scroller.width() > $("#library-recently-watched").width()) {
$("#recently-watched-page-right").removeClass("disabled");
} else {
$("#recently-watched-page-right").addClass("disabled");
}
}
function highlightAddedScrollerButton() {
var scroller = $("#recently-added-row-scroller");
var numElems = scroller.find("li").length;
scroller.width(numElems * 175);
if (scroller.width() > $("#library-recently-added").width()) {
$("#recently-added-page-right").removeClass("disabled");
} else {
$("#recently-added-page-right").addClass("disabled");
}
}
$(window).resize(function() { $(window).resize(function() {
recentlyWatched(); highlightWatchedScrollerButton();
recentlyAdded(); highlightAddedScrollerButton();
}); });
$('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 }); $('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
@ -519,8 +544,8 @@ DOCUMENTATION :: END
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-watched-row-scroller"); var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#library-recently-watched").width(); var containerWidth = $("#library-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount); var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax); leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalWatched }, 250); scroller.animate({ left: leftTotalWatched }, 250);
@ -543,8 +568,8 @@ DOCUMENTATION :: END
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-added-row-scroller"); var scroller = $("#recently-added-row-scroller");
var containerWidth = $("#library-recently-added").width(); var containerWidth = $("#library-recently-added").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount); var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax); leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotalAdded }, 250); scroller.animate({ left: leftTotalAdded }, 250);

20
data/interfaces/default/user.html
View file

@ -489,19 +489,35 @@ from plexpy import helpers
}, },
complete: function(xhr, status) { complete: function(xhr, status) {
$("#user-recently-watched").html(xhr.responseText); $("#user-recently-watched").html(xhr.responseText);
highlightWatchedScrollerButton();
} }
}); });
} }
recentlyWatched(); recentlyWatched();
function highlightWatchedScrollerButton() {
var scroller = $("#recently-watched-row-scroller");
var numElems = scroller.find("li").length;
scroller.width(numElems * 175);
if (scroller.width() > $("#user-recently-watched").width()) {
$("#recently-watched-page-right").removeClass("disabled");
} else {
$("#recently-watched-page-right").addClass("disabled");
}
}
$(window).resize(function() {
highlightWatchedScrollerButton();
});
var leftTotal = 0; var leftTotal = 0;
$(".paginate").click(function (e) { $(".paginate").click(function (e) {
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-watched-row-scroller"); var scroller = $("#recently-watched-row-scroller");
var containerWidth = $("#user-recently-watched").width(); var containerWidth = $("#user-recently-watched").width();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = -(parseInt(scroller.width()) + scrollAmount); var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax); leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax);
scroller.animate({ left: leftTotal }, 250); scroller.animate({ left: leftTotal }, 250);