make metro styled tiles look and act the same

MediaBrowser.WebDashboard/Html/css/site.css

@@ -425,7 +425,6 @@ form, .readOnlyContent {
     font-size: 15px;
     padding: 0;
     position: relative;
-    padding-bottom: 28px;
 }
 
     .posterViewItem a {
@@ -436,7 +435,7 @@ form, .readOnlyContent {
 
     .posterViewItem img {
         max-width: 155px;
-        max-height: 148px;
+        max-height: 155px;
         vertical-align: bottom;
     }
 
@@ -454,19 +453,25 @@ form, .readOnlyContent {
 .posterViewItemText {
     text-overflow: ellipsis;
     overflow: hidden;
-    text-wrap: none;
     white-space: nowrap;
     margin: 0;
-    padding: 4px 2px 0;
-    position: absolute;
+    padding: 4px 0px 0;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 24px;
     background: #181818;
     text-shadow: none;
+    max-width: 155px;
 }
 
+    .posterViewItemText div{
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        margin: 0px 4px;
+        height: 24px;
+    }
+
 .posterViewItem:hover, .userItem:hover {
     -moz-box-shadow: 0 0 20px 3px #2572EB;
     -webkit-box-shadow: 0 0 20px 3px #2572EB;
@@ -477,11 +482,11 @@ form, .readOnlyContent {
 
     .posterViewItem {
         font-size: 16px;
-        padding-bottom: 29px;
     }
 
     .posterViewItemText {
         padding-top: 5px;
+        max-width: 190px;
     }
 
     .posterViewItem img {
@@ -496,29 +501,37 @@ form, .readOnlyContent {
         font-size: 17px;
     }
 
-        .posterViewItem img {
-            max-width: 280px;
-            max-height: 250px;
-        }
+    .posterViewItem img {
+        max-width: 280px;
+        max-height: 280px;
+    }
+
+    .posterViewItemText {
+        max-width: 280px;
+    }
 }
 
 @media all and (min-width: 1920px) {
 
     .posterViewItem {
         font-size: 19px;
-        padding-bottom: 33px;
     }
 
-    .posterViewItemText {
+    .posterViewItemText div{
         height: 28px;
     }
 
     .posterViewItem img {
         max-width: 352px;
-        max-height: 300px;
+        max-height: 352px;
+    }
+
+    .posterViewItemText {
+        max-width: 352px;
     }
 }
 
+/*DEPRECATED userItem classes
 .userItem {
     display: inline-block;
     margin: 5px;
@@ -620,7 +633,8 @@ form, .readOnlyContent {
     .userItemHeader {
         font-size: 40px;
     }
-}
+}*/
+/*DEPRECATED userItem classes END
 
 /* Startup wizard */
 .wizardPage {

MediaBrowser.WebDashboard/Html/login.html

@@ -7,7 +7,7 @@
     <div id="loginPage" data-role="page" class="page standalonePage">
 
         <div data-role="content">
-            <div id="divUsers" style="margin: 50px 20px 20px; text-align: center;"></div>
+            <div id="divUsers" style="margin: 50px 0px 20px; text-align: center;"></div>
         </div>
 
         <div data-role="popup" id="popupLogin" class="ui-corner-all popup">

MediaBrowser.WebDashboard/Html/scripts/LoginPage.js

@@ -23,8 +23,7 @@
 
         return ApiClient.getUserImageUrl(user.Id, {
             width: 240,
-            tag: user.PrimaryImageTag,
-            type: "Primary"
+            tag: user.PrimaryImageTag
         });
     },
 
@@ -62,34 +61,43 @@
 
             var background = Dashboard.getRandomMetroColor();
 
+            html += '<div class="posterViewItem">';
+
             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;' class='userItem'>";
+                html += "<a 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);' class='userItem'>";
+                html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#' onclick='LoginPage.authenticateUserLink(this);' \">";
             }
 
             if (user.PrimaryImageTag) {
 
                 var imgUrl = ApiClient.getUserImageUrl(user.Id, {
                     width: 500,
-                    tag: user.PrimaryImageTag,
-                    type: "Primary"
+                    tag: user.PrimaryImageTag
                 });
 
-                html += '<img class="userItemImage" src="' + imgUrl + '" />';
+                html += '<img src="' + imgUrl + '" />';
             } else {
-                html += '<img class="userItemImage" src="css/images/logindefault.png" style="background:' + background + ';" />';
+                html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
             }
 
-            html += '<div class="userItemContent" style="background:' + background + ';">';
+            html += '<div class="posterViewItemText">';
 
-            html += '<div class="userItemContentInner">';
-            html += '<p class="userItemHeader">' + user.Name + '</p>';
-            html += '<p>' + LoginPage.getLastSeenText(user.LastActivityDate) + '</p>';
+            html += '<div>' + user.Name + '</div>';
+            html += '<div>';
+            var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
+            if (lastSeen != "") {
+                html += lastSeen;
+            }
+            else {
+                html += "&nbsp;";
+            }
             html += '</div>';
 
             html += '</div>';
             html += '</a>';
+
+            html += '</div>';
         }
 
         $('#divUsers', '#loginPage').html(html);

MediaBrowser.WebDashboard/Html/scripts/PluginCatalogPage.js

@@ -49,21 +49,23 @@
             if (plugin.isPremium) {
                 html += "<div class='premiumBanner'><img src='css/images/premiumflag.png' /></div>";
             }
-            
+
             var color = plugin.tileColor || Dashboard.getRandomMetroColor();
-            
+
             html += "<div class='posterViewItemText' 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>";
 

MediaBrowser.WebDashboard/Html/scripts/site.js

@@ -444,7 +444,9 @@ var Dashboard = {
             }
 
             if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {
-                html += "<div class='posterViewItemText'>" + item.Name + "</div>";
+                html += "<div class='posterViewItemText'>";
+                html += "<div>" + item.Name + "</div>";
+                html += "</div>"
             }
 
             html += "</a></div>";
@@ -472,8 +474,7 @@ var Dashboard = {
             var imageUrl = user.PrimaryImageTag ? ApiClient.getUserImageUrl(user.Id, {
 
                 height: 400,
-                tag: user.PrimaryImageTag,
-                type: "Primary"
+                tag: user.PrimaryImageTag
 
             }) : "css/images/userFlyoutDefault.png";
 
@@ -565,18 +566,7 @@ var Dashboard = {
 
         Dashboard.showLoadingMsg();
 
-        var promise;
-        
-        if (path === "Network") {
-            promise = ApiClient.getNetworkComputers();
-        }
-        else if (path) {
-            promise = ApiClient.getDirectoryContents(path, { includeDirectories: true });
-        } else {
-            promise = ApiClient.getDrives();
-        }
-        
-        promise.done(function (folders) {
+        ApiClient.getDirectoryContents(path, { includeDirectories: true }).done(function (folders) {
 
             $('#txtDirectoryPickerPath', page).val(path || "");
 
@@ -693,8 +683,7 @@ var Dashboard = {
 
                 var url = ApiClient.getUserImageUrl(user.Id, {
                     width: 225,
-                    tag: user.PrimaryImageTag,
-                    type: "Primary"
+                    tag: user.PrimaryImageTag
                 });
 
                 headerHtml += '<img src="' + url + '" />';
@@ -1108,7 +1097,7 @@ var Dashboard = {
     setPageTitle: function (title) {
 
         $('.pageTitle', $.mobile.activePage).html(title);
-        
+
         if (title) {
             document.title = title;
         }
@@ -1142,7 +1131,7 @@ $(function () {
     footerHtml += '</div>';
 
     footerHtml += '<div id="footerNotifications"></div>';
-    
+
     footerHtml += '</div>';