mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update listviews
This commit is contained in:
parent
3197c48232
commit
1032fa887e
54 changed files with 2271 additions and 376 deletions
|
@ -12,26 +12,31 @@ button.listItem {
|
|||
}
|
||||
|
||||
.listItem {
|
||||
margin: 0;
|
||||
display: block;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 0 1em !important;
|
||||
padding: .25em .5em .25em 1em !important;
|
||||
line-height: 170%;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.listItem.largeImage {
|
||||
padding: 1em 0 1em 1em;
|
||||
}
|
||||
div.listItem {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.listItem > *:not(.listItemBody) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.listItem.largeImage {
|
||||
padding: 1em 0 1em 1em;
|
||||
}
|
||||
|
||||
.listItem > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.listItem > *:not(.listItemBody) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.listItem > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.listItemBody {
|
||||
flex-grow: 1;
|
||||
|
@ -56,9 +61,8 @@ button.listItem {
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.listItemBody h3 {
|
||||
.listItemBody h2, .listItemBody h3 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -80,6 +84,8 @@ button.listItem {
|
|||
.listItemImage {
|
||||
width: 7.4vh;
|
||||
height: 7.4vh;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
|
@ -140,8 +146,20 @@ button.listItem {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.listItemMediaInfo > * {
|
||||
display: inline-block;
|
||||
.layout-tv .listItemMediaInfo {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.listItemMediaInfo > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.listGroupHeader {
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
.listGroupHeader.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@supports (display: flex) {
|
||||
|
@ -150,3 +168,10 @@ button.listItem {
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.listItem .endsAt, .listItem .criticRating {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'userdataButtons', 'css!./listview'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, userdataButtons) {
|
||||
define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutManager', 'globalize', 'userdataButtons', 'css!./listview'], function (itemHelper, mediaInfo, indicators, connectionManager, layoutManager, globalize, userdataButtons) {
|
||||
|
||||
function getIndex(item, options) {
|
||||
|
||||
if (options.index == 'disc') {
|
||||
|
||||
return item.ParentIndexNumber == null ? '' : Globalize.translate('sharedcomponents#ValueDiscNumber', item.ParentIndexNumber);
|
||||
return item.ParentIndexNumber == null ? '' : globalize.translate('sharedcomponents#ValueDiscNumber', item.ParentIndexNumber);
|
||||
}
|
||||
|
||||
var sortBy = (options.sortBy || '').toLowerCase();
|
||||
|
@ -122,32 +122,36 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
var clickEntireItem = layoutManager.tv ? true : false;
|
||||
var outerTagName = clickEntireItem ? 'button' : 'div';
|
||||
|
||||
return items.map(function (item) {
|
||||
var outerHtml = '';
|
||||
|
||||
outerHtml += items.map(function (item) {
|
||||
|
||||
var html = '';
|
||||
|
||||
//if (options.showIndex !== false) {
|
||||
if (options.showIndex) {
|
||||
|
||||
// var itemGroupTitle = LibraryBrowser.getListViewIndex(item, options);
|
||||
var itemGroupTitle = getIndex(item, options);
|
||||
|
||||
// if (itemGroupTitle != groupTitle) {
|
||||
if (itemGroupTitle != groupTitle) {
|
||||
|
||||
// outerHtml += '</div>';
|
||||
if (html) {
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// if (index == 0) {
|
||||
// html += '<h1>';
|
||||
// }
|
||||
// else {
|
||||
// html += '<h1 style="margin-top:2em;">';
|
||||
// }
|
||||
// html += itemGroupTitle;
|
||||
// html += '</h1>';
|
||||
if (index == 0) {
|
||||
html += '<h1 class="listGroupHeader first">';
|
||||
}
|
||||
else {
|
||||
html += '<h1 class="listGroupHeader">';
|
||||
}
|
||||
html += itemGroupTitle;
|
||||
html += '</h1>';
|
||||
|
||||
// html += '<div class="paperList itemsListview">';
|
||||
html += '<div>';
|
||||
|
||||
// groupTitle = itemGroupTitle;
|
||||
// }
|
||||
//}
|
||||
groupTitle = itemGroupTitle;
|
||||
}
|
||||
}
|
||||
|
||||
var cssClass = "itemAction listItem";
|
||||
|
||||
|
@ -165,7 +169,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
if (imgUrl) {
|
||||
html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon>';
|
||||
} else {
|
||||
html += '<div class="listItemImage" item-icon>';
|
||||
html += '<div class="listItemImage">';
|
||||
}
|
||||
|
||||
var indicatorsHtml = '';
|
||||
|
@ -219,16 +223,18 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {
|
||||
|
||||
if (i == 0 && isLargeStyle) {
|
||||
html += '<h2 class="listItemTitle">';
|
||||
html += '<h2>';
|
||||
}
|
||||
else if (i == 0) {
|
||||
html += '<div>';
|
||||
html += '<h3>';
|
||||
} else {
|
||||
html += '<div class="secondary">';
|
||||
}
|
||||
html += textlines[i] || ' ';
|
||||
if (i == 0 && isLargeStyle) {
|
||||
html += '</h2>';
|
||||
} else if (i == 0) {
|
||||
html += '</h3>';
|
||||
} else {
|
||||
html += '</div>';
|
||||
}
|
||||
|
@ -249,7 +255,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
if (!clickEntireItem) {
|
||||
html += '<button is="paper-icon-button-light" class="listviewMenuButton autoSize"><i class="md-icon"></i></button>';
|
||||
html += '<span class="listViewUserDataButtons">';
|
||||
html += userdataButtons.getIconsHtml(item);
|
||||
html += userdataButtons.getIconsHtml(item, false);
|
||||
html += '</span>';
|
||||
}
|
||||
|
||||
|
@ -263,6 +269,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
|||
return html;
|
||||
|
||||
}).join('');
|
||||
|
||||
return outerHtml;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue