mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

added a grid view to the movie page

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-05 00:15:00 -04:00
parent 92640214f4
commit 2e2c2ee90e
11 changed files with 150 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

25
dashboard-ui/css/librarybrowser.css
View file

@ -65,15 +65,25 @@
width: 50px;
}
.thName, .tdName {
max-width: 300px;
}
.libraryItemsGrid .imgUserItemRating {
width: 20px;
height: 20px;
}
.libraryItemsGrid a {
text-shadow: none;
}
@media all and (min-width: 650px) {
.libraryPage .ui-content {
padding: 15px 30px 100px;
}
}
@media all and (min-width: 750px) {
}
@media all and (min-width: 1200px) {
.libraryPage .ui-content {
@ -81,7 +91,7 @@
}
.ehsContent {
max-width: 900px;
max-width: 850px;
}
.libraryItemsGridContainer {
@ -90,6 +100,10 @@
}
@media all and (min-width: 1440px) {
.ehsContent {
max-width: 900px;
}
.libraryItemsGridContainer {
padding: 0 20%;
}
@ -97,8 +111,9 @@
@media all and (min-width: 1920px) {
.ehsContent {
max-width: 1300px;
max-width: 1000px;
}
.libraryItemsGridContainer {
padding: 0 25%;
}

8
dashboard-ui/css/site.css
View file

@ -691,16 +691,10 @@ progress {
background-position: right center;
}
.userItemRating {
.imgUserItemRating {
height: 24px;
width: 24px;
margin-right: 1em;
overflow: hidden;
display: inline-block;
}
.imgUserItemRating {
height: 24px;
cursor: pointer;
}

19
dashboard-ui/movies.html
View file

@ -17,6 +17,12 @@
<a href="#" data-role="button">Directors</a>
</div>
<div class="viewSettings">
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">Poster</option>
<option value="Grid">Grid</option>
</select>
</div>
<button data-mini="true" data-icon="sort" data-inline="true" onclick="$('#sortPanel', $.mobile.activePage).panel( 'toggle' );">Sort</button>
<button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
</div>
@ -77,10 +83,13 @@
<h3 onclick="Dashboard.selectDirectory();">Filters:</h3>
</legend>
<input class="chkStandardFilter" type="checkbox" name="chkPlayed" id="chkPlayed" data-theme="c" data-filter="IsPlayed">
<label for="chkPlayed">Played</label>
<label for="chkPlayed">Watched</label>
<input class="chkStandardFilter" type="checkbox" name="chkUnplayed" id="chkUnplayed" data-theme="c" data-filter="IsUnPlayed">
<label for="chkUnplayed">Unplayed</label>
<label for="chkUnplayed">Unwatched</label>
<input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable">
<label for="chkResumable">Resumable</label>
<input class="chkStandardFilter" type="checkbox" name="chkIsFavorite" id="chkIsFavorite" data-theme="c" data-filter="IsFavorite">
<label for="chkIsFavorite">Favorite</label>
@ -90,14 +99,10 @@
<input class="chkStandardFilter" type="checkbox" name="chkDislikes" id="chkDislikes" data-theme="c" data-filter="Dislikes">
<label for="chkDislikes">Dislikes</label>
<input class="chkStandardFilter" type="checkbox" name="chkResumable" id="chkResumable" data-theme="c" data-filter="IsResumable">
<label for="chkResumable">Resumable</label>
</fieldset>
<br />
<fieldset data-role="controlgroup">
<legend>
</legend>
<legend></legend>
<input class="chkVideoTypeFilter" type="checkbox" name="chkBluray" id="chkBluray" data-theme="c" data-filter="Bluray">
<label for="chkBluray">Bluray</label>

9
dashboard-ui/moviesrecommended.html
View file

@ -18,7 +18,7 @@
</div>
<div class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Movies</h1>
<h1 class="listHeader firstListHeader">Latest Unwatched Movies</h1>
<div id="recentlyAddedItems">
</div>
@ -29,6 +29,13 @@
<div id="resumableItems">
</div>
</div>
<div id="trailerSection" style="display: none;">
<h1 class="listHeader firstListHeader">Latest Unwatched Trailers</h1>
<div id="trailerItems">
</div>
</div>
</div>
</div>

20
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -723,26 +723,26 @@
//played/unplayed
if (userData.Played) {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" />';
} else {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" />';
}
if (typeof userData.Likes == "undefined") {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
} else if (userData.Likes) {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" />';
} else {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
}
if (userData.IsFavorite) {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
} else {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
}
$('#itemRatings', page).html(html);

16
dashboard-ui/scripts/itembynamedetailpage.js
View file

@ -130,20 +130,20 @@
var userData = item.UserData || {};
if (typeof userData.Likes == "undefined") {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.setDislike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemByNameDetailPage.setLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
} else if (userData.Likes) {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.setDislike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemByNameDetailPage.clearLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" />';
} else {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.clearLike();" /></div>';
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemByNameDetailPage.setLike();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
}
if (userData.IsFavorite) {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemByNameDetailPage.setFavorite();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
} else {
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemByNameDetailPage.setFavorite();" /></div>';
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
}
$('#itemRatings', page).html(html);

65
dashboard-ui/scripts/movies.js
View file

@ -1,5 +1,7 @@
(function ($, document) {
var view = "Poster";
// The base query options
var query = {
@ -7,7 +9,7 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "PrimaryImageAspectRatio"
Fields: "PrimaryImageAspectRatio,UserData"
};
function getTableHtml(items) {
@ -18,11 +20,12 @@
html += '<tr>';
html += '<th>&nbsp;</th>';
html += '<th>Name</th>';
html += '<th class="thName">Name</th>';
html += '<th>Year</th>';
html += '<th>Official Rating</th>';
html += '<th>Rating</th>';
html += '<th>Runtime</th>';
html += '<th>Community Rating</th>';
html += '<th></th>';
html += '</tr>';
html += '</thead>';
@ -57,7 +60,7 @@
html += '<img class="libraryGridImage" src="' + ApiClient.getImageUrl(item.Id, {
type: "Primary",
height: 150,
height: 100,
tag: item.ImageTags.Primary
}) + '" />';
@ -68,14 +71,48 @@
html += '</a></td>';
html += '<td><a href="' + url + '">' + item.Name + '</a></td>';
html += '<td class="tdName"><a href="' + url + '">' + item.Name + '</a></td>';
html += '<td>' + (item.ProductionYear || "") + '</td>';
html += '<td>' + (item.OfficialRating || "") + '</td>';
html += '<td>' + (item.RunTimeTicks || "") + '</td>';
var minutes = (item.RunTimeTicks || 0) / 600000000;
minutes = minutes || 1;
html += '<td>' + parseInt(minutes) + 'min</td>';
html += '<td>' + (item.CommunityRating || "") + '</td>';
html += '<td>';
var userData = item.UserData || {};
if (userData.Played) {
html += '<img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" />';
} else {
html += '<img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" />';
}
if (typeof userData.Likes == "undefined") {
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" />';
} else if (userData.Likes) {
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" />';
} else {
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" />';
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" />';
}
if (userData.IsFavorite) {
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" />';
} else {
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" />';
}
html += '</td>';
html += '</tr>';
return html;
}
@ -86,12 +123,15 @@
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
if (view == "Poster") {
$('#items', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
useAverageAspectRatio: true
}))/*.html(getTableHtml(result.Items)).trigger('create')*/;
}));
}
else if (view == "Grid") {
$('#items', page).html(getTableHtml(result.Items)).trigger('create');
}
Dashboard.hideLoadingMsg();
});
@ -144,6 +184,13 @@
reloadItems(page);
});
$('#selectView', this).on('change', function () {
view = this.value;
reloadItems(page);
});
}).on('pageshow', "#moviesPage", function () {
reloadItems(this);

30
dashboard-ui/scripts/moviesrecommended.js
View file

@ -11,7 +11,8 @@
IncludeItemTypes: "Movie",
Limit: 5,
Recursive: true,
Fields: "PrimaryImageAspectRatio"
Fields: "PrimaryImageAspectRatio",
Filters: "IsUnplayed"
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
@ -50,6 +51,33 @@
});
options = {
SortBy: "DateCreated",
SortOrder: "Descending",
IncludeItemTypes: "Trailer",
Limit: 5,
Recursive: true,
Fields: "PrimaryImageAspectRatio",
Filters: "IsUnplayed"
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
if (result.Items.length) {
$('#trailerSection', page).show();
} else {
$('#trailerSection', page).hide();
}
$('#trailerItems', page).html(LibraryBrowser.getPosterViewHtml({
items: result.Items,
useAverageAspectRatio: true
}));
});
});

4
dashboard-ui/scripts/scheduledtaskspage.js
View file

@ -146,8 +146,6 @@
startTask: function (id) {
Dashboard.showLoadingMsg();
ApiClient.startScheduledTask(id).done(function (result) {
ScheduledTasksPage.reloadList();
@ -157,8 +155,6 @@
stopTask: function (id) {
Dashboard.showLoadingMsg();
ApiClient.stopScheduledTask(id).done(function (result) {
ScheduledTasksPage.reloadList();

3
dashboard-ui/scripts/tvrecommended.js
View file

@ -11,7 +11,8 @@
IncludeItemTypes: "Episode",
Limit: 6,
Recursive: true,
Fields: "PrimaryImageAspectRatio,SeriesInfo"
Fields: "PrimaryImageAspectRatio,SeriesInfo",
Filters: "IsUnplayed"
};
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {

2
dashboard-ui/tvrecommended.html
View file

@ -15,7 +15,7 @@
<a href="#" data-role="button">Actors</a>
</div>
<div class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Episodes</h1>
<h1 class="listHeader firstListHeader">Latest Unwatched Episodes</h1>
<div id="recentlyAddedItems">
</div>