update list styles

This commit is contained in:
Luke Pulverenti 2016-06-27 00:19:10 -04:00
parent 559d8eb5f6
commit 2b483db762
21 changed files with 82 additions and 111 deletions

View File

@ -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",

View File

@ -91,6 +91,7 @@
if (userAgent.toLowerCase().indexOf("playstation 4") != -1) {
browser.ps4 = true;
browser.tv = true;
}
if (isMobile.any) {

View File

@ -172,7 +172,6 @@ define(['browser'], function (browser) {
if (browser.tizen) {
return 10000000;
// 2015 models
if (userAgent.indexOf('tizen 2.3') != -1) {
return 20000000;

View File

@ -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 {

View File

@ -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 + '">';

View File

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

View File

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

View File

@ -39,6 +39,6 @@
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0",
"_target": "^1.0.0",
"_originalSource": "Polymer/polymer"
}

View File

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

View File

@ -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');

View File

@ -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 {

View File

@ -219,7 +219,7 @@
}
.viewMenuBar, .libraryViewNav {
background-color: #2a2a2a;
background-color: #2b2b2b;
color: #fff;
}

View File

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

View File

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

View File

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

View File

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

View File

@ -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] || '&nbsp;';
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;

View File

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

View File

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

View File

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

View File

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