cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

improve cd and poster views

Browse Source
This commit is contained in:
Luke Pulverenti 2013-04-23 22:50:43 -04:00
parent afbda20cad
commit 0595f24311
6 changed files with 209 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
dashboard-ui/css/librarybrowser.css
View File

@ -20,7 +20,7 @@
} }
.libraryPage, .itemListContent { .libraryPage, .itemListContent {
background: #262626!important; background: #494949 url(images/bgflip.png) repeat-x!important;
background-attachment: fixed!important; background-attachment: fixed!important;
} }
@ -211,8 +211,6 @@
} }
.tileImage { .tileImage {
height: 90px;
width: 45%;
display: inline-block; display: inline-block;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -234,7 +232,6 @@
.tileContent { .tileContent {
display: inline-block; display: inline-block;
width: 50%;
padding-left: 10px; padding-left: 10px;
color: #fff; color: #fff;
text-align: left; text-align: left;
@ -242,6 +239,33 @@
overflow: hidden; overflow: hidden;
} }
.backdropTileItem .tileImage {
height: 90px;
width: 45%;
}
.backdropTileItem .tileContent {
width: 50%;
}
.posterTileItem .tileImage {
height: 120px;
width: 30%;
}
.posterTileItem .tileContent {
width: 65%;
}
.cdTileItem .tileImage {
height: 100px;
width: 35%;
}
.cdTileItem .tileContent {
width: 60%;
}
.tileName { .tileName {
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
@ -281,17 +305,33 @@
margin-right: 3px; margin-right: 3px;
} }
.tileImage { .backdropTileItem .tileImage {
height: 88px; height: 88px;
} }
.posterTileItem .tileImage {
height: 120px;
}
.cdTileItem .tileImage {
height: 115px;
}
} }
@media all and (min-width: 850px) { @media all and (min-width: 850px) {
.tileImage { .backdropTileItem .tileImage {
height: 105px; height: 105px;
} }
.posterTileItem .tileImage {
height: 120px;
}
.posterTileItem {
width: 31%;
}
.tileItem .userDataIcons img { .tileItem .userDataIcons img {
height: 18px; height: 18px;
width: 18px; width: 18px;
@ -311,18 +351,42 @@
width: 47.5%; width: 47.5%;
} }
.tileImage { .posterTileItem {
width: 31%;
}
.backdropTileItem .tileImage {
height: 110px; height: 110px;
} }
.posterTileItem .tileImage {
height: 136px;
}
.cdTileItem {
width: 31%;
}
.cdTileItem .tileImage {
height: 105px;
}
} }
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
.tileImage { .backdropTileItem .tileImage {
height: 100px; height: 100px;
} }
.posterTileItem .tileImage {
height: 160px;
}
.tileItem { .tileItem {
width: 31%; width: 31.5%;
}
.cdTileItem .tileImage {
height: 130px;
} }
.scenePosterViewItem img { .scenePosterViewItem img {
@ -331,24 +395,52 @@
} }
@media all and (min-width: 1440px) { @media all and (min-width: 1440px) {
.tileImage { .backdropTileItem .tileImage {
height: 110px; height: 110px;
} }
.posterTileItem .tileImage {
height: 150px;
}
.tileItem { .tileItem {
width: 31.5%; width: 31.5%;
} }
.cdTileItem .tileImage {
height: 155px;
}
.posterTileItem {
width: 23.5%;
}
} }
@media all and (min-width: 1700px) { @media all and (min-width: 1700px) {
.tileImage { .backdropTileItem .tileImage {
height: 132px; height: 132px;
} }
.posterTileItem .tileImage {
height: 170px;
}
.tileItem { .tileItem {
width: 32%; width: 32%;
} }
.posterTileItem {
width: 23.5%;
}
.cdTileItem {
width: 23.5%;
}
.cdTileItem .tileImage {
height: 140px;
}
} }
@ -360,6 +452,22 @@
.tileImage { .tileImage {
height: 155px; height: 155px;
} }
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 160px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 120px;
}
} }
@media all and (min-width: 2000px) { @media all and (min-width: 2000px) {
@ -370,6 +478,22 @@
.tileImage { .tileImage {
height: 117px; height: 117px;
} }
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 160px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 130px;
}
} }
@media all and (min-width: 2200px) { @media all and (min-width: 2200px) {
@ -380,6 +504,22 @@
.tileImage { .tileImage {
height: 145px; height: 145px;
} }
.posterTileItem {
width: 18.8%;
}
.posterTileItem .tileImage {
height: 185px;
}
.cdTileItem {
width: 18.8%;
}
.cdTileItem .tileImage {
height: 140px;
}
} }
@media all and (min-width: 2540px) { @media all and (min-width: 2540px) {
@ -390,6 +530,22 @@
.tileImage { .tileImage {
height: 120px; height: 120px;
} }
.posterTileItem {
width: 15.9%;
}
.posterTileItem .tileImage {
height: 180px;
}
.cdTileItem {
width: 15.8%;
}
.cdTileItem .tileImage {
height: 140px;
}
} }
.itemsContainer { .itemsContainer {

9
dashboard-ui/itembynamedetails.html
View File

@ -82,6 +82,15 @@
<a href="musicgenres.html" data-role="button" class="ui-btn-active">Genres</a> <a href="musicgenres.html" data-role="button" class="ui-btn-active">Genres</a>
</div> </div>
</div> </div>
<div id="artistTabs" class="itemTabs" style="display: none;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="musicrecommended.html" data-role="button">Suggested</a>
<a href="songs.html" data-role="button">Songs</a>
<a href="musicalbums.html" data-role="button">Albums</a>
<a href="musicartists.html" data-role="button" class="ui-btn-active">Artists</a>
<a href="musicgenres.html" data-role="button">Genres</a>
</div>
</div>
<div class="detailPageContent"> <div class="detailPageContent">
<div class="detailPagePrimaryInfo"> <div class="detailPagePrimaryInfo">
<div class="itemImageBlock"> <div class="itemImageBlock">

3
dashboard-ui/scripts/itembynamedetailpage.js
View File

@ -122,6 +122,9 @@
if (context == "music" && item.Type == "Genre") { if (context == "music" && item.Type == "Genre") {
$('#musicGenreTabs', page).show(); $('#musicGenreTabs', page).show();
} }
if (context == "music" && item.Type == "Artist") {
$('#artistTabs', page).show();
}
} }
function renderTabs(page, item) { function renderTabs(page, item) {

33
dashboard-ui/scripts/librarybrowser.js
View File

@ -1,5 +1,10 @@
var LibraryBrowser = (function (window, $) { var LibraryBrowser = (function (window, $) {
function encodeName(name) {
return name;
return encodeURIComponent(name).replace("'", '%27');
}
var defaultBackground = "#999;"; var defaultBackground = "#999;";
return { return {
@ -16,6 +21,10 @@
var items = options.items; var items = options.items;
if (!options.shape) {
options.shape = options.preferBackdrop ? "backdrop" : "poster";
}
var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null; var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
var html = ''; var html = '';
@ -27,7 +36,13 @@
var imgUrl; var imgUrl;
var isDefault = false; var isDefault = false;
html += '<a class="tileItem" href="' + LibraryBrowser.getHref(item, options.context) + '">'; var cssClass = "tileItem";
if (options.shape) {
cssClass += " " + options.shape + "TileItem";
}
html += '<a class="' + cssClass + '" href="' + LibraryBrowser.getHref(item, options.context) + '">';
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
@ -114,7 +129,7 @@
isDefault = true; isDefault = true;
} }
var cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage"; cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";
html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>'; html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>';
@ -272,16 +287,16 @@
return "itemdetails.html?id=" + item.Id; return "itemdetails.html?id=" + item.Id;
} }
if (item.Type == "Genre") { if (item.Type == "Genre") {
return "itembynamedetails.html?genre=" + item.Name + "&context=" + itemByNameContext; return "itembynamedetails.html?genre=" + encodeName(item.Name) + "&context=" + itemByNameContext;
} }
if (item.Type == "Studio") { if (item.Type == "Studio") {
return "itembynamedetails.html?studio=" + item.Name + "&context=" + itemByNameContext; return "itembynamedetails.html?studio=" + encodeName(item.Name) + "&context=" + itemByNameContext;
} }
if (item.Type == "Person") { if (item.Type == "Person") {
return "itembynamedetails.html?person=" + item.Name + "&context=" + itemByNameContext; return "itembynamedetails.html?person=" + encodeName(item.Name) + "&context=" + itemByNameContext;
} }
if (item.Type == "Artist") { if (item.Type == "Artist") {
return "itembynamedetails.html?artist=" + item.Name + "&context=" + itemByNameContext; return "itembynamedetails.html?artist=" + encodeName(item.Name) + "&context=" + itemByNameContext;
} }
return item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id; return item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemdetails.html?id=" + item.Id;
@ -1152,7 +1167,7 @@
html += '&nbsp;&nbsp;/&nbsp;&nbsp;'; html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
} }
html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + item.Studios[i] + '">' + item.Studios[i] + '</a>'; html += '<a href="itembynamedetails.html?context=' + context + '&studio=' + encodeName(item.Studios[i]) + '">' + item.Studios[i] + '</a>';
} }
elem.show().html(html).trigger('create'); elem.show().html(html).trigger('create');
@ -1174,7 +1189,7 @@
html += '&nbsp;&nbsp;/&nbsp;&nbsp;'; html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
} }
html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + item.Genres[i] + '">' + item.Genres[i] + '</a>'; html += '<a href="itembynamedetails.html?context=' + context + '&genre=' + encodeName(item.Genres[i]) + '">' + item.Genres[i] + '</a>';
} }
elem.show().html(html).trigger('create'); elem.show().html(html).trigger('create');
@ -1424,7 +1439,7 @@
var role = cast.Role || cast.Type; var role = cast.Role || cast.Type;
html += '<a href="itembynamedetails.html?context=' + context + '&person=' + cast.Name + '">'; html += '<a href="itembynamedetails.html?context=' + context + '&person=' + encodeName(cast.Name) + '">';
html += '<div class="posterViewItem posterViewItemWithDualText">'; html += '<div class="posterViewItem posterViewItemWithDualText">';
if (cast.PrimaryImageTag) { if (cast.PrimaryImageTag) {

6
dashboard-ui/scripts/movies.js
View File

@ -29,14 +29,16 @@
items: result.Items, items: result.Items,
useAverageAspectRatio: true, useAverageAspectRatio: true,
preferBackdrop: true, preferBackdrop: true,
context: "movies" context: "movies",
shape: "backdrop"
}); });
} }
else if (view == "Poster") { else if (view == "Poster") {
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true, useAverageAspectRatio: true,
context: "movies" context: "movies",
shape: "poster"
}); });
} }

3
dashboard-ui/scripts/musicalbums.js
View File

@ -25,7 +25,8 @@
html += LibraryBrowser.getPosterDetailViewHtml({ html += LibraryBrowser.getPosterDetailViewHtml({
items: result.Items, items: result.Items,
useAverageAspectRatio: true, useAverageAspectRatio: true,
context: "music" context: "music",
shape: "cd"
}); });
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);