mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update components
This commit is contained in:
parent
f9240e5fb5
commit
b1feee2d1c
@ -172,6 +172,7 @@ button.card {
|
||||
position: relative;
|
||||
background-clip: content-box !important;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.visualCardBox .cardImageContainer {
|
||||
@ -259,6 +260,7 @@ button.cardImageContainer {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.innerCardFooterClear {
|
||||
@ -274,16 +276,9 @@ button.cardImageContainer {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.innerCardFooter .cardText, .cardImageContainer .cardText {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cardTextCentered {
|
||||
text-align: center;
|
||||
}
|
||||
@ -310,7 +305,7 @@ button.cardImageContainer {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card .indicators {
|
||||
.cardIndicators {
|
||||
right: 2.5%;
|
||||
top: 2.5%;
|
||||
position: absolute;
|
||||
@ -318,12 +313,12 @@ button.cardImageContainer {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portraitCard .indicators {
|
||||
.portraitCardIndicators {
|
||||
right: 3%;
|
||||
top: 2%;
|
||||
}
|
||||
|
||||
.backdropCard .indicators {
|
||||
.backdropCardIndicators {
|
||||
right: 1.5%;
|
||||
top: 2.8%;
|
||||
}
|
||||
|
@ -1102,7 +1102,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||
}
|
||||
|
||||
if (indicatorsHtml) {
|
||||
cardImageContainerOpen += '<div class="indicators">' + indicatorsHtml + '</div>';
|
||||
cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
|
||||
}
|
||||
|
||||
var forceName = imgInfo.forceName;
|
||||
|
@ -12,12 +12,15 @@
|
||||
text-align: left;
|
||||
padding: .25em 1.15em;
|
||||
line-height: 160%;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.listItem-border {
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.listItem-button {
|
||||
width: 100%;
|
||||
}
|
||||
@ -131,11 +134,11 @@
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.layout-tv .listItem {
|
||||
.listItem-focusscale {
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
.layout-tv .listItem:focus {
|
||||
.listItem-focusscale:focus {
|
||||
transform: scale(1.025, 1.025);
|
||||
}
|
||||
|
||||
@ -150,11 +153,7 @@
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.paperList .listItem {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.layout-tv .listItemMediaInfo {
|
||||
.listItemMediaInfo-padded {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
|
@ -178,12 +178,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||
}
|
||||
}
|
||||
|
||||
var cssClass = "listItem listItem-nosidepadding";
|
||||
var cssClass = "listItem listItem-nosidepadding listItem-border";
|
||||
|
||||
if (clickEntireItem) {
|
||||
cssClass += ' itemAction listItem-button';
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
cssClass += ' listItem-focusscale';
|
||||
}
|
||||
|
||||
var downloadWidth = 80;
|
||||
|
||||
if (isLargeStyle) {
|
||||
@ -281,7 +285,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
|
||||
html += getTextLinesHtml(textlines, isLargeStyle);
|
||||
|
||||
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) {
|
||||
|
@ -117,7 +117,9 @@
|
||||
var itemHtml = '';
|
||||
|
||||
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 + '">';
|
||||
|
||||
|
@ -233,7 +233,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
dlg.classList.add('directoryPicker');
|
||||
|
||||
|
@ -308,7 +308,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-' + theme);
|
||||
dlg.classList.add('background-theme-' + theme);
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
|
@ -283,7 +283,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-' + theme);
|
||||
dlg.classList.add('background-theme-' + theme);
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
|
@ -145,7 +145,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-' + theme);
|
||||
dlg.classList.add('background-theme-' + theme);
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
|
@ -92,7 +92,7 @@
|
||||
|
||||
function onAddButtonClick() {
|
||||
|
||||
var page = $(this).parents('.popupEditor')[0];
|
||||
var page = $(this).parents('.dlg-librarycreator')[0];
|
||||
|
||||
require(['directorybrowser'], function (directoryBrowser) {
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
|
||||
return p.toLowerCase() != location.toLowerCase();
|
||||
});
|
||||
var page = $(this).parents('.popupEditor')[0];
|
||||
var page = $(this).parents('.dlg-librarycreator')[0];
|
||||
renderPaths(page);
|
||||
}
|
||||
|
||||
@ -207,7 +207,7 @@
|
||||
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('popupEditor');
|
||||
dlg.classList.add('dlg-librarycreator');
|
||||
|
||||
dlg.innerHTML = Globalize.translateDocument(template);
|
||||
document.body.appendChild(dlg);
|
||||
|
@ -161,7 +161,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
|
@ -6,7 +6,7 @@
|
||||
<div>
|
||||
<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>
|
||||
<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>${ButtonDisplaySettings}</div>
|
||||
<div class="secondary">${ButtonDisplaySettingsHelp}</div>
|
||||
@ -16,7 +16,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>
|
||||
<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>${ButtonHomeScreenSettings}</div>
|
||||
<div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
|
||||
@ -26,7 +26,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>
|
||||
<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>${ButtonPlaybackSettings}</div>
|
||||
<div class="secondary">${ButtonPlaybackSettingsHelp}</div>
|
||||
@ -36,7 +36,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>
|
||||
<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>${ButtonProfile}</div>
|
||||
<div class="secondary">${ButtonProfileHelp}</div>
|
||||
@ -46,7 +46,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>
|
||||
<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>${ButtonSyncSettings}</div>
|
||||
<div class="secondary">${ButtonSyncSettingsHelp}</div>
|
||||
|
@ -151,7 +151,7 @@
|
||||
var itemHtml = '';
|
||||
|
||||
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>';
|
||||
|
||||
@ -1034,7 +1034,7 @@
|
||||
|
||||
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';
|
||||
|
||||
|
@ -99,7 +99,6 @@
|
||||
|
||||
dlg.classList.add('ui-body-b');
|
||||
dlg.classList.add('background-theme-b');
|
||||
dlg.classList.add('popupEditor');
|
||||
|
||||
var html = '';
|
||||
html += '<h2 class="dialogHeader">';
|
||||
|
@ -265,10 +265,6 @@
|
||||
name: Globalize.translate('OptionParentalRating'),
|
||||
id: 'OfficialRating,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionPlayCount'),
|
||||
id: 'PlayCount,SortName'
|
||||
},
|
||||
{
|
||||
name: Globalize.translate('OptionReleaseDate'),
|
||||
id: 'PremiereDate,SortName'
|
||||
|
@ -122,7 +122,7 @@
|
||||
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">';
|
||||
|
||||
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>";
|
||||
}
|
||||
|
11
dashboard-ui/thirdparty/paper-button-style.css
vendored
11
dashboard-ui/thirdparty/paper-button-style.css
vendored
@ -176,22 +176,11 @@ div.dialogHeader {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
||||
.dialog.popupEditor h2.dialogHeader {
|
||||
font-weight: inherit !important;
|
||||
line-height: 36px;
|
||||
padding: 0 1em;
|
||||
margin-top: .7em;
|
||||
}
|
||||
|
||||
.formDialogHeader button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dialog.popupEditor {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.formDialog.background-theme-b {
|
||||
background-color: #181818;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user