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

music progress and search placeholder

This commit is contained in:
Luke Pulverenti 2013-04-25 23:31:10 -04:00
parent 69b9c9c379
commit 6f1e4d2863
9 changed files with 114 additions and 57 deletions

View file

@ -1,13 +1,16 @@
.detailTable {
border-collapse: collapse;
border-spacing: 0;
.detailTableContainer {
width: 100%;
max-width: 1200px;
text-align: left;
text-align: center;
margin: 0 auto;
}
.centeredDetailTable {
margin: auto;
.detailTable {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
width: 100%;
margin: 0 auto;
}
.stretchedDetailTable {
@ -36,6 +39,7 @@
font-weight: normal;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
.detailTable .imgUserItemRating {

View file

@ -293,7 +293,7 @@
}
.libraryTabs .ui-btn-inner {
padding: 1em 20px!important;
padding: .5em 15px!important;
}
}

View file

@ -125,6 +125,15 @@ pre, textarea.pre {
right: 10px;
}
.headerSearch {
display: none;
margin-right: 2em;
}
.headerSearch input {
width: 200px;
}
.header .imageLink {
display: inline-block;
}
@ -265,6 +274,10 @@ form, .readOnlyContent {
@media all and (min-width: 650px) {
.headerSearch {
display: inline-block;
}
.imgLogoIcon {
height: 50px;
}

View file

@ -112,9 +112,16 @@
<p id="itemLinks"></p>
</div>
</div>
</div>
<div id="itemTabs" style="margin-top: 20px; text-align: center;"></div>
<div>
<div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Gallery</h3>
<div id="galleryContent"></div>
</div>
</div>
<div id="itemTabs" style="text-align: center;"></div>
</div>
<div class="viewSettings">
<div class="viewControls">

View file

@ -261,13 +261,13 @@
ParentId: getParameterByName('id'),
SortBy: "SortName",
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData"
Fields: "PrimaryImageAspectRatio,ItemCounts,DisplayMediaType,DateCreated,UserData,AudioInfo"
}).done(function (result) {
if (item.Type == "MusicAlbum") {
$('#itemSongs', page).html(LibraryBrowser.getSongTableHtml(result.Items)).trigger('create');
$('#itemSongs', page).html(LibraryBrowser.getSongTableHtml(result.Items, { showArtist: true })).trigger('create');
} else {
var html = LibraryBrowser.getPosterDetailViewHtml({

View file

@ -206,6 +206,13 @@
});
}
function renderGallery(page, item) {
var html = LibraryBrowser.getGalleryHtml(item);
$('#galleryContent', page).html(html).trigger('create');
}
function bindRadioEvents(page) {
$("#radioMovies", page).on("click", function () {
@ -293,6 +300,13 @@
renderUserDataIcons(page, item);
LibraryBrowser.renderLinks($('#itemLinks', page), item);
if (LibraryBrowser.shouldDisplayGallery(item)) {
$('#galleryCollapsible', page).show();
renderGallery(page, item);
} else {
$('#galleryCollapsible', page).hide();
}
if (item.Type == "Person" && item.PremiereDate) {
try {
@ -348,7 +362,7 @@
else if (currentItem.Type == "Artist") {
query.Artists = currentItem.Name;
}
}
}
function loadItems(page, options) {

View file

@ -202,13 +202,9 @@
var html = '';
var cssClass = options.center ? "centeredDetailTable detailTable" : "detailTable";
var cssClass = "detailTable";
if (options.strech) {
cssClass += " stretchedDetailTable";
}
html += '<table class="' + cssClass + '">';
html += '<div class="detailTableContainer"><table class="' + cssClass + '">';
html += '<tr>';
@ -220,7 +216,7 @@
html += '<th>Album</th>';
}
if (options.showArtist) {
html += '<th>Artists</th>';
html += '<th>Artist</th>';
}
html += '<th>Duration</th>';
@ -254,8 +250,11 @@
if (options.showArtist) {
if (item.Artist) {
html += '<td><a href="itembynamedetails.html?context=music&artist=' + item.Artist + '">' + item.Artist + '</a></td>';
if (item.Artists && item.Artists.length) {
var artist = item.Artists[0];
html += '<td><a href="itembynamedetails.html?context=music&artist=' + artist + '">' + artist + '</a></td>';
} else {
html += '<td></td>';
}
@ -272,7 +271,7 @@
html += '</tr>';
}
html += '</table>';
html += '</table></div>';
return html;
},
@ -445,7 +444,7 @@
if (options.showParentTitle) {
html += "<div class='" + cssclass + "'>";
html += item.SeriesName || item.Album || item.Artist || "&nbsp;";
html += item.SeriesName || item.Album || "&nbsp;";
html += "</div>";
}
@ -1368,36 +1367,36 @@
if (imageTags.Banner) {
html += LibraryBrowser.createGalleryImage(item.Id, "Banner", imageTags.Banner);
html += LibraryBrowser.createGalleryImage(item, "Banner", imageTags.Banner);
}
if (imageTags.Logo) {
html += LibraryBrowser.createGalleryImage(item.Id, "Logo", imageTags.Logo);
html += LibraryBrowser.createGalleryImage(item, "Logo", imageTags.Logo);
}
if (imageTags.Thumb) {
html += LibraryBrowser.createGalleryImage(item.Id, "Thumb", imageTags.Thumb);
html += LibraryBrowser.createGalleryImage(item, "Thumb", imageTags.Thumb);
}
if (imageTags.Art) {
html += LibraryBrowser.createGalleryImage(item.Id, "Art", imageTags.Art);
html += LibraryBrowser.createGalleryImage(item, "Art", imageTags.Art);
}
if (imageTags.Menu) {
html += LibraryBrowser.createGalleryImage(item.Id, "Menu", imageTags.Menu);
html += LibraryBrowser.createGalleryImage(item, "Menu", imageTags.Menu);
}
if (imageTags.Box) {
html += LibraryBrowser.createGalleryImage(item.Id, "Box", imageTags.Box);
html += LibraryBrowser.createGalleryImage(item, "Box", imageTags.Box);
}
if (item.BackdropImageTags) {
for (i = 0, length = item.BackdropImageTags.length; i < length; i++) {
html += LibraryBrowser.createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[i], i);
html += LibraryBrowser.createGalleryImage(item, "Backdrop", item.BackdropImageTags[i], i);
}
}
@ -1405,18 +1404,18 @@
if (item.ScreenshotImageTags) {
for (i = 0, length = item.ScreenshotImageTags.length; i < length; i++) {
html += LibraryBrowser.createGalleryImage(item.Id, "Screenshot", item.ScreenshotImageTags[i], i);
html += LibraryBrowser.createGalleryImage(item, "Screenshot", item.ScreenshotImageTags[i], i);
}
}
if (imageTags.Disc) {
html += LibraryBrowser.createGalleryImage(item.Id, "Disc", imageTags.Disc);
html += LibraryBrowser.createGalleryImage(item, "Disc", imageTags.Disc);
}
return html;
},
createGalleryImage: function (itemId, type, tag, index) {
createGalleryImage: function (item, type, tag, index) {
var downloadWidth = 400;
var lightboxWidth = 800;
@ -1426,21 +1425,19 @@
html += '<div class="posterViewItem" style="padding-bottom:0px;">';
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
html += '<img class="galleryImage" src="' + ApiClient.getImageUrl(itemId, {
type: type,
maxwidth: downloadWidth,
tag: tag,
index: index
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxwidth: downloadWidth,
tag: tag
}) + '" />';
html += '</div>';
html += '<div class="galleryPopup" id="pop_' + index + '_' + tag + '" data-role="popup" data-theme="d" data-corners="false" data-overlay-theme="a">';
html += '<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>';
html += '<img class="" src="' + ApiClient.getImageUrl(itemId, {
type: type,
html += '<img class="" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxwidth: lightboxWidth,
tag: tag,
index: index
tag: tag
}) + '" />';
html += '</div>';

View file

@ -695,6 +695,9 @@ var Dashboard = {
headerHtml += '<div class="headerButtons">';
if (user && !page.hasClass('wizardPage')) {
headerHtml += Dashboard.getSearchHtml();
headerHtml += '<a class="imageLink btnCurrentUser" href="#" onclick="Dashboard.showUserFlyout();"><span class="currentUsername">' + user.Name + '</span>';
if (user.PrimaryImageTag) {
@ -721,6 +724,8 @@ var Dashboard = {
header.append(headerHtml);
$('#searchForm', header).on("submit", Dashboard.onSearchSubmit);
Dashboard.getPluginSecurityInfo().done(function (pluginSecurityInfo) {
if (pluginSecurityInfo.IsMBSupporter) {
$('<a class="imageLink" href="supporter.html"><img src="css/images/supporter/supporterbadge.png" /></a>').insertBefore('.btnTools', header);
@ -728,6 +733,24 @@ var Dashboard = {
});
},
onSearchSubmit: function() {
Dashboard.alert('Coming soon.');
return false;
},
getSearchHtml: function() {
var html = '<div class="headerSearch"><form id="searchForm" name="searchForm">';
html += '<input type="text" />';
html += '</form></div>';
return html;
},
ensureToolsMenu: function (page) {
if (!page.hasClass('type-interior')) {
@ -1087,16 +1110,7 @@ $(function () {
Dashboard.jQueryMobileInit();
$(document).on('pagebeforeshow', ".page", function () {
Dashboard.refreshSystemInfoFromServer();
var page = $(this);
Dashboard.ensureHeader(page);
Dashboard.ensurePageTitle(page);
}).on('pageinit', ".page", function () {
$(document).on('pageinit', ".page", function () {
var page = $(this);
@ -1120,4 +1134,14 @@ $(document).on('pagebeforeshow', ".page", function () {
}
});
}
}).on('pagebeforeshow', ".page", function () {
Dashboard.refreshSystemInfoFromServer();
var page = $(this);
Dashboard.ensureHeader(page);
Dashboard.ensurePageTitle(page);
});

View file

@ -24,9 +24,7 @@
html += LibraryBrowser.getSongTableHtml(result.Items, {
showAlbum: true,
showArtist: true,
center: true,
strech: true
showArtist: true
});
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);