adjust mobile image sizes

dashboard-ui/css/card.css

@@ -48,7 +48,7 @@
 }
 
 .largeCardMargin .cardBox {
-    margin: 8px;
+    margin: 7px;
 }
 
 /*@media all and (max-width: 600px) {
@@ -112,6 +112,10 @@
     padding-bottom: 100%;
 }
 
+.smallSquareCard .cardPadder {
+    padding-bottom: 100%;
+}
+
 .letterBoxCard .cardPadder {
     padding-bottom: 75%;
 }
@@ -120,6 +124,10 @@
     padding-bottom: 150%;
 }
 
+.smallPortraitCard .cardPadder {
+    padding-bottom: 150%;
+}
+
 .bannerCard .cardPadder {
     padding-bottom: 18.5%;
 }
@@ -252,6 +260,10 @@
     width: 50%;
 }
 
+.smallSquareCard {
+    width: 33.3334%;
+}
+
 .backdropCard {
     width: 50%;
 }
@@ -264,6 +276,10 @@
     width: 33.3%;
 }
 
+.smallPortraitCard {
+    width: 25%;
+}
+
 .cardProgress {
     line-height: 7px;
 }
@@ -287,13 +303,24 @@
     .squareCard {
         width: 33.3%;
     }
+
+    .smallSquareCard {
+        width: 25%;
+    }
+}
+
+@media all and (min-width: 400px) {
+
+    .smallBackdropCard {
+        width: 33.3%;
+    }
 }
 
 
 @media all and (min-width: 540px) {
 
     .smallBackdropCard {
-        width: 33.3%;
+        width: 25%;
     }
 }
 
@@ -303,6 +330,10 @@
     .portraitCard {
         width: 25%;
     }
+
+    .smallPortraitCard {
+        width: 20%;
+    }
 }
 
 @media all and (min-width: 700px) {
@@ -326,7 +357,11 @@
     }
 
     .smallBackdropCard {
-        width: 25%;
+        width: 20%;
+    }
+
+    .smallSquareCard {
+        width: 20%;
     }
 }
 
@@ -340,6 +375,10 @@
     .smallBackdropCard {
         width: 20%;
     }
+
+    .smallPortraitCard {
+        width: 16.666666666666666666666666666667%;
+    }
 }
 
 
@@ -364,6 +403,14 @@
     .smallBackdropCard {
         width: 16.666666666666666666666666666667%;
     }
+
+    .smallSquareCard {
+        width: 16.666666666666666666666666666667%;
+    }
+
+    .smallPortraitCard {
+        width: 14.285714285714285714285714285714%;
+    }
 }
 
 
@@ -380,6 +427,10 @@
     .smallBackdropCard {
         width: 14.285714285714285714285714285714%;
     }
+
+    .smallPortraitCard {
+        width: 12.5%;
+    }
 }
 
 
@@ -525,14 +576,14 @@
     }
 }
 
-@media all and (min-width: 1400px) {
+@media all and (min-width: 1100px) {
 
     .homePageSmallBackdropCard {
         width: 20%;
     }
 }
 
-@media all and (min-width: 1920px) {
+@media all and (min-width: 1440px) {
 
     .homePageSmallBackdropCard {
         width: 14.285714285714285714285714285714%;

dashboard-ui/css/librarybrowser.css

@@ -95,6 +95,13 @@
     }
 }
 
+@media all and (min-width: 800px) {
+
+    .hiddenSectionOnNonMobile {
+        display: none;
+    }
+}
+
 .firstListHeader + .sectionHeaderButton {
     top: 3px;
 }

dashboard-ui/scripts/indexpage.js

@@ -14,12 +14,10 @@
         return deferred.promise();
     }
 
-    function createMediaLinks(options) {
+    function getLibraryButtonsHtml(items) {
 
         var html = "";
 
-        var items = options.items;
-
         // "My Library" backgrounds
         for (var i = 0, length = items.length; i < length; i++) {
 
@@ -86,12 +84,12 @@
                 cssClass += ' ' + item.CollectionType + 'buttonCard';
             }
 
-            var href = item.url || LibraryBrowser.getHref(item, options.context);
+            var href = item.url || LibraryBrowser.getHref(item);
 
             html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
             html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
 
-            html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
+            html += "<div class='cardText' style='padding:6px 10px;color:#fff;'>";
             html += '<i class="fa ' + icon + '"></i>';
             html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
             html += "</div>";
@@ -114,12 +112,7 @@
                 html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
             }
             html += '<div>';
-            html += createMediaLinks({
+            html += getLibraryButtonsHtml(items);
-                items: items,
-                showTitle: true,
-                centerText: true
-
-            });
             html += '</div>';
 
             $(elem).html(html);
@@ -206,16 +199,16 @@
 
     function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
 
-        if (autoHideOnMobile) {
-            $(elem).addClass('hiddenSectionOnMobile');
-        } else {
-            $(elem).removeClass('hiddenSectionOnMobile');
-        }
-
         return getUserViews(user.Id).done(function (items) {
 
             var html = '';
 
+            if (autoHideOnMobile) {
+                html += '<div class="hiddenSectionOnMobile">';
+            } else {
+                html += '<div>';
+            }
+
             if (items.length) {
 
                 var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
@@ -241,6 +234,13 @@
                 html += '</div>';
             }
 
+            html += '</div>';
+
+            if (autoHideOnMobile) {
+                html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
+                html += getLibraryButtonsHtml(items);
+                html += '</div>';
+            }
 
             $(elem).html(html).lazyChildren().createCardMenus();
 

dashboard-ui/scripts/itemdetailpage.js

@@ -1177,7 +1177,7 @@
 
         var chapters = item.Chapters || [];
 
-        var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
+        var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
 
         for (var i = 0, length = chapters.length; i < length; i++) {
 
@@ -1399,7 +1399,7 @@
 
         var html = '';
 
-        var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
+        var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
 
         for (var i = 0, length = items.length; i < length; i++) {
 

dashboard-ui/scripts/librarybrowser.js

@@ -954,28 +954,25 @@
 
         getPostersPerRow: function (screenWidth) {
 
-            var div = $('<div class="card squareCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            function getValue(shape) {
-            var square = screenWidth / $('.cardImage', div).innerWidth();
-            div.remove();
 
-            div = $('<div class="card backdropCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+                var div = $('<div class="card ' + shape + 'Card"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
-            var thumb = screenWidth / $('.cardImage', div).innerWidth();
+                var width = screenWidth / $('.cardImage', div).innerWidth();
                 div.remove();
+                return width;
+            }
 
-            div = $('<div class="card portraitCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            var info = {};
-            var poster = screenWidth / $('.cardImage', div).innerWidth();
-            div.remove();
 
-            div = $('<div class="card bannerCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
+            info.square = getValue('square');
-            var banner = screenWidth / $('.cardImage', div).innerWidth();
+            info.smallSquare = getValue('smallSquare');
-            div.remove();
+            info.thumb = getValue('backdrop');
+            info.portrait = getValue('portrait');
+            info.smallPortrait = getValue('smallPortrait');
+            info.banner = getValue('banner');
+            info.smallThumb = getValue('smallBackdrop');
 
-            return {
+            return info;
-                thumb: thumb,
-                poster: poster,
-                square: square,
-                banner: banner
-            };
         },
 
         posterSizes: [],
@@ -1011,8 +1008,11 @@
             }
 
             var thumbWidth = screenWidth / imagesPerRow.thumb;
-            var posterWidth = screenWidth / imagesPerRow.poster;
+            var smallThumbWidth = screenWidth / imagesPerRow.smallThumb;
+            var posterWidth = screenWidth / imagesPerRow.portrait;
+            var smallPosterWidth = screenWidth / imagesPerRow.smallPortrait;
             var squareSize = screenWidth / imagesPerRow.square;
+            var smallSquareSize = screenWidth / imagesPerRow.smallSquare;
             var bannerWidth = screenWidth / imagesPerRow.banner;
 
             if (!AppInfo.isTouchPreferred) {
@@ -1020,7 +1020,9 @@
                 var roundTo = 100;
 
                 thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
+                smallThumbWidth = Math.round(smallThumbWidth / roundTo) * roundTo;
                 posterWidth = Math.round(posterWidth / roundTo) * roundTo;
+                smallPosterWidth = Math.round(smallPosterWidth / roundTo) * roundTo;
                 squareSize = Math.round(squareSize / roundTo) * roundTo;
                 bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
             }
@@ -1029,10 +1031,26 @@
             var defaultThumb = 'backdrop';
             var defaultSquare = 'square';
 
+            if (AppInfo.hasLowImageBandwidth) {
+                defaultThumb = 'smallBackdrop';
+                defaultSquare = 'smallSquare';
+                defaultPortait = 'smallPortrait';
+            }
+
             return {
+
+                defaultThumb: defaultThumb,
+                smallThumbWidth: Math.round(smallThumbWidth),
                 thumbWidth: Math.round(thumbWidth),
+
+                defaultPortait: defaultPortait,
                 posterWidth: Math.round(posterWidth),
+                smallPosterWidth: Math.round(smallPosterWidth),
+
+                defaultSquare: defaultSquare,
                 squareSize: Math.round(squareSize),
+                smallSquareSize: Math.round(smallSquareSize),
+
                 bannerWidth: Math.round(bannerWidth),
                 screenWidth: screenWidth
             };
@@ -1071,12 +1089,27 @@
                 }
             }
 
-            var sizes = LibraryBrowser.getPosterViewInfo();
+            var posterInfo = LibraryBrowser.getPosterViewInfo();
 
-            var thumbWidth = sizes.thumbWidth;
+            var thumbWidth = posterInfo.thumbWidth;
-            var posterWidth = sizes.posterWidth;
+            var posterWidth = posterInfo.posterWidth;
-            var squareSize = sizes.squareSize;
+            var squareSize = posterInfo.squareSize;
-            var bannerWidth = sizes.bannerWidth;
+            var bannerWidth = posterInfo.bannerWidth;
+
+            if (options.shape == 'backdrop' && posterInfo.defaultThumb == 'smallBackdrop') {
+                options.shape = 'smallBackdrop';
+                thumbWidth = posterInfo.smallThumbWidth;
+            }
+
+            else if (options.shape == 'portrait' && posterInfo.defaultPortait == 'smallPortrait') {
+                options.shape = 'smallPortrait';
+                posterWidth = posterInfo.smallPosterWidth;
+            }
+
+            else if (options.shape == 'square' && posterInfo.defaultSquare == 'smallSquare') {
+                options.shape = 'smallSquare';
+                squareSize = posterInfo.smallSquareSize;
+            }
 
             for (var i = 0, length = items.length; i < length; i++) {
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -92,7 +92,7 @@
 
             // TODO: With iOS 8 this might not be required anymore
             if ($.browser.safari) {
-                $('.itemVideo').css('visibility', 'hidden');
+                //$('.itemVideo').css('visibility', 'hidden');
             }
         }