mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fix detail images
This commit is contained in:
parent
7beb5026ec
commit
f9089f44cc
4 changed files with 34 additions and 42 deletions
|
@ -6,7 +6,6 @@
|
|||
padding: 0;
|
||||
display: block;
|
||||
color: inherit !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
contain: style;
|
||||
|
@ -75,7 +74,6 @@ button.card {
|
|||
padding: 0 !important;
|
||||
margin: 0;
|
||||
transition: none !important;
|
||||
border-radius: 0 !important;
|
||||
border: 3px solid transparent;
|
||||
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
|
||||
overflow: hidden;
|
||||
|
@ -174,6 +172,10 @@ button.cardContent {
|
|||
bottom: 0;
|
||||
}
|
||||
|
||||
.round .cardContent {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.scalableCard .cardImageContainer {
|
||||
height: 100%;
|
||||
}
|
||||
|
@ -199,18 +201,20 @@ button.cardContent {
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
.visualCardBox .cardScalable {
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.visualCardBox .cardFooter {
|
||||
/*.visualCardBox {
|
||||
-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);
|
||||
}*/
|
||||
|
||||
.visualCardBox .cardScalable, .visualCardBox .cardFooter {
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.visualCardBox .cardFooter {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
background-color: #222326;
|
||||
}
|
||||
|
||||
.innerCardFooter {
|
||||
|
@ -267,8 +271,6 @@ button.cardContent {
|
|||
height: 12vh;
|
||||
font-size: 12vh;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
top: -8%;
|
||||
}
|
||||
|
||||
.card .indicators {
|
||||
|
|
|
@ -584,18 +584,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
|
||||
.detailImageProgressContainer {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 4px;
|
||||
right: 1px;
|
||||
left: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.detailImageProgressContainer progress {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.viewControls, .listTopPaging {
|
||||
display: inline-block;
|
||||
}
|
||||
|
@ -1062,3 +1056,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
vertical-align: top;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
.itemDetailPage .scalableCard.portraitCard {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.itemDetailPage .scalableCard.squareCard {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.itemDetailPage .scalableCard.backdropCard, .itemDetailPage .scalableCard.smallBackdropCard {
|
||||
width: 33.3333333333333333% !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom) {
|
||||
define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'scrollStyles', 'emby-itemscontainer'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators) {
|
||||
|
||||
var currentItem;
|
||||
|
||||
|
@ -329,11 +329,9 @@
|
|||
|
||||
function refreshDetailImageUserData(elem, item) {
|
||||
|
||||
var progressHtml = item.IsFolder || !item.UserData ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
|
||||
|
||||
var detailImageProgressContainer = elem.querySelector('.detailImageProgressContainer');
|
||||
|
||||
detailImageProgressContainer.innerHTML = progressHtml || '';
|
||||
detailImageProgressContainer.innerHTML = indicators.getProgressBarHtml(item);
|
||||
}
|
||||
|
||||
function refreshImage(page, item, user) {
|
||||
|
|
|
@ -891,24 +891,6 @@
|
|||
});
|
||||
},
|
||||
|
||||
getItemProgressBarHtml: function (item) {
|
||||
|
||||
|
||||
if (item.Type == "Recording" && item.CompletionPercentage) {
|
||||
|
||||
return '<progress class="itemProgressBar recordingProgressBar" min="0" max="100" value="' + item.CompletionPercentage + '"></progress>';
|
||||
}
|
||||
|
||||
var pct = item.PlayedPercentage;
|
||||
|
||||
if (pct && pct < 100) {
|
||||
|
||||
return '<progress class="itemProgressBar" min="0" max="100" value="' + pct + '"></progress>';
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
renderDetailImage: function (elem, item, editable, preferThumb) {
|
||||
|
||||
var imageTags = item.ImageTags || {};
|
||||
|
@ -1025,7 +1007,7 @@
|
|||
html += "</a>";
|
||||
}
|
||||
|
||||
var progressHtml = item.IsFolder || !item.UserData ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
|
||||
var progressHtml = item.IsFolder || !item.UserData ? '' : indicators.getProgressBarHtml(item);
|
||||
|
||||
html += '<div class="detailImageProgressContainer">';
|
||||
if (progressHtml) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue