update notification styles

dashboard-ui/channelitems.html

@@ -39,29 +39,39 @@
                         <strong>${HeaderSortBy}</strong>
                     </legend>
 
-                    <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioDefaultSort" value="on" checked="checked" data-sortby="Default" data-mini="true">
+                    <input class="radioSortBy defaultSort" type="radio" name="radioSortBy" id="radioDefaultSort" value="on" checked="checked" data-sortby="" data-mini="true">
                     <label for="radioDefaultSort">${OptionDefaultSort}</label>
 
+                    <div class="sortbyName">
                         <input class="radioSortBy" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
                         <label for="radioSortName">${OptionNameSort}</label>
+                    </div>
 
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating,SortName" data-mini="true">
+                    <div class="sortbyCommunityRating">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioCommunityRating" value="off" data-sortby="CommunityRating" data-mini="true">
                         <label for="radioCommunityRating">${OptionCommunityRating}</label>
+                    </div>
 
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,SortName" data-mini="true">
+                    <div class="sortbyDateCreated">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated" data-mini="true">
                         <label for="radioDateCreated">${OptionDateAdded}</label>
+                    </div>
 
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
+                    <div class="sortbyPlayCount">
-                    <label for="radioDatePlayed">${OptionDatePlayed}</label>
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount" data-mini="true">
-
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,SortName" data-mini="true">
                         <label for="radioPlayCount">${OptionPlayCount}</label>
+                    </div>
 
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,SortName" data-mini="true">
+                    <div class="sortbyPremiereDate">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate" data-mini="true">
                         <label for="radioPremiereDate">${OptionReleaseDate}</label>
+                    </div>
 
-                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime,SortName" data-mini="true">
+                    <div class="sortbyRuntime">
+                        <input class="radioSortBy" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
                         <label for="radioRuntime">${OptionRuntime}</label>
+                    </div>
+
                 </fieldset>
                 <div class="sortOrderToggle">
                     <fieldset data-role="controlgroup">

dashboard-ui/css/librarymenu.css

@@ -188,7 +188,7 @@
 
 .tvshowsViewMenu {
     background-image: url(images/items/folders/tv.png);
-    background-position: 16px 8px;
+    background-position: 16px center;
 }
 
 .moviesViewMenu {

dashboard-ui/css/posteritem.css

@@ -133,7 +133,7 @@
 }
 
     .myLibraryPosterItem .posterItemImage {
-        height: 36px;
+        height: 34px;
         background-position: 12px center;
         background-size: 20px 20px;
         background-color: rgba(51, 136, 204, 0.5);
@@ -429,3 +429,11 @@
             height: 167.625px;
         }
 }
+
+
+@media all and (min-width: 1600px) {
+
+    .myLibraryPosterItem {
+        width: 16%;
+    }
+}

dashboard-ui/index.html

@@ -4,7 +4,13 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage noSecondaryNavPage backdropPage" data-theme="b" data-backdroptype="movie,series,game,book">
+    <div id="indexPage" data-role="page" class="page type-home libraryPage allLibraryPage backdropPage" data-theme="b" data-backdroptype="movie,series,game,book">
+
+        <div class="libraryViewNav scopedLibraryViewNav">
+            <a href="channels.html" class="ui-btn-active">Home</a>
+            <a href="channels.html">Next Up</a>
+            <a href="channels.html">Favorites</a>
+        </div>
 
         <div data-role="content">
 

dashboard-ui/notificationlist.html

@@ -22,7 +22,7 @@
                     <div class="notificationsList" style="margin-top: 1em;">
                     </div>
                     
-                    <p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">${ButtonMarkRead}</button></p>
+                    <p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true">${ButtonMarkRead}</button></p>
 
                 </div>
             </div>

dashboard-ui/scripts/channelitems.js

@@ -1,15 +1,31 @@
 (function ($, document) {
 
+    var maxPageSize;
+    
     // The base query options
     var query = {
 
-        SortBy: "SortName",
+        SortBy: "",
         SortOrder: "Ascending",
         StartIndex: 0
     };
     
+    function getPageSizes() {
+
+        var sizes = [];
+
+        if (!maxPageSize || maxPageSize >= 10) sizes.push(10);
+        if (!maxPageSize || maxPageSize >= 20) sizes.push(20);
+        if (!maxPageSize || maxPageSize >= 30) sizes.push(30);
+        if (!maxPageSize || maxPageSize >= 40) sizes.push(40);
+        if (!maxPageSize || maxPageSize >= 50) sizes.push(50);
+        if (!maxPageSize || maxPageSize >= 100) sizes.push(100);
+        
+        return sizes;
+    }
+
     function getSavedQueryId() {
-        return 'channels-' + getParameterByName('id') + (getParameterByName('folderId') || '');
+        return 'channels-1-' + getParameterByName('id') + (getParameterByName('folderId') || '');
     }
 
     function showLoadingMessage(page) {
@@ -41,9 +57,37 @@
             } else {
                 $('.sortOrderToggle', page).hide();
             }
+
+            maxPageSize = features.MaxPageSize;
+
+            updateSortOrders(page, features.DefaultSortFields);
+            
+            reloadItems(page);
         });
     }
 
+    function updateSortOrders(page, fields) {
+
+        updateSortOrder(page, fields, 'Name');
+        updateSortOrder(page, fields, 'CommunityRating');
+        updateSortOrder(page, fields, 'PremiereDate');
+        updateSortOrder(page, fields, 'PlayCount');
+        updateSortOrder(page, fields, 'Runtime');
+        updateSortOrder(page, fields, 'DateCreated');
+    }
+
+    function updateSortOrder(page, fields, name) {
+        
+        var cssClass = "sortby" + name;
+
+        if (fields.indexOf(name) == -1) {
+
+            $('.' + cssClass, page).hide();
+        } else {
+            $('.' + cssClass, page).show();
+        }
+    }
+
     function reloadItems(page) {
 
         showLoadingMessage(page);
@@ -71,7 +115,7 @@
         }
 
         query.folderId = folderId;
-        query.Limit = 50;
+        
         $.getJSON(ApiClient.getUrl("Channels/" + channelId + "/Items", query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
@@ -79,7 +123,7 @@
 
             var html = '';
 
-            $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
+            $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, getPageSizes())).trigger('create');
 
             updateFilterControls(page);
 
@@ -92,7 +136,7 @@
                 coverImage: true
             });
 
-            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
+            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, getPageSizes());
 
             $('#items', page).html(html).trigger('create').createPosterItemMenus();
 
@@ -212,7 +256,6 @@
         LibraryBrowser.loadSavedQueryValues(getSavedQueryId(), query);
 
         reloadFeatures(page);
-        reloadItems(page);
 
         updateFilterControls(page);
     });

dashboard-ui/scripts/notifications.js

@@ -45,9 +45,9 @@
 
             html += '</p>';
 
-            html += '<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></p>';
+            html += '<div style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></div>';
 
-            html += '<p class="btnNotificationListContainer"><button class="btnNotificationList" type="button" data-icon="check" data-mini="true" data-theme="b">View Notifications</button></p>';
+            html += '<div class="btnNotificationListContainer"><button class="btnNotificationList" type="button" data-icon="action" data-mini="true">View Notifications</button></div>';
 
             html += '</div>';