mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update list styles
This commit is contained in:
parent
559d8eb5f6
commit
2b483db762
@ -15,12 +15,12 @@
|
||||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.58",
|
||||
"_release": "1.4.58",
|
||||
"version": "1.4.59",
|
||||
"_release": "1.4.59",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.58",
|
||||
"commit": "2bbc190d69ad89110a7b83eec624fbd44df9b17c"
|
||||
"tag": "1.4.59",
|
||||
"commit": "7e348b4fcb9c8728789b0b54f465eaa4a32a5e69"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
@ -91,6 +91,7 @@
|
||||
|
||||
if (userAgent.toLowerCase().indexOf("playstation 4") != -1) {
|
||||
browser.ps4 = true;
|
||||
browser.tv = true;
|
||||
}
|
||||
|
||||
if (isMobile.any) {
|
||||
|
@ -172,7 +172,6 @@ define(['browser'], function (browser) {
|
||||
|
||||
if (browser.tizen) {
|
||||
|
||||
return 10000000;
|
||||
// 2015 models
|
||||
if (userAgent.indexOf('tizen 2.3') != -1) {
|
||||
return 20000000;
|
||||
|
@ -14,7 +14,8 @@ button.listItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: .25em 1.25em !important;
|
||||
padding: 0 1em !important;
|
||||
line-height: 170%;
|
||||
}
|
||||
|
||||
.listItem.largeImage {
|
||||
@ -27,15 +28,32 @@ button.listItem {
|
||||
|
||||
.listItemBody {
|
||||
flex-grow: 1;
|
||||
padding: .85em 1.25em;
|
||||
padding: 0 1.15em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.listItemBody.two-line {
|
||||
min-height: 72px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.listItemBody.three-line {
|
||||
min-height: 88px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.listItemBody h3 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
padding: .25em 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -44,6 +62,10 @@ button.listItem {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.listItemBody > div:not(.secondary) {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
.listItemBodyText {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -55,6 +77,7 @@ button.listItem {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
margin-left: -.9em;
|
||||
}
|
||||
|
||||
.listItemIcon {
|
||||
|
@ -123,7 +123,7 @@
|
||||
|
||||
itemHtml += '<i class="listItemIcon md-icon">closed_caption</i>';
|
||||
|
||||
itemHtml += '<div class="listItemBody">';
|
||||
itemHtml += '<div class="listItemBody two-line">';
|
||||
|
||||
itemHtml += '<h3 class="listItemBodyText">';
|
||||
itemHtml += s.DisplayTitle || '';
|
||||
@ -237,7 +237,7 @@
|
||||
|
||||
html += '<i class="listItemIcon md-icon">closed_caption</i>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
|
||||
//html += '<a class="btnViewSubtitle" href="#" data-subid="' + result.Id + '">';
|
||||
|
||||
|
@ -28,14 +28,14 @@
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
|
||||
"homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-resizable-behavior"
|
||||
"_originalSource": "PolymerElements/iron-resizable-behavior"
|
||||
}
|
@ -36,7 +36,7 @@
|
||||
"tag": "v1.5.2",
|
||||
"commit": "18e8e12dcd9a4560de480562f65935feed334b86"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-selector.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-selector.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-selector"
|
||||
"_originalSource": "PolymerElements/iron-selector"
|
||||
}
|
@ -39,6 +39,6 @@
|
||||
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.1.0",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
@ -97,7 +97,7 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
|
||||
|
||||
html += '<button is="emby-button" type="button" class="fab autoSize mini" style="background:#52B54B;"><i class="md-icon listItemIcon">dvr</i></button>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
html += '<h3>';
|
||||
html += channel.Name;
|
||||
html += '</h3>';
|
||||
|
@ -435,7 +435,7 @@
|
||||
|
||||
var item = itemsContainer.querySelectorAll('.listItem')[index];
|
||||
if (item) {
|
||||
var img = item.querySelector('.listviewImage');
|
||||
var img = item.querySelector('.listItemImage');
|
||||
|
||||
img.classList.remove('lazy');
|
||||
img.classList.add('playlistIndexIndicatorImage');
|
||||
|
@ -1019,7 +1019,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
|
||||
.itemsContainer {
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.alphabetPicker {
|
||||
@ -1174,21 +1173,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
.itemsListview {
|
||||
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;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.itemsListview .listviewMenuButton {
|
||||
margin-right: 0 !important;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.itemsListview .ui-li-count {
|
||||
@ -1207,50 +1197,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||
left: 55px;
|
||||
}
|
||||
|
||||
.itemsListview .content-icon {
|
||||
width: auto !important;
|
||||
padding-right: .7em;
|
||||
}
|
||||
|
||||
.itemsListview.paperList {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.itemsListview paper-item-body {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.itemsListview .mediaItem {
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
.listviewImage {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.listviewImage.small {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.listViewUserDataButtons {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.listItem:hover .listViewUserDataButtons {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
|
||||
.listViewUserDataButtons {
|
||||
|
@ -219,7 +219,7 @@
|
||||
}
|
||||
|
||||
.viewMenuBar, .libraryViewNav {
|
||||
background-color: #2a2a2a;
|
||||
background-color: #2b2b2b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
@ -59,7 +59,7 @@
|
||||
/* Above everything, except for the video player and popup overlays */
|
||||
z-index: 1097;
|
||||
color: #fff;
|
||||
background-color: #2a2a2a;
|
||||
background-color: #2b2b2b;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -131,7 +131,7 @@
|
||||
<div class="paperList" id="criticRatingSummary">
|
||||
<div class="listItem">
|
||||
<button is="emby-button" type="button" class="mini fab" style="background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(css/images/fresh.png);" item-icon></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody three-line">
|
||||
<div>TOMATOMETER®</div>
|
||||
<div class="criticRatingScore"></div>
|
||||
<div class="criticRatingSummaryText secondary" style="white-space: normal;"></div>
|
||||
|
@ -7,7 +7,7 @@
|
||||
<a href="#" class="clearLink lnkDisplayPreferences">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">tv</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonDisplaySettings}</div>
|
||||
<div class="secondary">${ButtonDisplaySettingsHelp}</div>
|
||||
</div>
|
||||
@ -17,7 +17,7 @@
|
||||
<a href="#" class="clearLink lnkHomeScreenPreferences">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize red" item-icon><i class="md-icon">home</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonHomeScreenSettings}</div>
|
||||
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
|
||||
</div>
|
||||
@ -27,7 +27,7 @@
|
||||
<a href="#" class="clearLink lnkLanguagePreferences">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize green" item-icon><i class="md-icon">play_circle_filled</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonPlaybackSettings}</div>
|
||||
<div class="secondary">${ButtonPlaybackSettingsHelp}</div>
|
||||
</div>
|
||||
@ -37,7 +37,7 @@
|
||||
<a href="#" class="clearLink lnkMyProfile">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize orange" item-icon><i class="md-icon">person</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonProfile}</div>
|
||||
<div class="secondary">${ButtonProfileHelp}</div>
|
||||
</div>
|
||||
@ -47,7 +47,7 @@
|
||||
<a href="#" class="clearLink lnkSync hide">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonSyncSettings}</div>
|
||||
<div class="secondary">${ButtonSyncSettingsHelp}</div>
|
||||
</div>
|
||||
@ -61,14 +61,14 @@
|
||||
<a href="selectserver.html" class="clearLink selectServer hide">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">wifi</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${HeaderSelectServer}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="listItem btnLogout">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">lock</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonSignOut}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -82,7 +82,7 @@
|
||||
<a href="dashboard.html" class="clearLink">
|
||||
<div class="listItem">
|
||||
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">settings</i></button>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBody two-line">
|
||||
<div>${ButtonServerDashboard}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -389,9 +389,9 @@
|
||||
}
|
||||
|
||||
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0 || item.Type == "Series") {
|
||||
page.querySelector('#scenesCollapsible').classList.add('hide');
|
||||
page.querySelector('#specialsCollapsible').classList.add('hide');
|
||||
} else {
|
||||
page.querySelector('#scenesCollapsible').classList.remove('hide');
|
||||
page.querySelector('#specialsCollapsible').classList.remove('hide');
|
||||
renderSpecials(page, item, user, 6);
|
||||
}
|
||||
if (!item.People || !item.People.length) {
|
||||
@ -1234,7 +1234,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
|
||||
html += '<div style="white-space:normal;">' + review.Caption + '</div>';
|
||||
|
||||
|
@ -1229,7 +1229,7 @@
|
||||
|
||||
getListViewHtml: function (options) {
|
||||
|
||||
require(['paper-icon-item', 'paper-item-body', 'material-icons']);
|
||||
require(['listViewStyle', 'material-icons']);
|
||||
|
||||
var outerHtml = "";
|
||||
|
||||
@ -1276,7 +1276,7 @@
|
||||
var cssClass = 'listItem';
|
||||
|
||||
var href = LibraryBrowser.getHref(item, options.context);
|
||||
html += '<paper-icon-item class="' + cssClass + '"' + dataAttributes + ' data-itemid="' + item.Id + '" data-playlistitemid="' + (item.PlaylistItemId || '') + '" data-href="' + href + '" data-icon="false">';
|
||||
html += '<div class="' + cssClass + '"' + dataAttributes + ' data-itemid="' + item.Id + '" data-playlistitemid="' + (item.PlaylistItemId || '') + '" data-href="' + href + '" data-icon="false">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
@ -1327,15 +1327,15 @@
|
||||
|
||||
if (imgUrl) {
|
||||
if (options.smallIcon) {
|
||||
html += '<div class="listviewImage lazy small" data-src="' + imgUrl + '" item-icon></div>';
|
||||
html += '<div class="listItemImage lazy small" data-src="' + imgUrl + '" item-icon></div>';
|
||||
} else {
|
||||
html += '<div class="listviewImage lazy" data-src="' + imgUrl + '" item-icon></div>';
|
||||
html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon></div>';
|
||||
}
|
||||
} else {
|
||||
if (options.smallIcon) {
|
||||
html += '<div class="listviewImage small" item-icon></div>';
|
||||
html += '<div class="listItemImage small" item-icon></div>';
|
||||
} else {
|
||||
html += '<div class="listviewImage" item-icon></div>';
|
||||
html += '<div class="listItemImage" item-icon></div>';
|
||||
}
|
||||
}
|
||||
|
||||
@ -1383,19 +1383,20 @@
|
||||
}) + '</div>');
|
||||
}
|
||||
|
||||
if (textlines.length > 2) {
|
||||
html += '<paper-item-body three-line>';
|
||||
} else {
|
||||
html += '<paper-item-body two-line>';
|
||||
}
|
||||
|
||||
var defaultAction = options.defaultAction;
|
||||
if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
|
||||
if (item.PlayAccess != 'Full') {
|
||||
defaultAction = null;
|
||||
}
|
||||
}
|
||||
var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction mediaItem clearLink"') : ' class="mediaItem clearLink"';
|
||||
|
||||
var bodyCssClass = 'mediaItem clearLink listItemBody';
|
||||
if (textlines.length > 2) {
|
||||
bodyCssClass += ' three-line';
|
||||
} else {
|
||||
bodyCssClass += ' two-line';
|
||||
}
|
||||
var defaultActionAttribute = defaultAction ? (' data-action="' + defaultAction + '" class="itemWithAction ' + bodyCssClass + '"') : ' class="' + bodyCssClass + '"';
|
||||
html += '<a' + defaultActionAttribute + ' href="' + href + '">';
|
||||
|
||||
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {
|
||||
@ -1403,21 +1404,20 @@
|
||||
if (i == 0) {
|
||||
html += '<div>';
|
||||
} else {
|
||||
html += '<div secondary>';
|
||||
html += '<div class="secondary">';
|
||||
}
|
||||
html += textlines[i] || ' ';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</a>';
|
||||
html += '</paper-item-body>';
|
||||
|
||||
html += '<button is="paper-icon-button-light" class="listviewMenuButton autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
|
||||
html += '<span class="listViewUserDataButtons">';
|
||||
html += LibraryBrowser.getUserDataIconsHtml(item);
|
||||
html += '</span>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
html += '</div>';
|
||||
|
||||
index++;
|
||||
return html;
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
html += '<a href="livetvrecordinglist.html?groupid=' + group.Id + '" class="clearLink">';
|
||||
|
||||
html += '<div>';
|
||||
|
@ -42,7 +42,7 @@
|
||||
|
||||
html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
|
||||
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<div class="listItemBody three-line">';
|
||||
html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
|
||||
html += '<h3>';
|
||||
html += timer.Name;
|
||||
|
@ -76,7 +76,7 @@
|
||||
elem.innerHTML = html;
|
||||
|
||||
var listItems = [];
|
||||
var elems = elem.querySelectorAll('PAPER-ICON-ITEM');
|
||||
var elems = elem.querySelectorAll('.listItem');
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
listItems.push(elems[i]);
|
||||
}
|
||||
|
@ -319,14 +319,16 @@ var Dashboard = {
|
||||
|
||||
var parentElem = footer.querySelector('#footerNotifications');
|
||||
|
||||
var elem = parentElem.querySelector('#' + options.id);
|
||||
var notificationElementId = 'notification' + options.id;
|
||||
|
||||
if (!elem.length) {
|
||||
parentElem.insertAdjacentHTML('beforeend', '<p id="' + options.id + '" class="footerNotification"></p>');
|
||||
elem = parentElem.querySelector('#' + options.id);
|
||||
var elem = parentElem.querySelector('#' + notificationElementId);
|
||||
|
||||
if (!elem) {
|
||||
parentElem.insertAdjacentHTML('beforeend', '<p id="' + notificationElementId + '" class="footerNotification"></p>');
|
||||
elem = parentElem.querySelector('#' + notificationElementId);
|
||||
}
|
||||
|
||||
var onclick = removeOnHide ? "jQuery(\"#" + options.id + "\").trigger(\"notification.remove\").remove();" : "jQuery(\"#" + options.id + "\").trigger(\"notification.hide\").hide();";
|
||||
var onclick = removeOnHide ? "jQuery('#" + notificationElementId + "').trigger('notification.remove').remove();" : "jQuery('#" + notificationElementId + "').trigger('notification.hide').hide();";
|
||||
|
||||
if (options.allowHide !== false) {
|
||||
options.html += '<span style="margin-left: 1em;"><button is="emby-button" type="button" class="submit" onclick="' + onclick + '">' + Globalize.translate('ButtonHide') + "</button></span>";
|
||||
|
Loading…
Reference in New Issue
Block a user