mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
removed list page css class. made generic list page more like the others
This commit is contained in:
Luke Pulverenti
parent
08c3a1f107
commit
95da7ac9fb
11 changed files with 60 additions and 275 deletions
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.libraryPage, .itemListContent {
|
||||
background: #494949 url(images/bgflip.png) repeat-x!important;
|
||||
background: #262626!important;
|
||||
background-attachment: fixed!important;
|
||||
}
|
||||
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.listPage {
|
||||
background: #262626!important;
|
||||
.type-home {
|
||||
background: #494949 url(images/bgflip.png) repeat-x!important;
|
||||
}
|
||||
|
||||
.listHeader {
|
||||
|
|
|
|||
|
|
@ -7,100 +7,8 @@
|
|||
<div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
|
||||
<div data-role="content" class="itemListContent">
|
||||
|
||||
|
||||
<h1 class="listHeader" style="margin-top: 0;">
|
||||
<span id="itemName" style="margin-right: 30px;"></span>
|
||||
</h1>
|
||||
<div style="float: right; margin-top: -60px;">
|
||||
<button id="btnOptions" type="button" data-mini="true" data-inline="true" data-icon="grid" onclick="$('#optionsPanel', $.mobile.activePage).panel( 'toggle' );">View</button>
|
||||
</div>
|
||||
|
||||
<div id="listItems" style="clear: both;"></div>
|
||||
|
||||
</div>
|
||||
<div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
|
||||
|
||||
<div data-role="controlgroup" data-type="horizontal">
|
||||
<a id="btnViewPanel" href="#" data-role="button" data-theme="a" data-mini="true" onclick="ItemListPage.showViewPanel();">View</a>
|
||||
<a id="btnSortPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showSortPanel();">Sort</a>
|
||||
<a id="btnFilterPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showFilterPanel();">Filter</a>
|
||||
<a id="btnIndexPanel" href="#" data-role="button" data-theme="c" data-mini="true" onclick="ItemListPage.showIndexPanel();">Index</a>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div id="viewpanel" style="display: none;"></div>
|
||||
<div id="sortpanel" style="display: none;">
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort By:</h3>
|
||||
</legend>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked">
|
||||
<label for="radioSortName" onclick="ItemListPage.sortBy('SortName');">Name</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioCommunityRating" value="other">
|
||||
<label for="radioCommunityRating" onclick="ItemListPage.sortBy('CommunityRating');">Community Rating</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="other">
|
||||
<label for="radioDateCreated" onclick="ItemListPage.sortBy('DateCreated');">Date Added</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="other">
|
||||
<label for="radioDatePlayed" onclick="ItemListPage.sortBy('DatePlayed');">Date Played</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="other">
|
||||
<label for="radioPremiereDate" onclick="ItemListPage.sortBy('PremiereDate');">Date Released</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off">
|
||||
<label for="radioPlayCount" onclick="ItemListPage.sortBy('PlayCount');">Play Count</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRandom" value="off">
|
||||
<label for="radioRandom" onclick="ItemListPage.sortBy('Random');">Random</label>
|
||||
|
||||
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off">
|
||||
<label for="radioRuntime" onclick="ItemListPage.sortBy('Runtime');">Runtime</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Sort Order:</h3>
|
||||
</legend>
|
||||
|
||||
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioAscending" value="on" checked="checked">
|
||||
<label for="radioAscending" onclick="ItemListPage.sortOrder('Ascending');">Ascending</label>
|
||||
|
||||
<input class="radioSortOrder" data-theme="c" type="radio" name="radioSortOrder" id="radioDescending" value="other">
|
||||
<label for="radioDescending" onclick="ItemListPage.sortOrder('Descending');">Descending</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="filterpanel" style="display: none;">
|
||||
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>
|
||||
<h3>Filters:</h3>
|
||||
</legend>
|
||||
<input type="checkbox" name="chkPlayed" id="chkPlayed" onchange="ItemListPage.filter('IsPlayed', this.checked);" data-theme="c">
|
||||
<label for="chkPlayed">Played</label>
|
||||
|
||||
<input type="checkbox" name="chkUnplayed" id="chkUnplayed" onchange="ItemListPage.filter('IsUnplayed', this.checked);" data-theme="c">
|
||||
<label for="chkUnplayed">Unplayed</label>
|
||||
|
||||
<input type="checkbox" name="chkIsFavorite" id="chkIsFavorite" onchange="ItemListPage.filter('IsFavorite', this.checked);" data-theme="c">
|
||||
<label for="chkIsFavorite">Favorites</label>
|
||||
|
||||
<input type="checkbox" name="chkLikes" id="chkLikes" onchange="ItemListPage.filter('Likes', this.checked);" data-theme="c">
|
||||
<label for="chkLikes">Likes</label>
|
||||
|
||||
<input type="checkbox" name="chkDislikes" id="chkDislikes" onchange="ItemListPage.filter('Dislikes', this.checked);" data-theme="c">
|
||||
<label for="chkDislikes">Dislikes</label>
|
||||
|
||||
<input type="checkbox" name="chkResumable" id="chkResumable" onchange="ItemListPage.filter('IsResumable', this.checked);" data-theme="c">
|
||||
<label for="chkResumable">Resumable</label>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
<div id="indexpanel" style="display: none;"></div>
|
||||
|
||||
</form>
|
||||
<h1 id="itemName" class="listHeader" style="margin-top: .5em;"></h1>
|
||||
<div id="items"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="movieGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="movieGenresPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>Movies</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moviePeoplePage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="moviePeoplePage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>Movies</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moviesPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="moviesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>Movies</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="movieStudiosPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="movieStudiosPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>Movies</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -1,190 +1,67 @@
|
|||
var ItemListPage = {
|
||||
(function ($, document) {
|
||||
|
||||
onPageShow: function () {
|
||||
// The base query options
|
||||
var query = {
|
||||
|
||||
ItemListPage.reload();
|
||||
},
|
||||
SortBy: "SortName",
|
||||
SortOrder: "Ascending",
|
||||
Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,ItemCounts,DateCreated",
|
||||
Limit: LibraryBrowser.getDetaultPageSize(),
|
||||
StartIndex: 0
|
||||
};
|
||||
|
||||
reload: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
var parentId = getParameterByName('parentId');
|
||||
|
||||
var query = {
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Recursive: getParameterByName('Recursive') == 'true'
|
||||
};
|
||||
|
||||
var filters = [];
|
||||
|
||||
if (getParameterByName('IsResumable') == 'true') {
|
||||
filters.push("IsResumable");
|
||||
$('#chkResumable', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
if (getParameterByName('IsFavorite') == 'true') {
|
||||
filters.push("IsFavorite");
|
||||
$('#chkIsFavorite', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
if (getParameterByName('IsRecentlyAdded') == 'true') {
|
||||
filters.push("IsRecentlyAdded");
|
||||
$('#chkRecentlyAdded', page).checked(true).checkboxradio("refresh");
|
||||
}
|
||||
|
||||
var sortBy = getParameterByName('SortBy') || 'SortName';
|
||||
query.SortBy = sortBy;
|
||||
$('.radioSortBy', page).checked(false).checkboxradio("refresh");
|
||||
$('#radio' + sortBy, page).checked(true).checkboxradio("refresh");
|
||||
|
||||
var order = getParameterByName('SortOrder') || 'Ascending';
|
||||
|
||||
query.SortOrder = order;
|
||||
$('.radioSortOrder', page).checked(false).checkboxradio("refresh");
|
||||
$('#radio' + order, page).checked(true).checkboxradio("refresh");
|
||||
|
||||
query.Filters = filters.join(',');
|
||||
//query.limit = 100;
|
||||
|
||||
if (parentId) {
|
||||
query.parentId = parentId;
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), parentId).done(ItemListPage.renderTitle);
|
||||
}
|
||||
else {
|
||||
$('#itemName', page).html(getParameterByName('Title') || "Media Library");
|
||||
}
|
||||
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
refreshItems: function (query) {
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var userId = Dashboard.getCurrentUserId();
|
||||
|
||||
page.itemQuery = query;
|
||||
ApiClient.getItems(userId, query).done(function (result) {
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(ItemListPage.renderItems);
|
||||
},
|
||||
var html = '';
|
||||
|
||||
renderItems: function (result) {
|
||||
var showPaging = result.TotalRecordCount > query.Limit;
|
||||
|
||||
var items = result.Items;
|
||||
if (showPaging) {
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true);
|
||||
}
|
||||
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
html += LibraryBrowser.getPosterDetailViewHtml({
|
||||
items: result.Items,
|
||||
useAverageAspectRatio: true
|
||||
});
|
||||
|
||||
var renderOptions = {
|
||||
if (showPaging) {
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
}
|
||||
|
||||
items: items,
|
||||
useAverageAspectRatio: query.Recursive !== true,
|
||||
showTitle: query.Recursive
|
||||
};
|
||||
var elem = $('#items', page).html(html).trigger('create');
|
||||
|
||||
var html = LibraryBrowser.getPosterViewHtml(renderOptions);
|
||||
$('select', elem).on('change', function () {
|
||||
query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('#listItems', $.mobile.activePage).html(html);
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
},
|
||||
ApiClient.getItem(userId, query.ParentId).done(function (item) {
|
||||
|
||||
renderTitle: function (item) {
|
||||
$('#itemName', page).html(item.Name);
|
||||
|
||||
|
||||
$('#itemName', $.mobile.activePage).html(item.Name);
|
||||
},
|
||||
|
||||
sortBy: function (sortBy) {
|
||||
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
query.SortBy = sortBy;
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
sortOrder: function (order) {
|
||||
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
query.SortOrder = order;
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
filter: function(name, add)
|
||||
{
|
||||
var query = $.mobile.activePage.itemQuery;
|
||||
var filters = query.Filters || "";
|
||||
|
||||
filters = (',' + filters).replace(',' + name, '').substring(1);
|
||||
|
||||
if (add) {
|
||||
filters = filters ? (filters + ',' + name) : name;
|
||||
}
|
||||
|
||||
query.Filters = filters;
|
||||
|
||||
ItemListPage.refreshItems(query);
|
||||
},
|
||||
|
||||
showSortPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).show();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showViewPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).show();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showIndexPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).hide();
|
||||
$('#indexpanel', page).show();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "a" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "c" });
|
||||
},
|
||||
|
||||
showFilterPanel: function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
|
||||
$('#viewpanel', page).hide();
|
||||
$('#filterpanel', page).show();
|
||||
$('#indexpanel', page).hide();
|
||||
$('#sortpanel', page).hide();
|
||||
|
||||
$('#btnViewPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnSortPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnIndexPanel', page).buttonMarkup({ theme: "c" });
|
||||
$('#btnFilterPanel', page).buttonMarkup({ theme: "a" });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$(document).on('pageshow', "#itemListPage", ItemListPage.onPageShow);
|
||||
$(document).on('pageinit', "#itemListPage", function () {
|
||||
|
||||
|
||||
}).on('pagebeforeshow', "#itemListPage", function () {
|
||||
|
||||
query.ParentId = getParameterByName('parentId');
|
||||
reloadItems(this);
|
||||
|
||||
}).on('pageshow', "#itemListPage", function () {
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, document);
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvGenresPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="tvGenresPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>TV Shows</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvPeoplePage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="tvPeoplePage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>TV Shows</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvShowsPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="tvShowsPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>TV Shows</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tvStudiosPage" data-role="page" class="page libraryPage noLogoPage listPage" data-theme="a">
|
||||
<div id="tvStudiosPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>TV Shows</h1>
|
||||
<div data-role="content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue