update components

This commit is contained in:
Luke Pulverenti 2016-08-08 14:13:52 -04:00
parent f9240e5fb5
commit b1feee2d1c
17 changed files with 39 additions and 54 deletions

View File

@ -172,6 +172,7 @@ button.card {
position: relative; position: relative;
background-clip: content-box !important; background-clip: content-box !important;
border-radius: 2px; border-radius: 2px;
color: #fff;
} }
.visualCardBox .cardImageContainer { .visualCardBox .cardImageContainer {
@ -259,6 +260,7 @@ button.cardImageContainer {
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
max-width: 100%; max-width: 100%;
color: #fff;
} }
.innerCardFooterClear { .innerCardFooterClear {
@ -274,16 +276,9 @@ button.cardImageContainer {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.cardText {
color: inherit; color: inherit;
} }
.innerCardFooter .cardText, .cardImageContainer .cardText {
color: #fff;
}
.cardTextCentered { .cardTextCentered {
text-align: center; text-align: center;
} }
@ -310,7 +305,7 @@ button.cardImageContainer {
color: #fff; color: #fff;
} }
.card .indicators { .cardIndicators {
right: 2.5%; right: 2.5%;
top: 2.5%; top: 2.5%;
position: absolute; position: absolute;
@ -318,12 +313,12 @@ button.cardImageContainer {
align-items: center; align-items: center;
} }
.portraitCard .indicators { .portraitCardIndicators {
right: 3%; right: 3%;
top: 2%; top: 2%;
} }
.backdropCard .indicators { .backdropCardIndicators {
right: 1.5%; right: 1.5%;
top: 2.8%; top: 2.8%;
} }

View File

@ -1102,7 +1102,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
} }
if (indicatorsHtml) { if (indicatorsHtml) {
cardImageContainerOpen += '<div class="indicators">' + indicatorsHtml + '</div>'; cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
} }
var forceName = imgInfo.forceName; var forceName = imgInfo.forceName;

View File

@ -12,12 +12,15 @@
text-align: left; text-align: left;
padding: .25em 1.15em; padding: .25em 1.15em;
line-height: 160%; line-height: 160%;
border-bottom: 1px solid #2a2a2a;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.listItem-border {
border-bottom: 1px solid #2a2a2a;
}
.listItem-button { .listItem-button {
width: 100%; width: 100%;
} }
@ -131,11 +134,11 @@
color: inherit !important; color: inherit !important;
} }
.layout-tv .listItem { .listItem-focusscale {
transition: transform .2s ease-out; transition: transform .2s ease-out;
} }
.layout-tv .listItem:focus { .listItem-focusscale:focus {
transform: scale(1.025, 1.025); transform: scale(1.025, 1.025);
} }
@ -150,11 +153,7 @@
background-color: transparent !important; background-color: transparent !important;
} }
.paperList .listItem { .listItemMediaInfo-padded {
border-bottom: 0;
}
.layout-tv .listItemMediaInfo {
margin: .5em 0; margin: .5em 0;
} }

View File

@ -178,12 +178,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = "listItem listItem-nosidepadding"; var cssClass = "listItem listItem-nosidepadding listItem-border";
if (clickEntireItem) { if (clickEntireItem) {
cssClass += ' itemAction listItem-button'; cssClass += ' itemAction listItem-button';
} }
if (layoutManager.tv) {
cssClass += ' listItem-focusscale';
}
var downloadWidth = 80; var downloadWidth = 80;
if (isLargeStyle) { if (isLargeStyle) {
@ -281,7 +285,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += getTextLinesHtml(textlines, isLargeStyle); html += getTextLinesHtml(textlines, isLargeStyle);
if (!enableSideMediaInfo) { if (!enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo listItemBodyText">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
if (layoutManager.tv) {
mediaInfoClass += ' listItemMediaInfo-padded';
}
html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
} }
if (enableOverview && item.Overview) { if (enableOverview && item.Overview) {

View File

@ -117,7 +117,9 @@
var itemHtml = ''; var itemHtml = '';
var tagName = layoutManager.tv ? 'button' : 'div'; var tagName = layoutManager.tv ? 'button' : 'div';
var className = layoutManager.tv && s.Path ? 'listItem btnDelete' : 'listItem'; var className = layoutManager.tv && s.Path ? 'listItem listItem-focusscale btnDelete' : 'listItem';
className += ' listItem-noborder';
itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">'; itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';

View File

@ -233,7 +233,6 @@
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor');
dlg.classList.add('directoryPicker'); dlg.classList.add('directoryPicker');

View File

@ -308,7 +308,6 @@
dlg.classList.add('ui-body-' + theme); dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme); dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; html += '<h2 class="dialogHeader">';

View File

@ -283,7 +283,6 @@
dlg.classList.add('ui-body-' + theme); dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme); dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; html += '<h2 class="dialogHeader">';

View File

@ -145,7 +145,6 @@
dlg.classList.add('ui-body-' + theme); dlg.classList.add('ui-body-' + theme);
dlg.classList.add('background-theme-' + theme); dlg.classList.add('background-theme-' + theme);
dlg.classList.add('popupEditor');
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; html += '<h2 class="dialogHeader">';

View File

@ -92,7 +92,7 @@
function onAddButtonClick() { function onAddButtonClick() {
var page = $(this).parents('.popupEditor')[0]; var page = $(this).parents('.dlg-librarycreator')[0];
require(['directorybrowser'], function (directoryBrowser) { require(['directorybrowser'], function (directoryBrowser) {
@ -168,7 +168,7 @@
return p.toLowerCase() != location.toLowerCase(); return p.toLowerCase() != location.toLowerCase();
}); });
var page = $(this).parents('.popupEditor')[0]; var page = $(this).parents('.dlg-librarycreator')[0];
renderPaths(page); renderPaths(page);
} }
@ -207,7 +207,7 @@
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor'); dlg.classList.add('dlg-librarycreator');
dlg.innerHTML = Globalize.translateDocument(template); dlg.innerHTML = Globalize.translateDocument(template);
document.body.appendChild(dlg); document.body.appendChild(dlg);

View File

@ -161,7 +161,6 @@
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor');
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; html += '<h2 class="dialogHeader">';

View File

@ -6,7 +6,7 @@
<div> <div>
<a href="#" class="clearLink lnkDisplayPreferences"> <a href="#" class="clearLink lnkDisplayPreferences">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">tv</i></button> <button type="button" is="emby-button" class="fab mini autoSize blue listItemButton" item-icon><i class="md-icon">tv</i></button>
<div class="listItemBody two-line"> <div class="listItemBody two-line">
<div>${ButtonDisplaySettings}</div> <div>${ButtonDisplaySettings}</div>
<div class="secondary">${ButtonDisplaySettingsHelp}</div> <div class="secondary">${ButtonDisplaySettingsHelp}</div>
@ -16,7 +16,7 @@
<a href="#" class="clearLink lnkHomeScreenPreferences"> <a href="#" class="clearLink lnkHomeScreenPreferences">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize red" item-icon><i class="md-icon">home</i></button> <button type="button" is="emby-button" class="fab mini autoSize red listItemButton" item-icon><i class="md-icon">home</i></button>
<div class="listItemBody two-line"> <div class="listItemBody two-line">
<div>${ButtonHomeScreenSettings}</div> <div>${ButtonHomeScreenSettings}</div>
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div> <div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
@ -26,7 +26,7 @@
<a href="#" class="clearLink lnkLanguagePreferences"> <a href="#" class="clearLink lnkLanguagePreferences">
<div class="listItem"> <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> <button type="button" is="emby-button" class="fab mini autoSize green listItemButton" item-icon><i class="md-icon">play_circle_filled</i></button>
<div class="listItemBody two-line"> <div class="listItemBody two-line">
<div>${ButtonPlaybackSettings}</div> <div>${ButtonPlaybackSettings}</div>
<div class="secondary">${ButtonPlaybackSettingsHelp}</div> <div class="secondary">${ButtonPlaybackSettingsHelp}</div>
@ -36,7 +36,7 @@
<a href="#" class="clearLink lnkMyProfile"> <a href="#" class="clearLink lnkMyProfile">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize orange" item-icon><i class="md-icon">person</i></button> <button type="button" is="emby-button" class="fab mini autoSize orange listItemButton" item-icon><i class="md-icon">person</i></button>
<div class="listItemBody two-line"> <div class="listItemBody two-line">
<div>${ButtonProfile}</div> <div>${ButtonProfile}</div>
<div class="secondary">${ButtonProfileHelp}</div> <div class="secondary">${ButtonProfileHelp}</div>
@ -46,7 +46,7 @@
<a href="#" class="clearLink lnkSync hide"> <a href="#" class="clearLink lnkSync hide">
<div class="listItem"> <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> <button type="button" is="emby-button" class="fab mini autoSize listItemButton" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
<div class="listItemBody two-line"> <div class="listItemBody two-line">
<div>${ButtonSyncSettings}</div> <div>${ButtonSyncSettings}</div>
<div class="secondary">${ButtonSyncSettingsHelp}</div> <div class="secondary">${ButtonSyncSettingsHelp}</div>

View File

@ -151,7 +151,7 @@
var itemHtml = ''; var itemHtml = '';
itemHtml += '<a class="clearLink" href="' + item.Link + '" target="_blank">'; itemHtml += '<a class="clearLink" href="' + item.Link + '" target="_blank">';
itemHtml += '<div class="listItem">'; itemHtml += '<div class="listItem listItem-noborder">';
itemHtml += '<i class="listItemIcon md-icon">dvr</i>'; itemHtml += '<i class="listItemIcon md-icon">dvr</i>';
@ -1034,7 +1034,7 @@
var html = ''; var html = '';
html += '<div class="listItem">'; html += '<div class="listItem listItem-noborder">';
var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : '#52B54B'; var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : '#52B54B';

View File

@ -99,7 +99,6 @@
dlg.classList.add('ui-body-b'); dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b'); dlg.classList.add('background-theme-b');
dlg.classList.add('popupEditor');
var html = ''; var html = '';
html += '<h2 class="dialogHeader">'; html += '<h2 class="dialogHeader">';

View File

@ -265,10 +265,6 @@
name: Globalize.translate('OptionParentalRating'), name: Globalize.translate('OptionParentalRating'),
id: 'OfficialRating,SortName' id: 'OfficialRating,SortName'
}, },
{
name: Globalize.translate('OptionPlayCount'),
id: 'PlayCount,SortName'
},
{ {
name: Globalize.translate('OptionReleaseDate'), name: Globalize.translate('OptionReleaseDate'),
id: 'PremiereDate,SortName' id: 'PremiereDate,SortName'

View File

@ -122,7 +122,7 @@
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">'; html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">';
if (user.ConnectUserId && addConnectIndicator) { if (user.ConnectUserId && addConnectIndicator) {
html += '<div class="indicators">'; html += '<div class="cardIndicators">';
html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="md-icon playedIndicatorIcon indicatorIcon">cloud</i></div>'; html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="md-icon playedIndicatorIcon indicatorIcon">cloud</i></div>';
html += "</div>"; html += "</div>";
} }

View File

@ -176,22 +176,11 @@ div.dialogHeader {
margin-left: .75em; margin-left: .75em;
} }
.dialog.popupEditor h2.dialogHeader {
font-weight: inherit !important;
line-height: 36px;
padding: 0 1em;
margin-top: .7em;
}
.formDialogHeader button { .formDialogHeader button {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.dialog.popupEditor {
padding-bottom: 100px;
}
.formDialog.background-theme-b { .formDialog.background-theme-b {
background-color: #181818; background-color: #181818;
} }