From 322cc9ebe974a09c4aca6c9114bed18719e85727 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Thu, 25 Apr 2013 19:28:01 -0400 Subject: [PATCH] #186 - Catalog tile display uniformity --- dashboard-ui/css/detailtable.css | 48 ++++++++++++ dashboard-ui/css/librarybrowser.css | 53 +------------ dashboard-ui/css/posteritem.css | 61 +++++++++++++++ dashboard-ui/css/site.css | 12 ++- dashboard-ui/musicrecommended.html | 12 +++ dashboard-ui/scripts/itembynamedetailpage.js | 4 +- dashboard-ui/scripts/loginpage.js | 25 +++--- dashboard-ui/scripts/musicrecommended.js | 50 ++++++++++++ dashboard-ui/scripts/plugincatalogpage.js | 80 ++++++++++---------- 9 files changed, 231 insertions(+), 114 deletions(-) create mode 100644 dashboard-ui/css/detailtable.css create mode 100644 dashboard-ui/css/posteritem.css create mode 100644 dashboard-ui/scripts/musicrecommended.js diff --git a/dashboard-ui/css/detailtable.css b/dashboard-ui/css/detailtable.css new file mode 100644 index 000000000..9567146ba --- /dev/null +++ b/dashboard-ui/css/detailtable.css @@ -0,0 +1,48 @@ +.detailTable { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + max-width: 1200px; + text-align: left; +} + +.centeredDetailTable { + margin: auto; +} + +.stretchedDetailTable { + width: 100%; +} + +.detailTable a { + text-decoration: none; +} + + .detailTable a:hover { + text-decoration: underline; + } + +.detailTable td { + border-spacing: 0; + border-top: 1px solid #444; + border-bottom: 1px solid #444; + padding: 3px 5px; +} + +.detailTable th { + border-spacing: 0; + border-bottom: 1px solid #444; + padding: 5px; + font-weight: normal; + text-align: left; + vertical-align: top; +} + +.detailTable .imgUserItemRating { + width: 18px; + height: 18px; +} + +.userDataCell { + width: 140px; +} diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 6fb16886d..5eb5aab14 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -33,7 +33,7 @@ } .listHeader { - margin-top: 1em; + margin-top: .5em; margin-bottom: 5px; } @@ -554,53 +554,4 @@ .itemsContainer { text-align: center; -} - -.detailTable { - border-collapse: collapse; - border-spacing: 0; - width: 100%; - max-width: 1200px; - text-align: left; -} - -.centeredDetailTable { - margin: auto; -} - -.stretchedDetailTable { - width: 100%; -} - -.detailTable a { - text-decoration: none; -} - -.detailTable a:hover { - text-decoration: underline; -} - -.detailTable td { - border-spacing: 0; - border-top: 1px solid #444; - border-bottom: 1px solid #444; - padding: 3px 5px; -} - -.detailTable th { - border-spacing: 0; - border-bottom: 1px solid #444; - padding: 5px; - font-weight: normal; - text-align: left; - vertical-align: top; -} - -.detailTable .imgUserItemRating { - width: 18px; - height: 18px; -} - -.userDataCell { - width: 140px; -} +} \ No newline at end of file diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css new file mode 100644 index 000000000..0b511affd --- /dev/null +++ b/dashboard-ui/css/posteritem.css @@ -0,0 +1,61 @@ +.posterItem { + margin: 3px; + text-shadow: none; + font-weight: normal!important; + display: inline-block; + font-size: 14px; + position: relative; + color: #fff; + text-decoration: none; + text-align: left; + overflow: hidden; +} + + .posterItem:hover { + -moz-box-shadow: 0 0 20px 3px #2572EB; + -webkit-box-shadow: 0 0 20px 3px #2572EB; + box-shadow: 0 0 20px 3px #2572EB; + } + +.posterItemImage { + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + overflow: hidden; +} + +.defaultPosterItemImage { + background-color: #999; +} + +.posterItemText { + text-overflow: ellipsis; + overflow: hidden; + text-wrap: none; + white-space: nowrap; + padding: 4px 5px 4px; + background: #181818; + text-shadow: none; +} + + .posterItemText + .posterItemText { + padding-top: 2px; + } + +.squarePosterItem { + width: 200px; +} + + .squarePosterItem .posterItemImage { + height: 200px; + background-size: 200px auto; + } + +.backdropPosterItem { + width: 160px; +} + + .backdropPosterItem .posterItemImage { + height: 90px; + background-size: 160px auto; + } diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index a0024e13f..bf96fd99d 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -438,10 +438,8 @@ form, .readOnlyContent { text-align: right; top: 0; right: 0; - width: 75px!important; - height: 75px!important; - max-width: 75px!important; - max-height: 75px!important; + width: 60px; + height: 60px; } .posterViewItemText { @@ -481,7 +479,7 @@ form, .readOnlyContent { .posterViewItem img { max-width: 190px; - max-height: 160px; + max-height: 130px; } } @@ -493,7 +491,7 @@ form, .readOnlyContent { .posterViewItem img { max-width: 270px; - max-height: 220px; + max-height: 160px; } } @@ -518,7 +516,7 @@ form, .readOnlyContent { .posterViewItem img { max-width: 310px; - max-height: 250px; + max-height: 210px; } } diff --git a/dashboard-ui/musicrecommended.html b/dashboard-ui/musicrecommended.html index 88f09160b..885b7b210 100644 --- a/dashboard-ui/musicrecommended.html +++ b/dashboard-ui/musicrecommended.html @@ -15,6 +15,18 @@ Artists Genres + +
+

Latest Albums

+ +
+
+ +

Latest Songs

+ +
+
+
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js index 90c6c1d2b..0d287999b 100644 --- a/dashboard-ui/scripts/itembynamedetailpage.js +++ b/dashboard-ui/scripts/itembynamedetailpage.js @@ -270,7 +270,7 @@ loadItems(page, { MediaTypes: "", IncludeItemTypes: "MusicAlbum", - PersonTypes: "Artist", + PersonTypes: "", Artists: "" }); }); @@ -280,7 +280,7 @@ loadItems(page, { MediaTypes: "", IncludeItemTypes: "Audio", - PersonTypes: "Artist", + PersonTypes: "", Artists: "" }); }); diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js index d9071453f..cfaa9b0cd 100644 --- a/dashboard-ui/scripts/loginpage.js +++ b/dashboard-ui/scripts/loginpage.js @@ -60,14 +60,10 @@ var linkId = "lnkUser" + i; - var background = LibraryBrowser.getMetroColor(user.Id); - - html += '
'; - if (user.HasPassword) { - html += ""; + html += ""; } else { - html += ""; + html += ""; } if (user.PrimaryImageTag) { @@ -78,13 +74,18 @@ type: "Primary" }); - html += ''; - } else { - html += ''; + html += '
'; + } + else { + + var background = LibraryBrowser.getMetroColor(user.Id); + + html += '
'; } - html += '
' + user.Name + '
'; - html += '
'; + html += '
' + user.Name + '
'; + + html += '
'; var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate); if (lastSeen != "") { html += lastSeen; @@ -95,8 +96,6 @@ html += '
'; html += ''; - - html += '
'; } $('#divUsers', '#loginPage').html(html); diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js new file mode 100644 index 000000000..218367b72 --- /dev/null +++ b/dashboard-ui/scripts/musicrecommended.js @@ -0,0 +1,50 @@ +(function ($, document) { + + $(document).on('pagebeforeshow', "#musicRecommendedPage", function () { + + var page = this; + + var options = { + + SortBy: "DateCreated", + SortOrder: "Descending", + IncludeItemTypes: "MusicAlbum", + Limit: 5, + Recursive: true, + Fields: "PrimaryImageAspectRatio" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + $('#recentlyAddedAlbums', page).html(LibraryBrowser.getPosterViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + showNewIndicator: false + })); + + }); + + options = { + + SortBy: "DateCreated", + SortOrder: "Descending", + IncludeItemTypes: "Audio", + Limit: 5, + Recursive: true, + Fields: "PrimaryImageAspectRatio" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + $('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + showNewIndicator: false + })); + + }); + + }); + + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js index 4db59e400..d5abd42fb 100644 --- a/dashboard-ui/scripts/plugincatalogpage.js +++ b/dashboard-ui/scripts/plugincatalogpage.js @@ -2,7 +2,7 @@ // The base query options var query = { - TargetSystems: 'Server,MBTheater,MBClassic' + TargetSystems: 'Server,MBTheater,MBClassic' }; function reloadList(page) { @@ -21,7 +21,7 @@ function populateList(page, availablePlugins, installedPlugins) { - Dashboard.showLoadingMsg(); + Dashboard.showLoadingMsg(); availablePlugins = availablePlugins.filter(function (p) { return p.type == "UserInstalled"; @@ -30,19 +30,19 @@ }); var serverhtml = ''; - var theatrehtml = ''; - var classichtml = ""; + var theatrehtml = ''; + var classichtml = ""; for (var i = 0, length = availablePlugins.length; i < length; i++) { - var html = ''; + var html = ''; var plugin = availablePlugins[i]; - html += "
"; + html += ""; if (plugin.thumbImage) { - html += ""; + html += '
'; } else { - html += ""; + html += '
'; } if (plugin.isPremium) { @@ -55,59 +55,57 @@ var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name); - html += "
"; + html += "
"; var installedPlugin = installedPlugins.filter(function (ip) { return ip.Name == plugin.name; })[0]; - html += "
"; if (installedPlugin) { html += plugin.name + " (Installed)"; } else { html += plugin.name; } - html += "
"; html += "
"; - html += "
"; + html += ""; - if (plugin.targetSystem == "Server") { - serverhtml += html; - }else if (plugin.targetSystem == "MBTheater") { - theatrehtml += html; - }else if (plugin.targetSystem == "MBClassic") { - classichtml += html; - } + if (plugin.targetSystem == "Server") { + serverhtml += html; + } else if (plugin.targetSystem == "MBTheater") { + theatrehtml += html; + } else if (plugin.targetSystem == "MBClassic") { + classichtml += html; + } } - if (!availablePlugins.length) { - $("#noPlugins", page).hide(); - } + if (!availablePlugins.length) { + $("#noPlugins", page).hide(); + } - $('#pluginServerTiles', page).html(serverhtml); - $('#pluginTheatreTiles', page).html(theatrehtml); - $('#pluginClassicTiles', page).html(classichtml); + $('#pluginServerTiles', page).html(serverhtml); + $('#pluginTheatreTiles', page).html(theatrehtml); + $('#pluginClassicTiles', page).html(classichtml); - if (serverhtml) { + if (serverhtml) { $('#pluginServerCollapsible', page).show(); - }else { - $('#pluginServerCollapsible', page).hide(); - } + } else { + $('#pluginServerCollapsible', page).hide(); + } - if (theatrehtml) { - $('#pluginTheatreCollapsible', page).show(); - }else { - $('#pluginTheatreCollapsible', page).hide(); - } + if (theatrehtml) { + $('#pluginTheatreCollapsible', page).show(); + } else { + $('#pluginTheatreCollapsible', page).hide(); + } - if (classichtml) { - $('#pluginClassicCollapsible', page).show(); - }else { - $('#pluginClassicCollapsible', page).hide(); - } + if (classichtml) { + $('#pluginClassicCollapsible', page).show(); + } else { + $('#pluginClassicCollapsible', page).hide(); + } Dashboard.hideLoadingMsg(); } @@ -117,7 +115,7 @@ var page = this; - reloadList(page); + reloadList(page); $('.chkPremiumFilter', page).on('change', function () { @@ -130,7 +128,7 @@ }); }).on('pageshow', "#pluginCatalogPage", function () { - + var page = this; // Reset form values using the last used query