mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
begin unifying card layouts
This commit is contained in:
Luke Pulverenti
parent
6503c7c6f8
commit
07d49e2573
34 changed files with 216 additions and 2228 deletions
|
|
@ -429,15 +429,13 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.34) {
|
||||
|
||||
width = posterWidth;
|
||||
height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
|
||||
height = primaryImageAspectRatio ? Math.round(width / primaryImageAspectRatio) : null;
|
||||
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
maxHeight: height,
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Primary,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
|
||||
if (primaryImageAspectRatio) {
|
||||
|
|
@ -452,9 +450,8 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
maxWidth: thumbWidth,
|
||||
tag: item.ImageTags.Thumb,
|
||||
enableImageEnhancers: enableImageEnhancers
|
||||
maxWidth: width,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
|
||||
} else if (options.preferThumb && item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
|
||||
<div class="viewSettings">
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
function enableScrollX() {
|
||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||
|
|
@ -85,23 +85,20 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
html += cardBuilder.getCardsHtml(result.Items, {
|
||||
preferThumb: section.preferThumb,
|
||||
shape: section.shape,
|
||||
centerText: section.centerText,
|
||||
overlayText: section.overlayText !== false,
|
||||
showTitle: section.showTitle,
|
||||
showParentTitle: section.showParentTitle,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: section.centerText,
|
||||
scalable: true,
|
||||
overlayPlayButton: section.overlayPlayButton,
|
||||
overlayMoreButton: section.overlayMoreButton,
|
||||
context: 'home-favorites',
|
||||
defaultAction: section.defaultAction
|
||||
action: section.defaultAction
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
|
|
|
|||
|
|
@ -1,571 +0,0 @@
|
|||
.card {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
contain: style;
|
||||
}
|
||||
.card, .card a {
|
||||
text-decoration: none;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.buttonCard:hover .cardBox {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.cardBox {
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.cardBox {
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cardOverlayButtonContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 1em .25em .5em 1em;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton, .cardOverlayPlayButton {
|
||||
color: #fff !important;
|
||||
background-color: rgba(0,0,0,.7) !important;
|
||||
border-radius: 500px;
|
||||
}
|
||||
|
||||
.cardOverlayMoreButton:hover, .cardOverlayPlayButton:hover {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
transition: background-color .5s ease-out;
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.bottomPaddedCard .cardBox:not(.visualCardBox) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hiddenScrollX .bottomPaddedCard .cardBox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.visualCardBox {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
-ms-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ui-body-b .visualCardBox {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.defaultBackground .cardImage, .ui-body-b .visualCardBox {
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.cardScalable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.letterBoxCard .cardPadder {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.bannerCard .cardPadder {
|
||||
padding-bottom: 18.5%;
|
||||
}
|
||||
|
||||
.cardContent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cardContent:not(.noHoverEffect):hover .cardImage {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.cardContent .cardFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #eee;
|
||||
padding: 6px 0 2px 0;
|
||||
max-width: 100%;
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%) !important; /* W3C */
|
||||
}
|
||||
|
||||
.cardContent .cardFooter:not(.fullCardFooter) {
|
||||
background: rgba(0, 0, 0, .6) !important;
|
||||
}
|
||||
|
||||
.lightCardFooter {
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%) !important; /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.7))) !important; /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%) !important; /* W3C */
|
||||
}
|
||||
|
||||
.fullCardFooter {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.visualCardBox .outerCardFooter {
|
||||
padding: .5em .3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btnCardOptions {
|
||||
padding: 10px !important;
|
||||
margin: 0 !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
padding: 5px 5px 2px;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cardButtonContainer {
|
||||
text-align: right;
|
||||
float: right;
|
||||
padding: 5px 0 2px;
|
||||
}
|
||||
|
||||
.cardContent .cardFooter .cardText {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
.cardTextCentered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cardDefaultText {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.cardContent .cardText {
|
||||
padding: 0 6px 4px 5px;
|
||||
}
|
||||
|
||||
.outerCardFooter .cardText + .cardText {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.outerCardFooter .cardText:first-child {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.cardImage {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cardImage canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coveredCardImage {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.coveredCardImage.noScale {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.centeredCardImage {
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.ui-body-b .iconCardImage {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.iconCardImage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.iconCardImage iron-icon {
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.bannerCard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 40%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 84%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.cardProgress {
|
||||
line-height: 7px;
|
||||
}
|
||||
|
||||
.cardProgress .itemProgressBar {
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
@media all and (max-width: 420px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 640px) {
|
||||
|
||||
.portraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 700px) {
|
||||
.squareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 770px) {
|
||||
.backdropCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.bannerCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 900px) {
|
||||
|
||||
.squareCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.overflowPortraitCard {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.overflowBackdropCard {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.overflowSquareCard {
|
||||
width: 22%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.squareCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.bannerCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
||||
.squareCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1600px) {
|
||||
|
||||
.portraitCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1800px) {
|
||||
|
||||
.squareCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2100px) {
|
||||
|
||||
.squareCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 11.111111111111111111111111111111%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2200px) {
|
||||
|
||||
.bannerCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.portraitCard {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2500px) {
|
||||
|
||||
.backdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPage169 */
|
||||
.detailPage169Card .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.detailPage169Card {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.detailPage169Card {
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 420px) {
|
||||
|
||||
.detailPage169Card {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPagePortrait */
|
||||
.detailPagePortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
|
||||
.detailPagePortraitCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.detailPagePortraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** detailPageSquare */
|
||||
.detailPageSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
|
||||
.detailPageSquareCard {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.detailPageSquareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/** horizontalBackdropCard */
|
||||
.horizontalBackdropCard .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 500px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.horizontalBackdropCard {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardImage {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.horizontalBackdropCard .cardBox {
|
||||
margin: 2px !important;
|
||||
}
|
||||
|
|
@ -907,80 +907,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.itemProgress {
|
||||
vertical-align: top;
|
||||
font-size: 19px;
|
||||
margin-right: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* All HTML5 progress enabled browsers */
|
||||
.itemProgressBar {
|
||||
/* Turns off styling - not usually needed, but good to know. */
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
/* gets rid of default border in Firefox and Opera. */
|
||||
border: 0;
|
||||
margin: 0;
|
||||
height: 14px;
|
||||
border: 0 solid #222;
|
||||
border-radius: 0;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Undo these to original */
|
||||
.listItem .itemProgressBar {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
height: .56vh;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.itemProgressBar[role]:after {
|
||||
background-image: none; /* removes default background from polyfill */
|
||||
}
|
||||
|
||||
/*
|
||||
* Background of the progress bar background
|
||||
*/
|
||||
|
||||
/* Firefox and Polyfill */
|
||||
.itemProgressBar {
|
||||
background: #000 !important; /* !important only needed in polyfill */
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.itemProgressBar::-webkit-progress-bar {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.pare
|
||||
/*
|
||||
* Background of the progress bar value
|
||||
*/
|
||||
/* Firefox */
|
||||
.itemProgressBar::-moz-progress-bar {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.itemProgressBar::-webkit-progress-value {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.itemProgressBar[aria-valuenow]:before {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
.recordingProgressBar::-moz-progress-bar {
|
||||
background-color: #cc3333;
|
||||
}
|
||||
|
|
@ -993,12 +919,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
background-color: #cc3333;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressBar {
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.timelineHeader {
|
||||
margin-bottom: .25em;
|
||||
line-height: 1.25em;
|
||||
|
|
@ -1007,7 +927,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
|
||||
.itemsContainer {
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.alphabetPicker {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<span>${ButtonSync}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
|
||||
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
|
||||
</div>
|
||||
</div>
|
||||
<p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
<div class="paging"></div>
|
||||
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer verticalItemsContainer"></div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
|
||||
<div id="activeRecordings" class="homePageSection hide">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="viewSettings">
|
||||
<div class="listTopPaging"></div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -98,14 +98,14 @@
|
|||
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
|
||||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
<div class="paging"></div>
|
||||
</div>
|
||||
|
||||
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
|
||||
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker verticalItemsContainer">
|
||||
</div>
|
||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
|
||||
<div class="paging"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['jQuery', 'emby-itemscontainer'], function ($) {
|
||||
define(['jQuery', 'cardBuilder', 'emby-itemscontainer'], function ($, cardBuilder) {
|
||||
|
||||
var data = {};
|
||||
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
|
||||
updateFilterControls(page);
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "auto",
|
||||
defaultShape: 'square',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser', 'emby-itemscontainer'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
// The base query options
|
||||
var query = {
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
if (view == "Thumb") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
context: 'channels',
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
else if (view == "ThumbCard") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView) {
|
||||
define(['events', 'libraryBrowser', 'imageLoader', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, listView, cardBuilder) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
|
|
@ -83,27 +83,25 @@
|
|||
});
|
||||
}
|
||||
else if (viewStyle == "PosterCard") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
scalable: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
||||
// poster
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['components/categorysyncbuttons', 'emby-itemscontainer'], function (categorysyncbuttons) {
|
||||
define(['components/categorysyncbuttons', 'cardBuilder', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) {
|
||||
|
||||
function getNextUpPromise() {
|
||||
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['datetime', 'emby-itemscontainer', 'scrollStyles'], function (datetime) {
|
||||
define(['datetime', 'cardBuilder', 'emby-itemscontainer', 'scrollStyles'], function (datetime, cardBuilder) {
|
||||
|
||||
function getUpcomingPromise() {
|
||||
|
||||
|
|
@ -102,10 +102,10 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: group.items,
|
||||
showLocationTypeIndicator: false,
|
||||
shape: getThumbShape(),
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,4 @@
|
|||
define(['emby-itemscontainer'], function () {
|
||||
define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
function getChannelsHtml(channels) {
|
||||
|
||||
return LibraryBrowser.getPosterViewHtml({
|
||||
return cardBuilder.getCardsHtml({
|
||||
items: channels,
|
||||
shape: "square",
|
||||
showTitle: true,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
define(['emby-itemscontainer'], function () {
|
||||
|
||||
var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
|
||||
define(['cardBuilder', 'emby-itemscontainer'], function (cardBuilder) {
|
||||
|
||||
var currentDate = new Date();
|
||||
currentDate.setHours(0, 0, 0, 0);
|
||||
|
|
@ -37,33 +35,18 @@
|
|||
|
||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
|
||||
if (view == "Poster") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: query.IsMovie ? 'portrait' : "auto",
|
||||
context: 'livetv',
|
||||
showTitle: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showStartDateIndex: true,
|
||||
overlayText: false,
|
||||
showProgramAirInfo: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
else if (view == "PosterCard") {
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'livetv',
|
||||
showTitle: true,
|
||||
showStartDateIndex: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showProgramAirInfo: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: query.IsMovie ? 'portrait' : "auto",
|
||||
context: 'livetv',
|
||||
showTitle: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showStartDateIndex: true,
|
||||
overlayText: false,
|
||||
showProgramAirInfo: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
|
||||
var elem = page.querySelector('.itemsContainer');
|
||||
elem.innerHTML = html + pagingHtml;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
function enableScrollX() {
|
||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
function renderItems(page, items, sectionClass, overlayButton, shape) {
|
||||
|
||||
var html = libraryBrowser.getPosterViewHtml({
|
||||
var html = cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
shape: shape || (enableScrollX() ? 'autooverflow' : 'auto'),
|
||||
showTitle: true,
|
||||
|
|
@ -130,8 +130,10 @@
|
|||
for (var i = 0, length = containers.length; i < length; i++) {
|
||||
if (enableScrollX()) {
|
||||
containers[i].classList.add('hiddenScrollX');
|
||||
containers[i].classList.remove('verticalItemsContainer');
|
||||
} else {
|
||||
containers[i].classList.remove('hiddenScrollX');
|
||||
containers[i].classList.add('verticalItemsContainer');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "DateCreated,SyncInfo,ItemCounts",
|
||||
Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
|
||||
|
|
@ -55,59 +55,56 @@
|
|||
var html = '';
|
||||
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
var elem = context.querySelector('#items');
|
||||
|
||||
if (viewStyle == "Thumb") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'movies',
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "ThumbCard") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'movies',
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
cardLayout: true,
|
||||
showTitle: true,
|
||||
lazy: true
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "PosterCard") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'movies',
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "auto",
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showTitle: true
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "Poster") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'movies',
|
||||
centerText: true,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "auto",
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
lazy: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
|
||||
|
||||
function getView() {
|
||||
|
||||
return 'Poster';
|
||||
}
|
||||
|
||||
function getResumeView() {
|
||||
|
||||
return 'Thumb';
|
||||
}
|
||||
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
|
||||
|
||||
function enableScrollX() {
|
||||
return browserInfo.mobile && AppInfo.enableAppLayouts;
|
||||
|
|
@ -37,39 +27,13 @@
|
|||
|
||||
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
|
||||
|
||||
var view = getView();
|
||||
var html = '';
|
||||
|
||||
if (view == 'PosterCard') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
lazy: true,
|
||||
shape: getPortraitShape(),
|
||||
overlayText: false,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
|
||||
});
|
||||
|
||||
} else if (view == 'Poster') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: items,
|
||||
shape: getPortraitShape(),
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayText: false,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
|
||||
recentlyAddedItems.innerHTML = html;
|
||||
ImageLoader.lazyChildren(recentlyAddedItems);
|
||||
var container = page.querySelector('#recentlyAddedItems');
|
||||
cardBuilder.buildCards(items, {
|
||||
itemsContainer: container,
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -101,40 +65,14 @@
|
|||
page.querySelector('#resumableSection').classList.add('hide');
|
||||
}
|
||||
|
||||
var view = getResumeView();
|
||||
var html = '';
|
||||
|
||||
if (view == 'ThumbCard') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
|
||||
});
|
||||
|
||||
} else if (view == 'Thumb') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
overlayText: true,
|
||||
showTitle: false,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
|
||||
var resumableItems = page.querySelector('#resumableItems');
|
||||
resumableItems.innerHTML = html;
|
||||
ImageLoader.lazyChildren(resumableItems);
|
||||
var container = page.querySelector('#resumableItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
|
@ -167,38 +105,17 @@
|
|||
html += '<h1 class="listHeader">' + title + '</h1>';
|
||||
|
||||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
||||
var view = getView();
|
||||
html += cardBuilder.getCardsHtml(recommendation.Items, {
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
|
||||
if (view == 'PosterCard') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: recommendation.Items,
|
||||
lazy: true,
|
||||
shape: getPortraitShape(),
|
||||
overlayText: false,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
|
||||
});
|
||||
|
||||
} else if (view == 'Poster') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: recommendation.Items,
|
||||
shape: getPortraitShape(),
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
|
|
@ -244,8 +161,10 @@
|
|||
for (var i = 0, length = containers.length; i < length; i++) {
|
||||
if (enableScrollX()) {
|
||||
containers[i].classList.add('hiddenScrollX');
|
||||
containers[i].classList.remove('verticalItemsContainer');
|
||||
} else {
|
||||
containers[i].classList.remove('hiddenScrollX');
|
||||
containers[i].classList.add('verticalItemsContainer');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
// The base query options
|
||||
var data = {};
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "DateCreated,ItemCounts",
|
||||
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
|
||||
StartIndex: 0
|
||||
}
|
||||
};
|
||||
|
|
@ -42,24 +42,18 @@
|
|||
|
||||
promise.then(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
var elem = context.querySelector('#items');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
showTitle: false,
|
||||
context: 'movies',
|
||||
preferThumb: true,
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
overlayMoreButton: true
|
||||
});
|
||||
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['events', 'libraryBrowser', 'imageLoader'], function (events, libraryBrowser, imageLoader) {
|
||||
define(['events', 'libraryBrowser', 'imageLoader', 'cardBuilder'], function (events, libraryBrowser, imageLoader, cardBuilder) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
filterButton: false
|
||||
});
|
||||
|
||||
var html = LibraryBrowser.getPosterViewHtml({
|
||||
var html = cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
context: 'folders',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser', 'listView', 'emby-itemscontainer'], function (libraryBrowser, listView) {
|
||||
define(['libraryBrowser', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (libraryBrowser, listView, cardBuilder) {
|
||||
|
||||
return function (view, params) {
|
||||
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
}
|
||||
|
||||
// Poster
|
||||
html = libraryBrowser.getPosterViewHtml(posterOptions);
|
||||
html = cardBuilder.getCardsHtml(posterOptions);
|
||||
}
|
||||
|
||||
var elem = view.querySelector('#items');
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, appSettings, groupedcards) {
|
||||
define(['libraryBrowser', 'cardBuilder', 'appSettings', 'components/groupedcards', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-itemscontainer'], function (LibraryBrowser, cardBuilder, appSettings, groupedcards) {
|
||||
|
||||
function getUserViews(userId) {
|
||||
|
||||
|
|
@ -302,9 +302,9 @@
|
|||
|
||||
html += '</div>';
|
||||
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
preferThumb: true,
|
||||
shape: 'backdrop',
|
||||
|
|
@ -348,9 +348,9 @@
|
|||
if (scrollX) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
shape: getPortraitShape(),
|
||||
showUnplayedIndicator: false,
|
||||
|
|
@ -390,10 +390,10 @@
|
|||
if (scrollX) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
|
|
@ -429,8 +429,9 @@
|
|||
|
||||
if (result.Items.length) {
|
||||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'auto',
|
||||
showTitle: true,
|
||||
|
|
@ -473,9 +474,9 @@
|
|||
if (scrollX) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer homeTopViews">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews verticalItemsContainer">';
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
shape: scrollX ? 'overflowBackdrop' : shape,
|
||||
showTitle: showTitles,
|
||||
|
|
@ -532,9 +533,9 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
|
|
@ -576,9 +577,9 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
|
|
@ -656,8 +657,8 @@
|
|||
html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: 'autohome',
|
||||
defaultShape: 'square',
|
||||
|
|
@ -704,9 +705,9 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: result.Items,
|
||||
shape: enableScrollX() ? 'autooverflow' : 'auto',
|
||||
showTitle: true,
|
||||
|
|
|
|||
|
|
@ -2789,8 +2789,6 @@ var AppInfo = {};
|
|||
|
||||
deps.push('scripts/librarymenu');
|
||||
|
||||
deps.push('css!css/card.css');
|
||||
|
||||
console.log('onAppReady - loading dependencies');
|
||||
|
||||
require(deps, function (imageLoader, pageObjects) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
return function (view, params, tabContent) {
|
||||
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Series",
|
||||
Recursive: true,
|
||||
Fields: "DateCreated,SyncInfo,ItemCounts",
|
||||
Fields: "DateCreated,SyncInfo,ItemCounts,PrimaryImageAspectRatio",
|
||||
StartIndex: 0
|
||||
},
|
||||
view: libraryBrowser.getSavedView(key) || libraryBrowser.getDefaultItemsView('Thumb', 'Thumb')
|
||||
|
|
@ -55,59 +55,56 @@
|
|||
var html = '';
|
||||
|
||||
var viewStyle = self.getCurrentViewStyle();
|
||||
var elem = context.querySelector('#items');
|
||||
|
||||
if (viewStyle == "Thumb") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'tv',
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "ThumbCard") {
|
||||
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'tv',
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
cardLayout: true,
|
||||
showTitle: true,
|
||||
lazy: true
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "PosterCard") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'tv',
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "auto",
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showTitle: true
|
||||
centerText: true,
|
||||
cardLayout: true
|
||||
});
|
||||
}
|
||||
else if (viewStyle == "Poster") {
|
||||
html = libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'tv',
|
||||
centerText: true,
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "auto",
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
lazy: true,
|
||||
centerText: true,
|
||||
overlayMoreButton: true
|
||||
});
|
||||
}
|
||||
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
libraryBrowser.saveQueryValues(getSavedQueryKey(), query);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
|
@ -121,7 +118,7 @@
|
|||
return getPageData(tabContent).view;
|
||||
};
|
||||
|
||||
self.setCurrentViewStyle = function(viewStyle) {
|
||||
self.setCurrentViewStyle = function (viewStyle) {
|
||||
getPageData(tabContent).view = viewStyle;
|
||||
libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle);
|
||||
fullyReload();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['components/categorysyncbuttons', 'components/groupedcards'], function (categorysyncbuttons, groupedcards) {
|
||||
define(['components/categorysyncbuttons', 'components/groupedcards', 'cardBuilder'], function (categorysyncbuttons, groupedcards, cardBuilder) {
|
||||
|
||||
function getView() {
|
||||
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
if (view == 'ThumbCard') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
} else if (view == 'Thumb') {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
|
|
|
|||
|
|
@ -1,19 +1,9 @@
|
|||
define(['libraryBrowser', 'components/categorysyncbuttons', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons) {
|
||||
define(['libraryBrowser', 'components/categorysyncbuttons', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (libraryBrowser, categorysyncbuttons, cardBuilder) {
|
||||
|
||||
return function (view, params) {
|
||||
|
||||
var self = this;
|
||||
|
||||
function getView() {
|
||||
|
||||
return 'Thumb';
|
||||
}
|
||||
|
||||
function getResumeView() {
|
||||
|
||||
return 'Poster';
|
||||
}
|
||||
|
||||
function reload() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
|
@ -43,41 +33,19 @@
|
|||
view.querySelector('.noNextUpItems').classList.remove('hide');
|
||||
}
|
||||
|
||||
var viewStyle = getView();
|
||||
var html = '';
|
||||
var container = view.querySelector('#nextUpItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
shape: "backdrop",
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
overlayPlayButton: AppInfo.enableAppLayouts
|
||||
});
|
||||
|
||||
if (viewStyle == 'ThumbCard') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
preferThumb: true,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true
|
||||
});
|
||||
|
||||
} else if (viewStyle == 'Thumb') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
lazy: true,
|
||||
preferThumb: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: AppInfo.enableAppLayouts
|
||||
});
|
||||
}
|
||||
|
||||
var elem = view.querySelector('#nextUpItems');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
|
@ -120,50 +88,33 @@
|
|||
view.querySelector('#resumableSection').classList.add('hide');
|
||||
}
|
||||
|
||||
var viewStyle = getResumeView();
|
||||
var html = '';
|
||||
|
||||
if (viewStyle == 'PosterCard') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
cardLayout: true,
|
||||
showDetailsMenu: true,
|
||||
preferThumb: true
|
||||
});
|
||||
|
||||
} else if (viewStyle == 'Poster') {
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: getThumbShape(),
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
overlayPlayButton: true,
|
||||
preferThumb: true,
|
||||
centerText: true
|
||||
});
|
||||
}
|
||||
|
||||
var elem = view.querySelector('#resumableItems');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
var container = view.querySelector('#resumableItems');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: container,
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
scalable: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
self.initTab = function () {
|
||||
|
||||
var tabContent = self.tabContent;
|
||||
|
||||
var resumableItemsContainer = tabContent.querySelector('#resumableItems');
|
||||
|
||||
if (enableScrollX()) {
|
||||
tabContent.querySelector('#resumableItems').classList.add('hiddenScrollX');
|
||||
resumableItemsContainer.classList.add('hiddenScrollX');
|
||||
resumableItemsContainer.classList.remove('verticalItemsContainer');
|
||||
} else {
|
||||
tabContent.querySelector('#resumableItems').classList.remove('hiddenScrollX');
|
||||
resumableItemsContainer.classList.remove('hiddenScrollX');
|
||||
resumableItemsContainer.classList.add('verticalItemsContainer');
|
||||
}
|
||||
|
||||
categorysyncbuttons.init(tabContent);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['libraryBrowser'], function (libraryBrowser) {
|
||||
define(['libraryBrowser', 'cardBuilder'], function (libraryBrowser, cardBuilder) {
|
||||
|
||||
// The base query options
|
||||
var data = {};
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Series",
|
||||
Recursive: true,
|
||||
Fields: "DateCreated,ItemCounts",
|
||||
Fields: "DateCreated,ItemCounts,PrimaryImageAspectRatio",
|
||||
StartIndex: 0
|
||||
}
|
||||
};
|
||||
|
|
@ -42,24 +42,18 @@
|
|||
|
||||
promise.then(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
var elem = context.querySelector('#items');
|
||||
cardBuilder.buildCards(result.Items, {
|
||||
itemsContainer: elem,
|
||||
shape: "backdrop",
|
||||
showTitle: false,
|
||||
context: 'tv',
|
||||
preferThumb: true,
|
||||
showTitle: false,
|
||||
scalable: true,
|
||||
showItemCounts: true,
|
||||
centerText: true,
|
||||
lazy: true
|
||||
|
||||
overlayMoreButton: true
|
||||
});
|
||||
|
||||
var elem = context.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['datetime', 'libraryBrowser', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser) {
|
||||
define(['datetime', 'libraryBrowser', 'cardBuilder', 'scrollStyles', 'emby-itemscontainer'], function (datetime, libraryBrowser, cardBuilder) {
|
||||
|
||||
function getUpcomingPromise(context, params) {
|
||||
|
||||
|
|
@ -104,10 +104,10 @@
|
|||
if (enableScrollX()) {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
|
||||
} else {
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer">';
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
|
||||
}
|
||||
|
||||
html += libraryBrowser.getPosterViewHtml({
|
||||
html += cardBuilder.getCardsHtml({
|
||||
items: group.items,
|
||||
showLocationTypeIndicator: false,
|
||||
shape: getThumbShape(),
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<span>${ButtonSync}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer">
|
||||
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer">
|
||||
</div>
|
||||
</div>
|
||||
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<span>${ButtonSync}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer">
|
||||
<div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer verticalItemsContainer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
|
||||
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" class="itemsContainer">
|
||||
<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">
|
||||
</div>
|
||||
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
|
||||
<div class="paging"></div>
|
||||
|
|
@ -96,14 +96,14 @@
|
|||
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
|
||||
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div>
|
||||
</div>
|
||||
<div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
|
||||
<div class="viewSettings">
|
||||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer" style="text-align: center;"></div>
|
||||
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align: center;"></div>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue