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

fix detail images

Browse source
This commit is contained in:
Luke Pulverenti 2016-07-30 19:23:57 -04:00
parent 7beb5026ec
commit f9089f44cc
4 changed files with 34 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

22
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View file

@ -6,7 +6,6 @@
padding: 0; padding: 0;
display: block; display: block;
color: inherit !important; color: inherit !important;
box-shadow: none !important;
outline: none !important; outline: none !important;
cursor: pointer; cursor: pointer;
contain: style; contain: style;
@ -75,7 +74,6 @@ button.card {
padding: 0 !important; padding: 0 !important;
margin: 0; margin: 0;
transition: none !important; transition: none !important;
border-radius: 0 !important;
border: 3px solid transparent; border: 3px solid transparent;
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */ /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
overflow: hidden; overflow: hidden;
@ -174,6 +172,10 @@ button.cardContent {
bottom: 0; bottom: 0;
} }
.round .cardContent {
overflow: visible;
}
.scalableCard .cardImageContainer { .scalableCard .cardImageContainer {
height: 100%; height: 100%;
} }
@ -199,18 +201,20 @@ button.cardContent {
opacity: .6; opacity: .6;
} }
.visualCardBox .cardScalable { /*.visualCardBox {
background-color: #222326;
}
.visualCardBox .cardFooter {
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-ms-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); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
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-left-radius: 3px;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
background-color: #222326;
} }
.innerCardFooter { .innerCardFooter {
@ -267,8 +271,6 @@ button.cardContent {
height: 12vh; height: 12vh;
font-size: 12vh; font-size: 12vh;
color: #fff; color: #fff;
position: relative;
top: -8%;
} }
.card .indicators { .card .indicators {

28
dashboard-ui/css/librarybrowser.css
View file

@ -584,18 +584,12 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.detailImageProgressContainer { .detailImageProgressContainer {
position: absolute; position: absolute;
bottom: 2px; bottom: 4px;
right: 0; right: 1px;
left: 0; left: 1px;
text-align: center; text-align: center;
} }
.detailImageProgressContainer progress {
width: 100%;
margin: 0 auto;
height: 6px;
}
.viewControls, .listTopPaging { .viewControls, .listTopPaging {
display: inline-block; display: inline-block;
} }
@ -1062,3 +1056,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
vertical-align: top; vertical-align: top;
margin: 0 4px 0 0; 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;
}
}

6
dashboard-ui/scripts/itemdetailpage.js
View file

@ -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; var currentItem;
@ -329,11 +329,9 @@
function refreshDetailImageUserData(elem, item) { function refreshDetailImageUserData(elem, item) {
var progressHtml = item.IsFolder || !item.UserData ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
var detailImageProgressContainer = elem.querySelector('.detailImageProgressContainer'); var detailImageProgressContainer = elem.querySelector('.detailImageProgressContainer');
detailImageProgressContainer.innerHTML = progressHtml || ''; detailImageProgressContainer.innerHTML = indicators.getProgressBarHtml(item);
} }
function refreshImage(page, item, user) { function refreshImage(page, item, user) {

20
dashboard-ui/scripts/librarybrowser.js
View file

@ -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) { renderDetailImage: function (elem, item, editable, preferThumb) {
var imageTags = item.ImageTags || {}; var imageTags = item.ImageTags || {};
@ -1025,7 +1007,7 @@
html += "</a>"; 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">'; html += '<div class="detailImageProgressContainer">';
if (progressHtml) { if (progressHtml) {