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

update listviews

This commit is contained in:
Luke Pulverenti 2016-07-16 01:05:40 -04:00
parent 3197c48232
commit 1032fa887e
54 changed files with 2271 additions and 376 deletions

View file

@ -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;
}
}

View file

@ -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] || '&nbsp;';
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">&#xE5D4;</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 {