mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
redesigned actor display
This commit is contained in:
Luke Pulverenti
parent
cb579524df
commit
d76f3f681f
6 changed files with 221 additions and 138 deletions
|
|
@ -64,6 +64,41 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.detailPageContent .ui-collapsible-content {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.galleryImageContainer {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.galleryImageContainer:hover {
|
||||
-moz-box-shadow: 0 0 20px 3px #2572EB;
|
||||
-webkit-box-shadow: 0 0 20px 3px #2572EB;
|
||||
box-shadow: 0 0 20px 3px #2572EB;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
.libraryPage .ui-content {
|
||||
padding: 10px 20px 100px;
|
||||
|
|
@ -87,12 +122,18 @@
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.detailPageContent .ui-collapsible-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
.detailPageContent {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.ehsContent {
|
||||
|
|
@ -110,8 +151,7 @@
|
|||
@media all and (min-width: 1440px) {
|
||||
|
||||
.detailPageContent {
|
||||
width: 70%;
|
||||
max-width: 1200px;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.ehsContent {
|
||||
|
|
@ -243,6 +283,7 @@
|
|||
border: 1px solid #666;
|
||||
border-radius: 0;
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
|
|
@ -293,10 +334,27 @@
|
|||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.userDataIcons .itemProgressText {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressBar {
|
||||
top: 2px;
|
||||
width: 40px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.itemProgressText {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tileItem .itemProgressText {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,17 +101,10 @@
|
|||
height: 150px;
|
||||
}
|
||||
|
||||
|
||||
.posterItemProgress {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.posterItemProgress .itemProgressBar {
|
||||
.posterItemProgress .itemProgressBar {
|
||||
height: 12px;
|
||||
width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
.portraitPosterItem .itemProgressText {
|
||||
display: none;
|
||||
|
|
@ -121,11 +114,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.posterItem .itemProgressText {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.backdropPosterItem {
|
||||
|
|
|
|||
|
|
@ -684,12 +684,6 @@ progress {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.halfStarRating {
|
||||
background-position: center center;
|
||||
}
|
||||
|
|
@ -724,10 +718,6 @@ progress {
|
|||
width: 57%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.galleryImage {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
|
|
@ -748,14 +738,6 @@ progress {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
|
||||
.galleryImage {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
|
||||
.itemDetailImage {
|
||||
|
|
@ -855,6 +837,7 @@ progress {
|
|||
#videoWindow.tubecss .vjs-controls {
|
||||
height: 5em!important;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button {
|
||||
width: 1.5em;
|
||||
border: 0;
|
||||
|
|
@ -877,9 +860,10 @@ progress {
|
|||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-quality-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-chapter-button div {
|
||||
background: url("images/media/chapter.png");
|
||||
|
|
@ -888,21 +872,23 @@ progress {
|
|||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-chapter-button div:hover {
|
||||
|
||||
#videoWindow.tubecss .vjs-chapter-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-chapter-button.vjs-menu-button ul {
|
||||
width: auto;
|
||||
max-width: 25em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-chapter-button.vjs-menu-button ul li {
|
||||
.vjs-chapter-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button {
|
||||
float: left;
|
||||
|
|
@ -911,16 +897,18 @@ progress {
|
|||
width: 2.5em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div {
|
||||
background: url("images/media/stop.png");
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
margin: -.7em .5em auto 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-subtitle-button div {
|
||||
background-position: -25px -75px !important;
|
||||
}
|
||||
|
|
@ -931,12 +919,12 @@ progress {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-subtitle-button.vjs-menu-button ul li {
|
||||
.vjs-subtitle-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div {
|
||||
background: url("images/media/language.png") !important;
|
||||
|
|
@ -945,33 +933,37 @@ progress {
|
|||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-language-button.vjs-menu-button ul {
|
||||
width: auto;
|
||||
max-width: 25em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.vjs-language-button.vjs-menu-button ul li {
|
||||
.vjs-language-button.vjs-menu-button ul li {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-size: 1.1em;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#videoWindow.tubecss .vjs-mute-control {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-volume-control {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 4em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -979,16 +971,20 @@ progress {
|
|||
height: auto;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-time-divider {
|
||||
bottom: 0.4em;
|
||||
left: 25.3em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-menu-item {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-current-time {
|
||||
left: 26em;
|
||||
}
|
||||
|
||||
#videoWindow.tubecss .vjs-duration {
|
||||
left: 22.5em;
|
||||
}
|
||||
|
|
@ -66,6 +66,19 @@
|
|||
width: 65%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileImage {
|
||||
height: 125px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileContent {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.smallPosterTileItem .tileName {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.squareTileItem .tileImage {
|
||||
height: 100px;
|
||||
width: 35%;
|
||||
|
|
@ -91,14 +104,27 @@
|
|||
width: 18px;
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
|
||||
.smallPosterTileItem {
|
||||
width: 270px;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
.tileItem {
|
||||
width: 46%;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.backdropTileItem .tileImage {
|
||||
height: 88px;
|
||||
}
|
||||
|
|
@ -136,7 +162,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
.tileItem {
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 47.5%;
|
||||
}
|
||||
|
||||
|
|
@ -170,7 +196,7 @@
|
|||
height: 160px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem, .posterTileItem, .squareTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
|
|
@ -188,7 +214,7 @@
|
|||
height: 150px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem, .squareTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
|
|
@ -211,7 +237,7 @@
|
|||
height: 170px;
|
||||
}
|
||||
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
|
|
@ -230,7 +256,7 @@
|
|||
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 31.5%;
|
||||
}
|
||||
|
||||
|
|
@ -256,7 +282,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2000px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 23.5%;
|
||||
}
|
||||
|
||||
|
|
@ -282,7 +308,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2200px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
|
|
@ -308,7 +334,7 @@
|
|||
}
|
||||
|
||||
@media all and (min-width: 2540px) {
|
||||
.tileItem {
|
||||
.backdropTileItem {
|
||||
width: 18.75%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -278,7 +278,11 @@
|
|||
|
||||
} else {
|
||||
|
||||
var shape = "poster";
|
||||
var shape = "smallPoster";
|
||||
|
||||
if (item.Type == "Season") {
|
||||
shape = "smallBackdrop";
|
||||
}
|
||||
|
||||
var html = LibraryBrowser.getPosterDetailViewHtml({
|
||||
items: result.Items,
|
||||
|
|
|
|||
|
|
@ -537,7 +537,7 @@
|
|||
if (options.showProgressBar) {
|
||||
|
||||
html += "<div class='posterItemText posterItemProgress'>";
|
||||
html += LibraryBrowser.getItemProgressBarHtml(item, true) || " ";
|
||||
html += LibraryBrowser.getItemProgressBarHtml(item) || " ";
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
|
|
@ -563,7 +563,7 @@
|
|||
var date = item.DateCreated;
|
||||
|
||||
try {
|
||||
if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 1209600000) {
|
||||
if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 864000000) {
|
||||
return "<div class='posterRibbon'>New</div>";
|
||||
}
|
||||
} catch (err) {
|
||||
|
|
@ -792,7 +792,7 @@
|
|||
return html;
|
||||
},
|
||||
|
||||
getItemProgressBarHtml: function (item, showProgressText) {
|
||||
getItemProgressBarHtml: function (item) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
|
@ -801,7 +801,13 @@
|
|||
|
||||
if (item.PlayedPercentage) {
|
||||
|
||||
tooltip = Math.round(item.PlayedPercentage) + '% played';
|
||||
tooltip = Math.round(item.PlayedPercentage) + '% ';
|
||||
|
||||
if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet") {
|
||||
tooltip += "watched";
|
||||
} else {
|
||||
tooltip += "played";
|
||||
}
|
||||
|
||||
pct = item.PlayedPercentage;
|
||||
}
|
||||
|
|
@ -817,10 +823,8 @@
|
|||
html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">';
|
||||
html += '</progress>';
|
||||
|
||||
if (showProgressText) {
|
||||
html += '<span class="itemProgressText">' + tooltip + '</span>';
|
||||
}
|
||||
}
|
||||
|
||||
return html;
|
||||
},
|
||||
|
|
@ -1483,7 +1487,7 @@
|
|||
|
||||
if (typeof (index) == "undefined") index = 0;
|
||||
|
||||
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
|
||||
html += '<div class="galleryImageContainer">';
|
||||
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
|
||||
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
|
||||
maxwidth: lightboxWidth,
|
||||
|
|
@ -1510,28 +1514,35 @@
|
|||
|
||||
var role = cast.Role || cast.Type;
|
||||
|
||||
html += '<a href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
|
||||
html += '<div class="posterViewItem posterViewItemWithDualText">';
|
||||
html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
||||
if (cast.PrimaryImageTag) {
|
||||
|
||||
var imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
|
||||
imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
|
||||
width: 185,
|
||||
tag: cast.PrimaryImageTag,
|
||||
type: "primary"
|
||||
});
|
||||
|
||||
html += '<img src="' + imgUrl + '" />';
|
||||
} else {
|
||||
var style = "background-color:" + defaultBackground + ";";
|
||||
|
||||
html += '<img src="css/images/items/list/person.png" style="max-width:185px; ' + style + '"/>';
|
||||
imgUrl = "css/images/items/list/person.png";
|
||||
}
|
||||
|
||||
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + cast.Name + '</div>';
|
||||
html += '<div class="posterViewItemText">' + role + '</div>';
|
||||
html += '<div class="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
|
||||
|
||||
html += '</div></a>';
|
||||
|
||||
|
||||
html += '<div class="tileContent">';
|
||||
|
||||
html += '<p>' + cast.Name + '</p>';
|
||||
html += '<p>' + (cast.Role || cast.Type) + '</p>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
html += '</a>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue