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

update listviews

Browse source
This commit is contained in:
Luke Pulverenti 2015-09-04 13:34:50 -04:00
parent def595ff8a
commit 869ad8f59d
3 changed files with 85 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1497,8 +1497,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.itemsListview { .itemsListview {
margin: 0 auto !important; margin: 0 auto !important;
max-width: 1000px;
} }
.itemsListview {
background-color: transparent !important;
box-shadow: none !important;
}
.itemsListview .listItem {
border-bottom: 1px solid #303030;
padding-left: 0;
}
.itemsListview .ui-li-count { .itemsListview .ui-li-count {
right: 1em; right: 1em;
top: 70%; top: 70%;
@ -1515,6 +1526,18 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
left: 55px; left: 55px;
} }
.itemsListview .content-icon {
display: none !important;
}
.itemsListview paper-item-body {
min-height: 0 !important;
}
.itemsListview .mediaItem {
padding: 7px 0;
}
.listviewImage { .listviewImage {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -1523,27 +1546,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background-position: center center; background-position: center center;
} }
.listviewIcon { .listviewImage.small {
position: absolute; width: 70px;
left: 0; height: 70px;
top: 0; background-repeat: no-repeat;
width: 70px; background-size: cover;
height: 70px; background-position: center center;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.listViewAside {
position: absolute;
right: 0;
top: 10%;
}
.listViewAside button {
padding: 15px 10px;
margin: 0 !important;
vertical-align: middle;
} }
button.listviewMenuButton { button.listviewMenuButton {
@ -1555,71 +1563,17 @@ paper-icon-button.listviewMenuButton {
margin-left: 20px !important; margin-left: 20px !important;
} }
.ui-li-has-icon > .ui-btn { .ui-page-theme-b .listItem:hover {
padding-left: 5.25em !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.listItem h3 {
font-weight: 400;
}
.ui-li-has-icon h3 {
margin-bottom: 10px !important;
}
.listItem > .ui-btn + .ui-btn {
border: 0 !important;
width: 60px !important;
height: 90% !important;
top: 5% !important;
padding-left: 0 !important;
}
.listItem a:first-child {
margin-right: 0 !important;
background-color: transparent !important;
padding-top: 0;
padding-bottom: 0;
}
.listItem.ui-li-has-thumb .ui-btn {
padding-left: 5.9em !important;
}
.ui-page-theme-a .listItem a:first-child {
border-color: #d8d8d8 !important;
}
.ui-page-theme-b .listItem a:first-child {
border-color: #383838 !important;
}
.listItem a + a {
background-color: transparent !important;
z-index: 999;
}
.ui-page-theme-a .listItem:hover a {
background-color: #eee !important;
}
.ui-page-theme-b .listItem:hover a {
background-color: rgba(51,51,51,.6) !important; background-color: rgba(51,51,51,.6) !important;
} }
.listviewSubLink:hover {
color: #2ad;
}
.listViewUserDataButtons { .listViewUserDataButtons {
visibility: hidden; visibility: hidden;
} }
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
li:hover .listViewUserDataButtons { .listItem:hover .listViewUserDataButtons {
visibility: visible !important; visibility: visible !important;
} }
} }
@ -1631,13 +1585,6 @@ paper-icon-button.listviewMenuButton {
} }
} }
@media all and (max-width: 600px) {
.listViewAsideText {
display: none;
}
}
.tapHoldMenu li a, .playFlyout li a { .tapHoldMenu li a, .playFlyout li a {
font-size: 14px; font-size: 14px;
font-weight: 500 !important; font-weight: 500 !important;

107
dashboard-ui/scripts/librarybrowser.js
View file

@ -1043,18 +1043,16 @@
getListViewHtml: function (options) { getListViewHtml: function (options) {
require(['jqmlistview']);
var outerHtml = ""; var outerHtml = "";
outerHtml += '<ul data-role="listview" class="itemsListview">';
if (options.title) { if (options.title) {
outerHtml += '<li data-role="list-divider">'; outerHtml += '<h1>';
outerHtml += options.title; outerHtml += options.title;
outerHtml += '</li>'; outerHtml += '</h1>';
} }
outerHtml += '<div class="paperList itemsListview">';
var index = 0; var index = 0;
var groupTitle = ''; var groupTitle = '';
@ -1068,9 +1066,13 @@
if (itemGroupTitle != groupTitle) { if (itemGroupTitle != groupTitle) {
html += '<li data-role="list-divider">'; outerHtml += '</div>';
html += '<h1>';
html += itemGroupTitle; html += itemGroupTitle;
html += '</li>'; html += '</h1>';
html += '<div class="paperList itemsListview">';
groupTitle = itemGroupTitle; groupTitle = itemGroupTitle;
} }
@ -1078,19 +1080,10 @@
var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options, index); var dataAttributes = LibraryBrowser.getItemDataAttributes(item, options, index);
var cssClass = options.smallIcon ? 'ui-li-has-icon listItem' : 'ui-li-has-thumb listItem'; var cssClass = 'listItem';
var href = LibraryBrowser.getHref(item, options.context); var href = LibraryBrowser.getHref(item, options.context);
html += '<li class="' + cssClass + '"' + dataAttributes + ' data-itemid="' + item.Id + '" data-playlistitemid="' + (item.PlaylistItemId || '') + '" data-href="' + href + '" data-icon="false">'; html += '<paper-icon-item class="' + cssClass + '"' + dataAttributes + ' data-itemid="' + item.Id + '" data-playlistitemid="' + (item.PlaylistItemId || '') + '" data-href="' + href + '" data-icon="false">';
var defaultAction = options.defaultAction;
if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
if (item.PlayAccess != 'Full') {
defaultAction = null;
}
}
var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction mediaItem"') : ' class="mediaItem"';
html += '<a' + defaultActionAttribute + ' href="' + href + '">';
var imgUrl; var imgUrl;
@ -1143,15 +1136,15 @@
var minLazyIndex = 16; var minLazyIndex = 16;
if (options.smallIcon) { if (options.smallIcon) {
if (index < minLazyIndex) { if (index < minLazyIndex) {
html += '<div class="listviewIcon ui-li-icon" style="background-image:url(\'' + imgUrl + '\');"></div>'; html += '<div class="listviewImage small" style="background-image:url(\'' + imgUrl + '\');"></div>';
} else { } else {
html += '<div class="listviewIcon ui-li-icon lazy" data-src="' + imgUrl + '"></div>'; html += '<div class="listviewImage lazy small" data-src="' + imgUrl + '"></div>';
} }
} else { } else {
if (index < minLazyIndex) { if (index < minLazyIndex) {
html += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>'; html += '<div class="listviewImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
} else { } else {
html += '<div class="listviewImage ui-li-thumb lazy" data-src="' + imgUrl + '"></div>'; html += '<div class="listviewImage lazy" data-src="' + imgUrl + '"></div>';
} }
} }
} }
@ -1171,8 +1164,6 @@
} }
textlines.push(displayName); textlines.push(displayName);
var verticalTextLines = 2;
if (item.Type == 'Audio') { if (item.Type == 'Audio') {
textlines.push(item.ArtistItems.map(function (a) { textlines.push(item.ArtistItems.map(function (a) {
return a.Name; return a.Name;
@ -1200,53 +1191,57 @@
textlines.push(LibraryBrowser.getMiscInfoHtml(item)); textlines.push(LibraryBrowser.getMiscInfoHtml(item));
} }
html += '<h3>'; if (textlines.length > 2) {
html += textlines[0]; html += '<paper-item-body three-line>';
html += '</h3>'; } else {
html += '<paper-item-body two-line>';
if (textlines.length > 1 && verticalTextLines > 1) {
html += '<p>';
html += textlines[1] || '&nbsp;';
html += '</p>';
} }
if (textlines.length > 2 && verticalTextLines > 2) { var defaultAction = options.defaultAction;
html += '<p>'; if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
html += textlines[2] || '&nbsp;'; if (item.PlayAccess != 'Full') {
html += '</p>'; defaultAction = null;
}
html += LibraryBrowser.getSyncIndicator(item);
if (item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.MediaType == 'Video') {
if (item.UserData.UnplayedItemCount) {
//html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
} else if (item.UserData.Played && item.Type != 'TvChannel') {
html += '<div class="playedIndicator"><iron-icon icon="check"></iron-icon></div>';
} }
} }
html += '</a>'; var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction mediaItem clearLink"') : ' class="mediaItem clearLink"';
html += '<a' + defaultActionAttribute + ' href="' + href + '">';
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {
if (i == 0) {
html += '<div>';
} else {
html += '<div secondary>';
}
html += textlines[i] || '&nbsp;';
html += '</div>';
}
//html += LibraryBrowser.getSyncIndicator(item);
//if (item.Type == 'Series' || item.Type == 'Season' || item.Type == 'BoxSet' || item.MediaType == 'Video') {
// if (item.UserData.UnplayedItemCount) {
// //html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
// } else if (item.UserData.Played && item.Type != 'TvChannel') {
// html += '<div class="playedIndicator"><iron-icon icon="check"></iron-icon></div>';
// }
//}
html += '</a>';
html += '</paper-item-body>';
html += '<div class="listViewAside">';
html += '<span class="listViewAsideText">';
html += textlines[verticalTextLines] || LibraryBrowser.getRatingHtml(item, false);
html += '</span>';
//html += '<button type="button" data-role="none" class="listviewMenuButton imageButton listViewMoreButton" data-icon="none">';
//html += '</button>';
html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="listviewMenuButton"></paper-icon-button>'; html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="listviewMenuButton"></paper-icon-button>';
html += '<span class="listViewUserDataButtons">'; html += '<span class="listViewUserDataButtons">';
html += LibraryBrowser.getUserDataIconsHtml(item); html += LibraryBrowser.getUserDataIconsHtml(item);
html += '</span>'; html += '</span>';
html += '</div>';
html += '</li>'; html += '</paper-icon-item>';
index++; index++;
return html; return html;
}).join(''); }).join('');
outerHtml += '</ul>'; outerHtml += '</div>';
return outerHtml; return outerHtml;
}, },

12
dashboard-ui/scripts/librarylist.js
View file

@ -1124,13 +1124,6 @@
PlaylistManager.showPanel(selection); PlaylistManager.showPanel(selection);
} }
function onListviewSubLinkClick(e) {
var elem = e.target;
Dashboard.navigate(elem.getAttribute('data-href'));
return false;
}
function onItemWithActionClick(e) { function onItemWithActionClick(e) {
var elem = this; var elem = this;
@ -1155,6 +1148,7 @@
else if (action == 'playallfromhere') { else if (action == 'playallfromhere') {
index = elemWithAttributes.getAttribute('data-index'); index = elemWithAttributes.getAttribute('data-index');
itemsContainer = $(elem).parents('.itemsContainer'); itemsContainer = $(elem).parents('.itemsContainer');
playAllFromHere(index, itemsContainer, 'play'); playAllFromHere(index, itemsContainer, 'play');
@ -1166,7 +1160,7 @@
function playAllFromHere(index, itemsContainer, method) { function playAllFromHere(index, itemsContainer, method) {
var ids = $('.mediaItem', itemsContainer).get().map(function (i) { var ids = $('.mediaItem', itemsContainer).get().map(function (i) {
return i.getAttribute('data-itemid') || i.parentNode.getAttribute('data-itemid'); return i.getAttribute('data-itemid') || i.parentNode.getAttribute('data-itemid') || i.parentNode.parentNode.getAttribute('data-itemid');
}); });
ids = ids.slice(index); ids = ids.slice(index);
@ -1237,7 +1231,7 @@
toggleSelections(page); toggleSelections(page);
}).on('click', '.itemWithAction', onItemWithActionClick).on('click', '.listviewSubLink', onListviewSubLinkClick); }).on('click', '.itemWithAction', onItemWithActionClick);
var itemsContainers = page.getElementsByClassName('itemsContainer'); var itemsContainers = page.getElementsByClassName('itemsContainer');
for (var i = 0, length = itemsContainers.length; i < length; i++) { for (var i = 0, length = itemsContainers.length; i < length; i++) {