#186 - Catalog tile display uniformity

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;
+}

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;
-}
+}

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;
+    }

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;
     }
 }
 

dashboard-ui/musicrecommended.html

@@ -15,6 +15,18 @@
                 <a href="musicartists.html" data-role="button">Artists</a>
                 <a href="musicgenres.html" data-role="button">Genres</a>
             </div>
+
+            <div class="ehsContent">
+                <h1 class="listHeader firstListHeader">Latest Albums</h1>
+
+                <div id="recentlyAddedAlbums">
+                </div>
+
+                <h1 class="listHeader">Latest Songs</h1>
+
+                <div id="recentlyAddedSongs">
+                </div>
+            </div>
         </div>
     </div>
 </body>

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: ""
             });
         });

dashboard-ui/scripts/loginpage.js

@@ -60,14 +60,10 @@
 
             var linkId = "lnkUser" + i;
 
-            var background = LibraryBrowser.getMetroColor(user.Id);
-
-            html += '<div class="posterViewItem posterViewItemWithDualText">';
-
             if (user.HasPassword) {
-                html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
+                html += "<a class='posterItem squarePosterItem' id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
             } else {
-                html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' \">";
+                html += "<a class='posterItem squarePosterItem' id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' \">";
             }
 
             if (user.PrimaryImageTag) {
@@ -78,13 +74,18 @@
                     type: "Primary"
                 });
 
-                html += '<img src="' + imgUrl + '" />';
-            } else {
-                html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
+                html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            }
+            else {
+
+                var background = LibraryBrowser.getMetroColor(user.Id);
+
+                html += '<div class="posterItemImage" style="background-color:' + background + ';"></div>';
             }
 
-            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + user.Name + '</div>';
-            html += '<div class="posterViewItemText">';
+            html += '<div class="posterItemText">' + user.Name + '</div>';
+
+            html += '<div class="posterItemText">';
             var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
             if (lastSeen != "") {
                 html += lastSeen;
@@ -95,8 +96,6 @@
             html += '</div>';
 
             html += '</a>';
-
-            html += '</div>';
         }
 
         $('#divUsers', '#loginPage').html(html);

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);

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 += "<div class='posterViewItem'><a href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
+            html += "<a class='posterItem backdropPosterItem' href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
 
             if (plugin.thumbImage) {
-                html += "<img src='" + plugin.thumbImage + "' style='max-width:185px;' />";
+                html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');"></div>';
             } else {
-                html += "<img style='background:#444444;max-width:185px;' src='css/images/items/list/collection.png' />";
+                html += '<div class="posterItemImage defaultPosterItemImage" style="background-image:url(\'css/images/items/list/collection.png\');"></div>';
             }
 
             if (plugin.isPremium) {
@@ -55,59 +55,57 @@
 
             var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name);
 
-            html += "<div class='posterViewItemText' style='background:" + color + "'>";
+            html += "<div class='posterItemText' style='background:" + color + "'>";
 
             var installedPlugin = installedPlugins.filter(function (ip) {
                 return ip.Name == plugin.name;
             })[0];
 
-            html += "<div>";
             if (installedPlugin) {
                 html += plugin.name + " (Installed)";
             } else {
                 html += plugin.name;
             }
-            html += "</div>";
 
             html += "</div>";
 
-            html += "</a></div>";
+            html += "</a>";
 
-	        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