updated mobile and tablet layouts in web client

dashboard-ui/css/librarybrowser.css

@@ -176,8 +176,11 @@
     margin-left: 1em;
 }
 
-.labelPageSize, .selectPageSize {
+
-    display: none;
+@media all and (max-width: 650px) {
+    .labelPageSize, .selectPageSize {
+        display: none!important;
+    }
 }
 
 .galleryImageContainer {
@@ -559,11 +562,11 @@ a.itemTag:hover {
     text-align: center;
 }
 
-.detailImageProgressContainer progress {
+    .detailImageProgressContainer progress {
-    width: 100%;
+        width: 100%;
-    margin: 0 auto;
+        margin: 0 auto;
-    height: 6px;
+        height: 6px;
-}
+    }
 
 @media all and (max-width: 550px) {
 
@@ -696,10 +699,6 @@ a.itemTag:hover {
         .viewControls + .listTopPaging {
             margin-left: 1em;
         }
-
-    .labelPageSize, .selectPageSize {
-        display: inline;
-    }
 }
 
 @media all and (min-width: 750px) {
@@ -846,9 +845,9 @@ a.itemTag:hover {
     background: rgba(82, 181, 75, .8);
 }
 
-.unplayedIndicator div:after {
+    .unplayedIndicator div:after {
-    background-color: transparent !important;
+        background-color: transparent !important;
-}
+    }
 
 .itemProgress {
     vertical-align: top;

dashboard-ui/css/mediaplayer.css

@@ -1,6 +1,6 @@
 /* Now playing bar */
 .nowPlayingBar {
-    padding: 6px 0 6px 0;
+    padding: 6px 0 24px 0;
     border-top: 2px solid green;
 }
 
@@ -17,7 +17,7 @@
     .nowPlayingBar .barBackground {
         border-top: 2px solid green;
         position: absolute;
-        margin: -8px -0.5em !important;
+        margin: -8px -0.5em -26px !important;
         width: 100%;
         height: 100%;
     }

dashboard-ui/css/posteritem.css

@@ -113,11 +113,11 @@
 }
 
 .squarePosterItem {
-    width: 154px;
+    width: 142px;
 }
 
     .squarePosterItem .posterItemImage {
-        height: 150px;
+        height: 138px;
     }
 
 .storeReviewCount {
@@ -126,27 +126,27 @@
 
 
 .backdropPosterItem {
-    width: 292px;
+    width: 142px;
 }
 
     .backdropPosterItem .posterItemImage {
-        height: 162px;
+        height: 77.625px;
     }
 
 .smallBackdropPosterItem {
-    width: 172px;
+    width: 160px;
 }
 
     .smallBackdropPosterItem .posterItemImage {
-        height: 94.5px;
+        height: 87.75px;
     }
 
 .portraitPosterItem {
-    width: 106px;
+    width: 90px;
 }
 
     .portraitPosterItem .posterItemImage {
-        height: 153px;
+        height: 129px;
     }
 
 .posterItemProgress .itemProgressBar {
@@ -155,13 +155,6 @@
     opacity: .6;
 }
 
-@media all and (max-width: 400px) {
-
-    .backdropPosterItem {
-        display: block;
-    }
-}
-
 @media all and (min-width: 540px) {
 
     .backdropPosterItem {
@@ -171,9 +164,6 @@
         .backdropPosterItem .posterItemImage {
             height: 144px;
         }
-}
-
-@media all and (min-width: 540px) {
 
     .smallBackdropPosterItem {
         width: 188px;
@@ -184,6 +174,26 @@
         }
 }
 
+@media all and (min-width: 600px) {
+
+
+    .squarePosterItem {
+        width: 164px;
+    }
+
+        .squarePosterItem .posterItemImage {
+            height: 160px;
+        }
+
+    .portraitPosterItem {
+        width: 122px;
+    }
+
+        .portraitPosterItem .posterItemImage {
+            height: 177px;
+        }
+}
+
 @media all and (min-width: 650px) {
 
     .backdropPosterItem {

dashboard-ui/css/search.css

@@ -59,7 +59,7 @@
 
 .searchHintSecondaryText {
     font-size: 13px;
-    color: #bbb;
+    color: #ddd;
     margin-top: 3px;
     white-space: nowrap;
     text-overflow: ellipsis;

dashboard-ui/css/site.css

@@ -311,8 +311,8 @@ h1 .imageLink {
 
     .dashboardPanelLink:hover {
         background: #f2f2f2;
-           color: #000!important;
+        color: #000!important;
- }
+    }
 
 .selectedDashboardPanelLink {
     background: #2572EB;
@@ -408,7 +408,7 @@ h1 .imageLink {
 
 @media all and (min-width: 900px) {
 
-    .header {
+    .page:not(.wizardPage) .header {
         padding-top: 0;
     }
 }

dashboard-ui/dashboard.html

@@ -24,7 +24,7 @@
                                 <p><strong>A new version of Media Browser Server is available!</strong></p>
                                 <p id="newVersionNumber"></p>
                                 <div id="btnUpdateApplicationContainer">
-                                    <button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b" onclick="DashboardPage.updateApplication();">Update Now</button>
+                                    <button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b">Update Now</button>
                                 </div>
                                 <div id="btnManualUpdateContainer">
                                     Please shutdown the server and <a href="http://www.mediabrowser3.com/download" target="_blank">update manually.</a>

dashboard-ui/scripts/extensions.js

@@ -34,7 +34,7 @@ $.fn.checked = function (value) {
 
 $.fn.buttonEnabled = function(enabled) {
 
-    return this;
+    return enabled ? this.attr('disabled', '').removeAttr('disabled') : this.attr('disabled', 'disabled');
 };
 
 if (!Array.prototype.filter) {

dashboard-ui/scripts/librarybrowser.js

@@ -1108,18 +1108,15 @@
 
         getPlayedIndicatorHtml: function (item) {
 
-            if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet") {
+            if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet" || item.MediaType == "Video") {
                 if (item.RecursiveUnplayedItemCount) {
                     return '<div class="unplayedIndicator">' + item.RecursiveUnplayedItemCount + '</div>';
                 }
-            }
-            
-            if (item.PlayedPercentage == 100) {
-                return '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
-            }
 
-            if (item.MediaType == "Video") {
+                if (item.PlayedPercentage == 100) {
-                
+                    return '<div class="unplayedIndicator"><div class="ui-icon-check ui-btn-icon-notext"></div></div>';
+                }
+
                 var userData = item.UserData || {};
 
                 if (userData.Played) {

dashboard-ui/scripts/musicrecommended.js

@@ -20,7 +20,9 @@
                 items: result.Items,
                 useAverageAspectRatio: true,
                 showUnplayedIndicator: false,
-                shape: "square"
+                shape: "square",
+                showTitle: true,
+                showParentTitle: true
             }));
 
         });

dashboard-ui/scripts/site.js

@@ -117,7 +117,6 @@ var Dashboard = {
     showError: function (message) {
 
         $.mobile.loading('show', {
-            theme: "e",
             text: message,
             textonly: true,
             textVisible: true
@@ -135,7 +134,6 @@ var Dashboard = {
             var message = options;
 
             $.mobile.loading('show', {
-                theme: "b",
                 text: message,
                 textonly: true,
                 textVisible: true

dashboard-ui/tvnextup.html

@@ -17,7 +17,7 @@
         </div>
         <div data-role="content">
             <div class="ehsContent">
-                <br />
+                <h1 class="listHeader">Next Up</h1>
                 <div id="nextUpItems">
                 </div>
             </div>