From 2861ff68c9a3538923385cb83723320bdc79cba4 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Mon, 30 Dec 2013 22:43:30 -0500 Subject: [PATCH] updated mobile and tablet layouts in web client --- dashboard-ui/css/librarybrowser.css | 27 +++++++------- dashboard-ui/css/mediaplayer.css | 4 +-- dashboard-ui/css/posteritem.css | 46 ++++++++++++++---------- dashboard-ui/css/search.css | 2 +- dashboard-ui/css/site.css | 6 ++-- dashboard-ui/dashboard.html | 2 +- dashboard-ui/scripts/extensions.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 13 +++---- dashboard-ui/scripts/musicrecommended.js | 4 ++- dashboard-ui/scripts/site.js | 2 -- dashboard-ui/tvnextup.html | 2 +- 11 files changed, 58 insertions(+), 52 deletions(-) diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 580f0a7f9..d80fdc075 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/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 { - width: 100%; - margin: 0 auto; - height: 6px; -} + .detailImageProgressContainer progress { + width: 100%; + margin: 0 auto; + 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 { - background-color: transparent !important; -} + .unplayedIndicator div:after { + background-color: transparent !important; + } .itemProgress { vertical-align: top; diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 7c97509b1..5d32b4953 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/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%; } diff --git a/dashboard-ui/css/posteritem.css b/dashboard-ui/css/posteritem.css index 45a6cd9d6..6d84ba9f2 100644 --- a/dashboard-ui/css/posteritem.css +++ b/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 { diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css index 861e01deb..0632efaf7 100644 --- a/dashboard-ui/css/search.css +++ b/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; diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 98fa0aaa6..2d283dcbe 100644 --- a/dashboard-ui/css/site.css +++ b/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; } } diff --git a/dashboard-ui/dashboard.html b/dashboard-ui/dashboard.html index 31516a3fd..489304a6a 100644 --- a/dashboard-ui/dashboard.html +++ b/dashboard-ui/dashboard.html @@ -24,7 +24,7 @@

A new version of Media Browser Server is available!

- +
Please shutdown the server and update manually. diff --git a/dashboard-ui/scripts/extensions.js b/dashboard-ui/scripts/extensions.js index 17b8d82a5..59dd19603 100644 --- a/dashboard-ui/scripts/extensions.js +++ b/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) { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index aa6873646..7213c209e 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/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 '
' + item.RecursiveUnplayedItemCount + '
'; } - } - - if (item.PlayedPercentage == 100) { - return '
'; - } - if (item.MediaType == "Video") { - + if (item.PlayedPercentage == 100) { + return '
'; + } + var userData = item.UserData || {}; if (userData.Played) { diff --git a/dashboard-ui/scripts/musicrecommended.js b/dashboard-ui/scripts/musicrecommended.js index d4b0ee68d..7a98e099d 100644 --- a/dashboard-ui/scripts/musicrecommended.js +++ b/dashboard-ui/scripts/musicrecommended.js @@ -20,7 +20,9 @@ items: result.Items, useAverageAspectRatio: true, showUnplayedIndicator: false, - shape: "square" + shape: "square", + showTitle: true, + showParentTitle: true })); }); diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 4ef4d579a..dcfa26b10 100644 --- a/dashboard-ui/scripts/site.js +++ b/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 diff --git a/dashboard-ui/tvnextup.html b/dashboard-ui/tvnextup.html index cb63fc5c8..0ab5221aa 100644 --- a/dashboard-ui/tvnextup.html +++ b/dashboard-ui/tvnextup.html @@ -17,7 +17,7 @@
-
+

Next Up