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

redesigned actor display

Browse source
This commit is contained in:
Luke Pulverenti 2013-05-04 14:21:29 -04:00
parent cb579524df
commit d76f3f681f
6 changed files with 221 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -64,6 +64,41 @@
display: none; 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) { @media all and (min-width: 650px) {
.libraryPage .ui-content { .libraryPage .ui-content {
padding: 10px 20px 100px; padding: 10px 20px 100px;
@ -87,12 +122,18 @@
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.detailPageContent .ui-collapsible-content {
padding-left: 15px;
padding-right: 15px;
}
} }
@media all and (min-width: 1000px) { @media all and (min-width: 1000px) {
.detailPageContent { .detailPageContent {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
max-width: 1200px;
} }
.ehsContent { .ehsContent {
@ -110,8 +151,7 @@
@media all and (min-width: 1440px) { @media all and (min-width: 1440px) {
.detailPageContent { .detailPageContent {
width: 70%; width: 1200px;
max-width: 1200px;
} }
.ehsContent { .ehsContent {
@ -243,6 +283,7 @@
border: 1px solid #666; border: 1px solid #666;
border-radius: 0; border-radius: 0;
width: 100px; width: 100px;
margin-right: 5px;
} }
/* Polyfill */ /* Polyfill */
@ -293,10 +334,27 @@
vertical-align: top; vertical-align: top;
position: relative; position: relative;
top: 3px; top: 3px;
}
.userDataIcons .itemProgressText {
vertical-align: top;
position: relative;
top: 3px;
margin-right: 1em; margin-right: 1em;
} }
.tileItem .itemProgressBar { .tileItem .itemProgressBar {
top: 2px; top: 2px;
width: 40px; width: 40px;
margin-right: 1em;
}
.itemProgressText {
font-size: 12px;
color: #bbb;
vertical-align: middle;
}
.tileItem .itemProgressText {
display: none;
} }

16
dashboard-ui/css/posteritem.css
View file

@ -101,17 +101,10 @@
height: 150px; height: 150px;
} }
.posterItemProgress .itemProgressBar {
.posterItemProgress {
font-size: 12px;
color: #bbb;
vertical-align: middle;
}
.posterItemProgress .itemProgressBar {
height: 12px; height: 12px;
width: 35%; width: 35%;
} }
.portraitPosterItem .itemProgressText { .portraitPosterItem .itemProgressText {
display: none; display: none;
@ -121,11 +114,6 @@
width: 100%; width: 100%;
} }
.posterItem .itemProgressText {
margin-left: 5px;
vertical-align: middle;
}
@media all and (min-width: 650px) { @media all and (min-width: 650px) {
.backdropPosterItem { .backdropPosterItem {

64
dashboard-ui/css/site.css
View file

@ -684,12 +684,6 @@ progress {
background-size: cover; background-size: cover;
} }
.galleryImage {
width: 120px;
display: inline-block;
margin: 5px;
}
.halfStarRating { .halfStarRating {
background-position: center center; background-position: center center;
} }
@ -724,10 +718,6 @@ progress {
width: 57%; width: 57%;
padding-left: 20px; padding-left: 20px;
} }
.galleryImage {
width: 150px;
}
} }
@media all and (min-width: 750px) { @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) { @media all and (min-width: 1440px) {
.itemDetailImage { .itemDetailImage {
@ -855,6 +837,7 @@ progress {
#videoWindow.tubecss .vjs-controls { #videoWindow.tubecss .vjs-controls {
height: 5em!important; height: 5em!important;
} }
#videoWindow.tubecss .vjs-menu-button { #videoWindow.tubecss .vjs-menu-button {
width: 1.5em; width: 1.5em;
border: 0; border: 0;
@ -877,9 +860,10 @@ progress {
background-size: cover; background-size: cover;
opacity: 0.5; 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; opacity: 1.0;
} }
#videoWindow.tubecss .vjs-chapter-button div { #videoWindow.tubecss .vjs-chapter-button div {
background: url("images/media/chapter.png"); background: url("images/media/chapter.png");
@ -888,21 +872,23 @@ progress {
background-size: cover; background-size: cover;
opacity: 0.5; opacity: 0.5;
} }
#videoWindow.tubecss .vjs-chapter-button div:hover {
#videoWindow.tubecss .vjs-chapter-button div:hover {
opacity: 1.0; opacity: 1.0;
} }
.vjs-chapter-button.vjs-menu-button ul { .vjs-chapter-button.vjs-menu-button ul {
width: auto; width: auto;
max-width: 25em; max-width: 25em;
overflow-y: scroll; overflow-y: scroll;
} }
.vjs-chapter-button.vjs-menu-button ul li { .vjs-chapter-button.vjs-menu-button ul li {
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
font-size: 1.1em; font-size: 1.1em;
padding-right: 10px; padding-right: 10px;
} }
#videoWindow.tubecss .vjs-menu-button.vjs-stop-button { #videoWindow.tubecss .vjs-menu-button.vjs-stop-button {
float: left; float: left;
@ -911,16 +897,18 @@ progress {
width: 2.5em; 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"); background: url("images/media/stop.png");
height: 26px; height: 26px;
width: 26px; width: 26px;
margin: -.7em .5em auto 0; margin: -.7em .5em auto 0;
opacity: 0.5; 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; opacity: 1.0;
} }
.vjs-subtitle-button div { .vjs-subtitle-button div {
background-position: -25px -75px !important; background-position: -25px -75px !important;
} }
@ -931,12 +919,12 @@ progress {
overflow-y: scroll; overflow-y: scroll;
} }
.vjs-subtitle-button.vjs-menu-button ul li { .vjs-subtitle-button.vjs-menu-button ul li {
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
font-size: 1.1em; font-size: 1.1em;
padding-right: 10px; padding-right: 10px;
} }
#videoWindow.tubecss .vjs-menu-button.vjs-language-button div { #videoWindow.tubecss .vjs-menu-button.vjs-language-button div {
background: url("images/media/language.png") !important; background: url("images/media/language.png") !important;
@ -945,33 +933,37 @@ progress {
background-size: cover; background-size: cover;
opacity: 0.5; 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; opacity: 1.0;
} }
.vjs-language-button.vjs-menu-button ul { .vjs-language-button.vjs-menu-button ul {
width: auto; width: auto;
max-width: 25em; max-width: 25em;
overflow-y: scroll; overflow-y: scroll;
} }
.vjs-language-button.vjs-menu-button ul li { .vjs-language-button.vjs-menu-button ul li {
width: auto; width: auto;
white-space: nowrap; white-space: nowrap;
font-size: 1.1em; font-size: 1.1em;
padding-right: 10px; padding-right: 10px;
} }
#videoWindow.tubecss .vjs-mute-control { #videoWindow.tubecss .vjs-mute-control {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
#videoWindow.tubecss .vjs-volume-control { #videoWindow.tubecss .vjs-volume-control {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
top: auto; top: auto;
left: 4em; left: 4em;
} }
#videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider { #videoWindow.tubecss .vjs-time-controls, #videoWindow.tubecss .vjs-time-divider {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -979,16 +971,20 @@ progress {
height: auto; height: auto;
width: 0px; width: 0px;
} }
#videoWindow.tubecss .vjs-time-divider { #videoWindow.tubecss .vjs-time-divider {
bottom: 0.4em; bottom: 0.4em;
left: 25.3em; left: 25.3em;
} }
#videoWindow.tubecss .vjs-menu-item { #videoWindow.tubecss .vjs-menu-item {
font-size: 1em; font-size: 1em;
} }
#videoWindow.tubecss .vjs-current-time { #videoWindow.tubecss .vjs-current-time {
left: 26em; left: 26em;
} }
#videoWindow.tubecss .vjs-duration { #videoWindow.tubecss .vjs-duration {
left: 22.5em; left: 22.5em;
} }

44
dashboard-ui/css/tileitem.css
View file

@ -66,6 +66,19 @@
width: 65%; width: 65%;
} }
.smallPosterTileItem .tileImage {
height: 125px;
width: 30%;
}
.smallPosterTileItem .tileContent {
width: 65%;
}
.smallPosterTileItem .tileName {
font-weight: normal;
}
.squareTileItem .tileImage { .squareTileItem .tileImage {
height: 100px; height: 100px;
width: 35%; width: 35%;
@ -91,14 +104,27 @@
width: 18px; width: 18px;
} }
@media all and (min-width: 600px) {
.smallPosterTileItem {
width: 270px;
display: inline-block;
margin: 3px;
}
}
@media all and (min-width: 750px) { @media all and (min-width: 750px) {
.tileItem { .tileItem {
width: 46%;
display: inline-block; display: inline-block;
margin-left: 3px; margin-left: 3px;
margin-right: 3px; margin-right: 3px;
} }
.backdropTileItem, .posterTileItem, .squareTileItem {
width: 46%;
}
.backdropTileItem .tileImage { .backdropTileItem .tileImage {
height: 88px; height: 88px;
} }
@ -136,7 +162,7 @@
} }
@media all and (min-width: 1000px) { @media all and (min-width: 1000px) {
.tileItem { .backdropTileItem, .posterTileItem, .squareTileItem {
width: 47.5%; width: 47.5%;
} }
@ -170,7 +196,7 @@
height: 160px; height: 160px;
} }
.tileItem { .backdropTileItem, .posterTileItem, .squareTileItem {
width: 31.5%; width: 31.5%;
} }
@ -188,7 +214,7 @@
height: 150px; height: 150px;
} }
.tileItem { .backdropTileItem, .squareTileItem {
width: 31.5%; width: 31.5%;
} }
@ -211,7 +237,7 @@
height: 170px; height: 170px;
} }
.tileItem { .backdropTileItem {
width: 32%; width: 32%;
} }
@ -230,7 +256,7 @@
@media all and (min-width: 1920px) { @media all and (min-width: 1920px) {
.tileItem { .backdropTileItem {
width: 31.5%; width: 31.5%;
} }
@ -256,7 +282,7 @@
} }
@media all and (min-width: 2000px) { @media all and (min-width: 2000px) {
.tileItem { .backdropTileItem {
width: 23.5%; width: 23.5%;
} }
@ -282,7 +308,7 @@
} }
@media all and (min-width: 2200px) { @media all and (min-width: 2200px) {
.tileItem { .backdropTileItem {
width: 24%; width: 24%;
} }
@ -308,7 +334,7 @@
} }
@media all and (min-width: 2540px) { @media all and (min-width: 2540px) {
.tileItem { .backdropTileItem {
width: 18.75%; width: 18.75%;
} }

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

@ -278,7 +278,11 @@
} else { } else {
var shape = "poster"; var shape = "smallPoster";
if (item.Type == "Season") {
shape = "smallBackdrop";
}
var html = LibraryBrowser.getPosterDetailViewHtml({ var html = LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,

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

@ -537,7 +537,7 @@
if (options.showProgressBar) { if (options.showProgressBar) {
html += "<div class='posterItemText posterItemProgress'>"; html += "<div class='posterItemText posterItemProgress'>";
html += LibraryBrowser.getItemProgressBarHtml(item, true) || "&nbsp;"; html += LibraryBrowser.getItemProgressBarHtml(item) || "&nbsp;";
html += "</div>"; html += "</div>";
} }
@ -563,7 +563,7 @@
var date = item.DateCreated; var date = item.DateCreated;
try { 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>"; return "<div class='posterRibbon'>New</div>";
} }
} catch (err) { } catch (err) {
@ -792,7 +792,7 @@
return html; return html;
}, },
getItemProgressBarHtml: function (item, showProgressText) { getItemProgressBarHtml: function (item) {
var html = ''; var html = '';
@ -801,7 +801,13 @@
if (item.PlayedPercentage) { 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; pct = item.PlayedPercentage;
} }
@ -817,10 +823,8 @@
html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">'; html += '<progress title="' + tooltip + '" class="itemProgressBar" min="0" max="100" value="' + pct + '">';
html += '</progress>'; html += '</progress>';
if (showProgressText) {
html += '<span class="itemProgressText">' + tooltip + '</span>'; html += '<span class="itemProgressText">' + tooltip + '</span>';
} }
}
return html; return html;
}, },
@ -1483,7 +1487,7 @@
if (typeof (index) == "undefined") index = 0; 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 += '<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, { html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxwidth: lightboxWidth, maxwidth: lightboxWidth,
@ -1510,28 +1514,35 @@
var role = cast.Role || cast.Type; var role = cast.Role || cast.Type;
html += '<a href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">'; html += '<a class="tileItem smallPosterTileItem" href="itembynamedetails.html?context=' + context + '&person=' + ApiClient.encodeName(cast.Name) + '">';
html += '<div class="posterViewItem posterViewItemWithDualText">';
var imgUrl;
if (cast.PrimaryImageTag) { if (cast.PrimaryImageTag) {
var imgUrl = ApiClient.getPersonImageUrl(cast.Name, { imgUrl = ApiClient.getPersonImageUrl(cast.Name, {
width: 185, width: 185,
tag: cast.PrimaryImageTag, tag: cast.PrimaryImageTag,
type: "primary" type: "primary"
}); });
html += '<img src="' + imgUrl + '" />';
} else { } 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="tileImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
html += '<div class="posterViewItemText">' + role + '</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; return html;
} }