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

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": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.58", "version": "1.4.59",
"_release": "1.4.58", "_release": "1.4.59",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.58", "tag": "1.4.59",
"commit": "2bbc190d69ad89110a7b83eec624fbd44df9b17c" "commit": "7e348b4fcb9c8728789b0b54f465eaa4a32a5e69"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0", "_target": "^1.2.0",

View file

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

View file

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

View file

@ -14,7 +14,8 @@ button.listItem {
display: flex; display: flex;
align-items: center; align-items: center;
text-align: left; text-align: left;
padding: .25em 1.25em !important; padding: 0 1em !important;
line-height: 170%;
} }
.listItem.largeImage { .listItem.largeImage {
@ -27,15 +28,32 @@ button.listItem {
.listItemBody { .listItemBody {
flex-grow: 1; flex-grow: 1;
padding: .85em 1.25em; padding: 0 1.15em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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 { .listItemBody h3 {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
padding: .25em 0; padding: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -44,6 +62,10 @@ button.listItem {
padding: 0; padding: 0;
} }
.listItemBody > div:not(.secondary) {
font-size: 115%;
}
.listItemBodyText { .listItemBodyText {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -55,6 +77,7 @@ button.listItem {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
flex-shrink: 0; flex-shrink: 0;
margin-left: -.9em;
} }
.listItemIcon { .listItemIcon {

View file

@ -123,7 +123,7 @@
itemHtml += '<i class="listItemIcon md-icon">closed_caption</i>'; itemHtml += '<i class="listItemIcon md-icon">closed_caption</i>';
itemHtml += '<div class="listItemBody">'; itemHtml += '<div class="listItemBody two-line">';
itemHtml += '<h3 class="listItemBodyText">'; itemHtml += '<h3 class="listItemBodyText">';
itemHtml += s.DisplayTitle || ''; itemHtml += s.DisplayTitle || '';
@ -237,7 +237,7 @@
html += '<i class="listItemIcon md-icon">closed_caption</i>'; 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 + '">'; //html += '<a class="btnViewSubtitle" href="#" data-subid="' + result.Id + '">';

View file

@ -28,14 +28,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/iron-resizable-behavior", "homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
"_release": "1.0.3", "_release": "1.0.3",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.3", "tag": "v1.0.3",
"commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216" "commit": "dda1df6aaf452aedf3e52ff0cf69e72439452216"
}, },
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git", "_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-resizable-behavior" "_originalSource": "PolymerElements/iron-resizable-behavior"
} }

View file

@ -36,7 +36,7 @@
"tag": "v1.5.2", "tag": "v1.5.2",
"commit": "18e8e12dcd9a4560de480562f65935feed334b86" "commit": "18e8e12dcd9a4560de480562f65935feed334b86"
}, },
"_source": "git://github.com/polymerelements/iron-selector.git", "_source": "git://github.com/PolymerElements/iron-selector.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-selector" "_originalSource": "PolymerElements/iron-selector"
} }

View file

@ -39,6 +39,6 @@
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a" "commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
}, },
"_source": "git://github.com/Polymer/polymer.git", "_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0", "_target": "^1.0.0",
"_originalSource": "Polymer/polymer" "_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 += '<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 += '<h3>';
html += channel.Name; html += channel.Name;
html += '</h3>'; html += '</h3>';

View file

@ -435,7 +435,7 @@
var item = itemsContainer.querySelectorAll('.listItem')[index]; var item = itemsContainer.querySelectorAll('.listItem')[index];
if (item) { if (item) {
var img = item.querySelector('.listviewImage'); var img = item.querySelector('.listItemImage');
img.classList.remove('lazy'); img.classList.remove('lazy');
img.classList.add('playlistIndexIndicatorImage'); img.classList.add('playlistIndexIndicatorImage');

View file

@ -1019,7 +1019,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.itemsContainer { .itemsContainer {
margin: 0 auto; margin: 0 auto;
line-height: 0;
} }
.alphabetPicker { .alphabetPicker {
@ -1174,21 +1173,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.itemsListview { .itemsListview {
margin: 0 auto !important; margin: 0 auto !important;
max-width: 1000px; max-width: 1000px;
}
.itemsListview {
background-color: transparent !important; background-color: transparent !important;
box-shadow: none !important; box-shadow: none !important;
} }
.itemsListview .listItem { .itemsListview .listItem {
border-bottom: 1px solid #303030; border-bottom: 1px solid #2a2a2a;
padding-left: 0;
padding-right: 0;
}
.itemsListview .listviewMenuButton {
margin-right: 0 !important;
} }
.itemsListview .ui-li-count { .itemsListview .ui-li-count {
@ -1207,50 +1197,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
left: 55px; 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) { @media all and (max-width: 1200px) {
.listViewUserDataButtons { .listViewUserDataButtons {

View file

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

View file

@ -59,7 +59,7 @@
/* Above everything, except for the video player and popup overlays */ /* Above everything, except for the video player and popup overlays */
z-index: 1097; z-index: 1097;
color: #fff; color: #fff;
background-color: #2a2a2a; background-color: #2b2b2b;
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View file

@ -131,7 +131,7 @@
<div class="paperList" id="criticRatingSummary"> <div class="paperList" id="criticRatingSummary">
<div class="listItem"> <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> <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>TOMATOMETER®</div>
<div class="criticRatingScore"></div> <div class="criticRatingScore"></div>
<div class="criticRatingSummaryText secondary" style="white-space: normal;"></div> <div class="criticRatingSummaryText secondary" style="white-space: normal;"></div>

View file

@ -7,7 +7,7 @@
<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" item-icon><i class="md-icon">tv</i></button>
<div class="listItemBody"> <div class="listItemBody two-line">
<div>${ButtonDisplaySettings}</div> <div>${ButtonDisplaySettings}</div>
<div class="secondary">${ButtonDisplaySettingsHelp}</div> <div class="secondary">${ButtonDisplaySettingsHelp}</div>
</div> </div>
@ -17,7 +17,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" item-icon><i class="md-icon">home</i></button>
<div class="listItemBody"> <div class="listItemBody two-line">
<div>${ButtonHomeScreenSettings}</div> <div>${ButtonHomeScreenSettings}</div>
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div> <div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
</div> </div>
@ -27,7 +27,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" item-icon><i class="md-icon">play_circle_filled</i></button>
<div class="listItemBody"> <div class="listItemBody two-line">
<div>${ButtonPlaybackSettings}</div> <div>${ButtonPlaybackSettings}</div>
<div class="secondary">${ButtonPlaybackSettingsHelp}</div> <div class="secondary">${ButtonPlaybackSettingsHelp}</div>
</div> </div>
@ -37,7 +37,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" item-icon><i class="md-icon">person</i></button>
<div class="listItemBody"> <div class="listItemBody two-line">
<div>${ButtonProfile}</div> <div>${ButtonProfile}</div>
<div class="secondary">${ButtonProfileHelp}</div> <div class="secondary">${ButtonProfileHelp}</div>
</div> </div>
@ -47,7 +47,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" 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>${ButtonSyncSettings}</div>
<div class="secondary">${ButtonSyncSettingsHelp}</div> <div class="secondary">${ButtonSyncSettingsHelp}</div>
</div> </div>
@ -61,14 +61,14 @@
<a href="selectserver.html" class="clearLink selectServer hide"> <a href="selectserver.html" class="clearLink selectServer hide">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">wifi</i></button> <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>${HeaderSelectServer}</div>
</div> </div>
</div> </div>
</a> </a>
<div class="listItem btnLogout"> <div class="listItem btnLogout">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">lock</i></button> <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>${ButtonSignOut}</div>
</div> </div>
</div> </div>
@ -82,7 +82,7 @@
<a href="dashboard.html" class="clearLink"> <a href="dashboard.html" class="clearLink">
<div class="listItem"> <div class="listItem">
<button type="button" is="emby-button" class="fab mini autoSize"><i class="md-icon">settings</i></button> <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>${ButtonServerDashboard}</div>
</div> </div>
</div> </div>

View file

@ -389,9 +389,9 @@
} }
if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0 || item.Type == "Series") { if (!item.SpecialFeatureCount || item.SpecialFeatureCount == 0 || item.Type == "Series") {
page.querySelector('#scenesCollapsible').classList.add('hide'); page.querySelector('#specialsCollapsible').classList.add('hide');
} else { } else {
page.querySelector('#scenesCollapsible').classList.remove('hide'); page.querySelector('#specialsCollapsible').classList.remove('hide');
renderSpecials(page, item, user, 6); renderSpecials(page, item, user, 6);
} }
if (!item.People || !item.People.length) { 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>'; html += '<div style="white-space:normal;">' + review.Caption + '</div>';

View file

@ -1229,7 +1229,7 @@
getListViewHtml: function (options) { getListViewHtml: function (options) {
require(['paper-icon-item', 'paper-item-body', 'material-icons']); require(['listViewStyle', 'material-icons']);
var outerHtml = ""; var outerHtml = "";
@ -1276,7 +1276,7 @@
var cssClass = 'listItem'; var cssClass = 'listItem';
var href = LibraryBrowser.getHref(item, options.context); 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; var imgUrl;
@ -1327,15 +1327,15 @@
if (imgUrl) { if (imgUrl) {
if (options.smallIcon) { 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 { } else {
html += '<div class="listviewImage lazy" data-src="' + imgUrl + '" item-icon></div>'; html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon></div>';
} }
} else { } else {
if (options.smallIcon) { if (options.smallIcon) {
html += '<div class="listviewImage small" item-icon></div>'; html += '<div class="listItemImage small" item-icon></div>';
} else { } else {
html += '<div class="listviewImage" item-icon></div>'; html += '<div class="listItemImage" item-icon></div>';
} }
} }
@ -1383,19 +1383,20 @@
}) + '</div>'); }) + '</div>');
} }
if (textlines.length > 2) {
html += '<paper-item-body three-line>';
} else {
html += '<paper-item-body two-line>';
}
var defaultAction = options.defaultAction; var defaultAction = options.defaultAction;
if (defaultAction == 'play' || defaultAction == 'playallfromhere') { if (defaultAction == 'play' || defaultAction == 'playallfromhere') {
if (item.PlayAccess != 'Full') { if (item.PlayAccess != 'Full') {
defaultAction = null; 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 + '">'; html += '<a' + defaultActionAttribute + ' href="' + href + '">';
for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) { for (var i = 0, textLinesLength = textlines.length; i < textLinesLength; i++) {
@ -1403,21 +1404,20 @@
if (i == 0) { if (i == 0) {
html += '<div>'; html += '<div>';
} else { } else {
html += '<div secondary>'; html += '<div class="secondary">';
} }
html += textlines[i] || '&nbsp;'; html += textlines[i] || '&nbsp;';
html += '</div>'; html += '</div>';
} }
html += '</a>'; 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 += '<button is="paper-icon-button-light" class="listviewMenuButton autoSize"><i class="md-icon">' + AppInfo.moreIcon.replace('-', '_') + '</i></button>';
html += '<span class="listViewUserDataButtons">'; html += '<span class="listViewUserDataButtons">';
html += LibraryBrowser.getUserDataIconsHtml(item); html += LibraryBrowser.getUserDataIconsHtml(item);
html += '</span>'; html += '</span>';
html += '</paper-icon-item>'; html += '</div>';
index++; index++;
return html; 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 += '<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 += '<a href="livetvrecordinglist.html?groupid=' + group.Id + '" class="clearLink">';
html += '<div>'; 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 += '<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 += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
html += '<h3>'; html += '<h3>';
html += timer.Name; html += timer.Name;

View file

@ -76,7 +76,7 @@
elem.innerHTML = html; elem.innerHTML = html;
var listItems = []; var listItems = [];
var elems = elem.querySelectorAll('PAPER-ICON-ITEM'); var elems = elem.querySelectorAll('.listItem');
for (var i = 0, length = elems.length; i < length; i++) { for (var i = 0, length = elems.length; i < length; i++) {
listItems.push(elems[i]); listItems.push(elems[i]);
} }

View file

@ -319,14 +319,16 @@ var Dashboard = {
var parentElem = footer.querySelector('#footerNotifications'); var parentElem = footer.querySelector('#footerNotifications');
var elem = parentElem.querySelector('#' + options.id); var notificationElementId = 'notification' + options.id;
if (!elem.length) { var elem = parentElem.querySelector('#' + notificationElementId);
parentElem.insertAdjacentHTML('beforeend', '<p id="' + options.id + '" class="footerNotification"></p>');
elem = parentElem.querySelector('#' + options.id); 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) { 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>"; options.html += '<span style="margin-left: 1em;"><button is="emby-button" type="button" class="submit" onclick="' + onclick + '">' + Globalize.translate('ButtonHide') + "</button></span>";