github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-06 05:01:14 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make recent rows touch scrollable

Browse source
This commit is contained in:
JonnyWong16 2024-09-28 13:17:09 -07:00
parent 1353247b55
commit e3f4851883
No known key found for this signature in database
GPG key ID: B1F1F9807184697A
7 changed files with 44 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

3
data/interfaces/default/css/tautulli.css
View file

@ -1478,7 +1478,8 @@ a:hover .dashboard-stats-square {
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 0; z-index: 0;
overflow: hidden; overflow: auto;
scrollbar-width: none;
} }
.dashboard-recent-media { .dashboard-recent-media {
width: 100%; width: 100%;

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

@ -92,10 +92,10 @@
<h3 class="pull-left"><span id="recently-added-xml">Recently Added</span></h3> <h3 class="pull-left"><span id="recently-added-xml">Recently Added</span></h3>
<ul class="nav nav-header nav-dashboard pull-right" style="margin-top: -3px;"> <ul class="nav nav-header nav-dashboard pull-right" style="margin-top: -3px;">
<li> <li>
<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 disabled" 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>
<div class="button-bar"> <div class="button-bar">
@ -971,29 +971,28 @@
}); });
function resetScroller() { function resetScroller() {
leftTotal = 0; $(".dashboard-recent-media-row").animate({ scrollLeft: 0 }, 1000);
$("#recently-added-row-scroller").animate({ left: leftTotal }, 1000);
$("#recently-added-page-left").addClass("disabled").blur(); $("#recently-added-page-left").addClass("disabled").blur();
} }
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 scrollerParent = scroller.parent();
var containerWidth = $("body").find(".container-fluid").width(); var containerWidth = $("body").find(".container-fluid").width();
var scrollCurrent = scrollerParent.scrollLeft();
var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175; var scrollAmount = $(this).data("id") * parseInt((containerWidth - 15) / 175) * 175;
var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0); var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax); if (scrollTotal === 0) {
scroller.animate({ left: leftTotal }, 250);
if (leftTotal === 0) {
$("#recently-added-page-left").addClass("disabled").blur(); $("#recently-added-page-left").addClass("disabled").blur();
} else { } else {
$("#recently-added-page-left").removeClass("disabled"); $("#recently-added-page-left").removeClass("disabled");
} }
if (leftTotal === leftMax) { if (scrollTotal === scrollMax) {
$("#recently-added-page-right").addClass("disabled").blur(); $("#recently-added-page-right").addClass("disabled").blur();
} else { } else {
$("#recently-added-page-right").removeClass("disabled"); $("#recently-added-page-right").removeClass("disabled");
@ -1005,17 +1004,17 @@
selected_filter = $('input[name=recently-added-toggle]:checked', '#recently-added-toggles'); selected_filter = $('input[name=recently-added-toggle]:checked', '#recently-added-toggles');
$(selected_filter).closest('label').addClass('active'); $(selected_filter).closest('label').addClass('active');
recently_added_type = $(selected_filter).val(); recently_added_type = $(selected_filter).val();
resetScroller();
setLocalStorage('home_stats_recently_added_type', recently_added_type); setLocalStorage('home_stats_recently_added_type', recently_added_type);
recentlyAdded(recently_added_count, recently_added_type); recentlyAdded(recently_added_count, recently_added_type);
resetScroller();
}); });
$('#recently-added-count').change(function () { $('#recently-added-count').change(function () {
forceMinMax($(this)); forceMinMax($(this));
recently_added_count = $(this).val(); recently_added_count = $(this).val();
resetScroller();
setLocalStorage('home_stats_recently_added_count', recently_added_count); setLocalStorage('home_stats_recently_added_count', recently_added_count);
recentlyAdded(recently_added_count, recently_added_type); recentlyAdded(recently_added_count, recently_added_type);
resetScroller();
}); });
$('#recently-added-count').tooltip({ container: 'body', placement: 'top', html: true }); $('#recently-added-count').tooltip({ container: 'body', placement: 'top', html: true });

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

@ -149,10 +149,10 @@ DOCUMENTATION :: END
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right"> <ul class="nav nav-header nav-dashboard pull-right">
<li> <li>
<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 disabled" 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">
@ -175,10 +175,10 @@ DOCUMENTATION :: END
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right"> <ul class="nav nav-header nav-dashboard pull-right">
<li> <li>
<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 disabled" 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">
@ -745,48 +745,48 @@ DOCUMENTATION :: END
$('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 }); $('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
var leftTotalWatched = 0;
$(".paginate-watched").click(function (e) { $(".paginate-watched").click(function (e) {
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-watched-row-scroller"); var scroller = $("#recently-watched-row-scroller");
var scrollerParent = scroller.parent();
var containerWidth = $("#library-recently-watched").width(); var containerWidth = $("#library-recently-watched").width();
var scrollCurrent = scrollerParent.scrollLeft();
var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0); var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
leftTotalWatched = Math.max(Math.min(leftTotalWatched + scrollAmount, 0), leftMax); if (scrollTotal == 0) {
scroller.animate({ left: leftTotalWatched }, 250);
if (leftTotalWatched == 0) {
$("#recently-watched-page-left").addClass("disabled").blur(); $("#recently-watched-page-left").addClass("disabled").blur();
} else { } else {
$("#recently-watched-page-left").removeClass("disabled"); $("#recently-watched-page-left").removeClass("disabled");
} }
if (leftTotalWatched == leftMax) { if (scrollTotal == scrollMax) {
$("#recently-watched-page-right").addClass("disabled").blur(); $("#recently-watched-page-right").addClass("disabled").blur();
} else { } else {
$("#recently-watched-page-right").removeClass("disabled"); $("#recently-watched-page-right").removeClass("disabled");
} }
}); });
var leftTotalAdded = 0;
$(".paginate-added").click(function (e) { $(".paginate-added").click(function (e) {
e.preventDefault(); e.preventDefault();
var scroller = $("#recently-added-row-scroller"); var scroller = $("#recently-added-row-scroller");
var scrollerParent = scroller.parent();
var containerWidth = $("#library-recently-added").width(); var containerWidth = $("#library-recently-added").width();
var scrollCurrent = scrollerParent.scrollLeft();
var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0); var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
leftTotalAdded = Math.max(Math.min(leftTotalAdded + scrollAmount, 0), leftMax); if (scrollTotal == 0) {
scroller.animate({ left: leftTotalAdded }, 250);
if (leftTotalAdded == 0) {
$("#recently-added-page-left").addClass("disabled").blur(); $("#recently-added-page-left").addClass("disabled").blur();
} else { } else {
$("#recently-added-page-left").removeClass("disabled"); $("#recently-added-page-left").removeClass("disabled");
} }
if (leftTotalAdded == leftMax) { if (scrollTotal == scrollMax) {
$("#recently-added-page-right").addClass("disabled").blur(); $("#recently-added-page-right").addClass("disabled").blur();
} else { } else {
$("#recently-added-page-right").removeClass("disabled"); $("#recently-added-page-right").removeClass("disabled");

2
data/interfaces/default/library_recently_added.html
View file

@ -36,7 +36,7 @@ DOCUMENTATION :: END
%> %>
<div class="dashboard-recent-media-row"> <div class="dashboard-recent-media-row">
<div id="recently-added-row-scroller" style="left: 0;"> <div id="recently-added-row-scroller">
<ul class="dashboard-recent-media list-unstyled"> <ul class="dashboard-recent-media list-unstyled">
% for item in data: % for item in data:
<li> <li>

2
data/interfaces/default/recently_added.html
View file

@ -36,7 +36,7 @@ DOCUMENTATION :: END
%> %>
% if data: % if data:
<div class="dashboard-recent-media-row"> <div class="dashboard-recent-media-row">
<div id="recently-added-row-scroller" style="left: 0;"> <div id="recently-added-row-scroller">
<ul class="dashboard-recent-media list-unstyled"> <ul class="dashboard-recent-media list-unstyled">
% for item in data: % for item in data:
<div class="dashboard-recent-media-instance"> <div class="dashboard-recent-media-instance">

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

@ -125,10 +125,10 @@ DOCUMENTATION :: END
<div class="table-card-header"> <div class="table-card-header">
<ul class="nav nav-header nav-dashboard pull-right"> <ul class="nav nav-header nav-dashboard pull-right">
<li> <li>
<a href="#" id="recently-watched-page-left" class="paginate 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 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 btn-gray" data-id="-1"><i class="fa fa-lg fa-chevron-right"></i></a> <a href="#" id="recently-watched-page-right" class="paginate btn-gray" 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">
@ -688,24 +688,24 @@ DOCUMENTATION :: END
highlightWatchedScrollerButton(); highlightWatchedScrollerButton();
}); });
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 scrollerParent = scroller.parent();
var containerWidth = $("#user-recently-watched").width(); var containerWidth = $("#user-recently-watched").width();
var scrollCurrent = scrollerParent.scrollLeft();
var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175; var scrollAmount = $(this).data("id") * parseInt(containerWidth / 175) * 175;
var leftMax = Math.min(-parseInt(scroller.width()) + Math.abs(scrollAmount), 0); var scrollMax = parseInt(scroller.width()) - Math.abs(scrollAmount);
var scrollTotal = Math.min(scrollCurrent + scrollAmount, scrollMax);
scrollerParent.animate({ scrollLeft: scrollTotal }, 250);
leftTotal = Math.max(Math.min(leftTotal + scrollAmount, 0), leftMax); if (scrollTotal == 0) {
scroller.animate({ left: leftTotal }, 250);
if (leftTotal == 0) {
$("#recently-watched-page-left").addClass("disabled").blur(); $("#recently-watched-page-left").addClass("disabled").blur();
} else { } else {
$("#recently-watched-page-left").removeClass("disabled"); $("#recently-watched-page-left").removeClass("disabled");
} }
if (leftTotal == leftMax) { if (scrollTotal == scrollMax) {
$("#recently-watched-page-right").addClass("disabled").blur(); $("#recently-watched-page-right").addClass("disabled").blur();
} else { } else {
$("#recently-watched-page-right").removeClass("disabled"); $("#recently-watched-page-right").removeClass("disabled");

2
data/interfaces/default/user_recently_watched.html
View file

@ -31,7 +31,7 @@ DOCUMENTATION :: END
from plexpy.helpers import page, short_season from plexpy.helpers import page, short_season
%> %>
<div class="dashboard-recent-media-row"> <div class="dashboard-recent-media-row">
<div id="recently-watched-row-scroller" style="left: 0;"> <div id="recently-watched-row-scroller">
<ul class="dashboard-recent-media list-unstyled"> <ul class="dashboard-recent-media list-unstyled">
% for item in data: % for item in data:
<li> <li>