From 79a51f6b3acf7951e465ae7fb496627659bca4bb Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Fri, 27 Dec 2013 16:10:06 -0500 Subject: [PATCH] new mobile web client menu --- dashboard-ui/css/librarybrowser.css | 69 ++++++- dashboard-ui/css/search.css | 13 +- dashboard-ui/css/site.css | 10 +- dashboard-ui/episodes.html | 2 +- dashboard-ui/itembynamedetails.html | 4 +- dashboard-ui/itemdetails.html | 2 +- dashboard-ui/scripts/librarybrowser.js | 116 +---------- dashboard-ui/scripts/librarymenu.js | 267 +++++++++++++++++++++++++ dashboard-ui/scripts/site.js | 6 +- dashboard-ui/tvgenres.html | 2 +- dashboard-ui/tvnextup.html | 2 +- dashboard-ui/tvpeople.html | 2 +- dashboard-ui/tvrecommended.html | 2 +- dashboard-ui/tvshows.html | 2 +- dashboard-ui/tvstudios.html | 2 +- dashboard-ui/tvupcoming.html | 2 +- 16 files changed, 357 insertions(+), 146 deletions(-) create mode 100644 dashboard-ui/scripts/librarymenu.js diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index cdaef97777..8f380eec6d 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -17,8 +17,8 @@ } .viewMenuBar { - background: #444; - background-image: linear-gradient(#444,#2d2d2d); + background: #404040; + background-image: linear-gradient(#404040,#2d2d2d); font-weight: bold; position: fixed; right: 0; @@ -71,6 +71,8 @@ height: 20px; padding-top: 9px; text-transform: uppercase; + font-size: 14px; + font-weight: 400!important; } .viewMenuTextLink { @@ -113,7 +115,7 @@ .libraryViewNav { text-align: center; - background-image: linear-gradient(#444,#2d2d2d); + background-image: linear-gradient(#404040,#2d2d2d); border-bottom: 1px solid #111; border-top: 0; } @@ -125,7 +127,7 @@ .libraryViewNav a { display: inline-block; - padding: .5em .25em; + padding: .6em 1em; color: #eee!important; text-decoration: none; } @@ -503,6 +505,46 @@ a.itemTag:hover { max-width: 100%; } +.libraryPanelHeader { + margin: 10px 0 20px 0; +} + + .libraryPanelHeader a { + text-decoration: none; + } + + .libraryPanelHeader img { + height: 24px; + vertical-align: middle; + margin-right: 6px; + } + + .libraryPanelHeader span { + color: #fff; + vertical-align: middle; + font-size: 14px; + font-weight: 300; + } + +.mediaBrowserAccent { + color: #52B54B!important; +} + +.libraryPanelCollapsibleHeader a { + font-size: 16px; + font-weight: 300!important; +} + +.selectedLibraryPanelLink a { + background: #38c!important; +} + +.desktopHomeLink img { + height: 24px; + vertical-align: middle; + margin-right: 5px; +} + @media all and (max-width: 550px) { .desktopViewMenuLink { @@ -521,10 +563,21 @@ a.itemTag:hover { } } +@media all and (max-width: 750px) { + + .libraryViewNav { + display: none !important; + } + + .desktopHomeLink { + display: none; + } +} + @media all and (min-width: 750px) { - .libraryViewNav a { - padding: .5em 1em; + .libraryMenuButton { + display: none; } } @@ -595,6 +648,10 @@ a.itemTag:hover { padding-right: .8em; } + .libraryMenuButton + .viewMenuTextLink { + padding-left: .6em !important; + } + .viewMenuBar .btnCurrentUser { padding-right: 1.5em; } diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css index 3dc68e25d2..776a68eab9 100644 --- a/dashboard-ui/css/search.css +++ b/dashboard-ui/css/search.css @@ -1,11 +1,18 @@ .searchPanel { - min-width: 250px; + width: 250px; } -@media all and (min-width: 60px) { +.ui-panel-dismiss-open.ui-panel-dismiss-position-right[data-panelid=searchPanel] { + right: 250px; +} +@media all and (min-width: 600px) { .searchPanel { - min-width: 300px; + width: 300px; + } + + .ui-panel-dismiss-open.ui-panel-dismiss-position-right[data-panelid=searchPanel] { + right: 300px; } } diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index ec21f18271..149b1c6ceb 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -33,6 +33,7 @@ body { overflow-y: scroll!important; font-size: 13px; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; } .textlink { @@ -44,24 +45,15 @@ body { } * { - font-family: 'Open Sans', Arial, Helvetica, sans-serif; text-shadow: none; -webkit-font-smoothing: antialiased; } -.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-mini .ui-btn-inner, .ui-li-desc { - font-size: 13px; -} - h1 { font-weight: 300; font-size: 2.22em; } -.toolsSidebar h1 { - font-size: 40px; -} - .ui-loader h1 { font-weight: bold; } diff --git a/dashboard-ui/episodes.html b/dashboard-ui/episodes.html index 85521547d1..76a7c42876 100644 --- a/dashboard-ui/episodes.html +++ b/dashboard-ui/episodes.html @@ -13,7 +13,7 @@ Shows Episodes Genres - Actors + People Networks diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html index 406ff7ba09..9d073a609a 100644 --- a/dashboard-ui/itembynamedetails.html +++ b/dashboard-ui/itembynamedetails.html @@ -46,7 +46,7 @@ Shows Episodes Genres - Actors + People Networks @@ -70,7 +70,7 @@ Shows Episodes Genres - Actors + People Networks diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 0712405caf..383f6f074b 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -46,7 +46,7 @@ Shows Episodes Genres - Actors + People Networks diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 6f2d57e534..6d31389a4b 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2370,118 +2370,4 @@ }; -})(window, document, jQuery, screen, localStorage); - - -(function (window, document, $) { - - var itemCountsPromise; - var liveTvServicesPromise; - - function renderHeader(page, user) { - - var html = '
'; - - html += 'Menu'; - - html += ''; - - if (user.Configuration.IsAdministrator) { - html += 'Metadata Manager'; - } - - html += '
'; - - html += ''; - - if (user.PrimaryImageTag) { - - var url = ApiClient.getUserImageUrl(user.Id, { - height: 40, - tag: user.PrimaryImageTag, - type: "Primary" - }); - - html += ''; - } else { - html += ''; - } - - html += ''; - - html += ''; - - if (user.Configuration.IsAdministrator) { - html += 'Dashboard'; - } - - html += '
'; - - html += '
'; - - $(page).prepend(html); - - $('.viewMenuBar', page).trigger('create'); - } - - function insertViews(page, user, counts, liveTvServices) { - - var html = ''; - - var selectedCssClass = ' selectedViewLink'; - var selectedHtml = "▶"; - - var view = page.getAttribute('data-view') || getParameterByName('context'); - - if (counts.MovieCount || counts.TrailerCount) { - - html += '' + (view == 'movies' ? selectedHtml : '') + 'Movies'; - } - - if (counts.EpisodeCount || counts.SeriesCount) { - html += '' + (view == 'tv' ? selectedHtml : '') + 'TV'; - } - - if (liveTvServices.length) { - html += '' + (view == 'livetv' ? selectedHtml : '') + 'Live TV'; - } - - if (counts.SongCount || counts.MusicVideoCount) { - html += '' + (view == 'music' ? selectedHtml : '') + 'Music'; - } - - if (counts.GameCount) { - html += '' + (view == 'games' ? selectedHtml : '') + 'Games'; - } - - $('.viewMenuRemoteControlButton', page).before(html); - } - - $(document).on('pagebeforeshow', ".libraryPage", function () { - - var page = this; - - if (!$('.viewMenuBar', page).length) { - - Dashboard.getCurrentUser().done(function (user) { - - renderHeader(page, user); - - itemCountsPromise = itemCountsPromise || ApiClient.getItemCounts(Dashboard.getCurrentUserId()); - liveTvServicesPromise = liveTvServicesPromise || ApiClient.getLiveTvServices(); - - $.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) { - - var counts = response1[0]; - var liveTvServices = response2[0]; - - insertViews(page, user, counts, liveTvServices); - - - }); - }); - } - }); - -})(window, document, jQuery); - +})(window, document, jQuery, screen, localStorage); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js new file mode 100644 index 0000000000..c601b9fc24 --- /dev/null +++ b/dashboard-ui/scripts/librarymenu.js @@ -0,0 +1,267 @@ +(function (window, document, $) { + + var itemCountsPromise; + var liveTvServicesPromise; + + function ensurePromises() { + itemCountsPromise = itemCountsPromise || ApiClient.getItemCounts(Dashboard.getCurrentUserId()); + liveTvServicesPromise = liveTvServicesPromise || ApiClient.getLiveTvServices(); + } + + function renderHeader(page, user) { + + var html = '
'; + + html += ''; + + html += ''; + + html += ''; + + if (user.Configuration.IsAdministrator) { + html += 'Metadata Manager'; + } + + html += '
'; + + html += ''; + + if (user.PrimaryImageTag) { + + var url = ApiClient.getUserImageUrl(user.Id, { + height: 40, + tag: user.PrimaryImageTag, + type: "Primary" + }); + + html += ''; + } else { + html += ''; + } + + html += ''; + + html += ''; + + if (user.Configuration.IsAdministrator) { + html += 'Dashboard'; + } + + html += '
'; + + html += '
'; + + $(page).prepend(html); + + $('.viewMenuBar', page).trigger('create'); + } + + function insertViews(page, user, counts, liveTvServices) { + + var html = ''; + + var selectedCssClass = ' selectedViewLink'; + var selectedHtml = "▶"; + + var view = page.getAttribute('data-view') || getParameterByName('context'); + + if (counts.MovieCount) { + + html += '' + (view == 'movies' ? selectedHtml : '') + 'Movies'; + } + + if (counts.SeriesCount) { + html += '' + (view == 'tv' ? selectedHtml : '') + 'TV'; + } + + if (liveTvServices.length) { + html += '' + (view == 'livetv' ? selectedHtml : '') + 'Live TV'; + } + + if (counts.SongCount || counts.MusicVideoCount) { + html += '' + (view == 'music' ? selectedHtml : '') + 'Music'; + } + + if (counts.GameCount) { + html += '' + (view == 'games' ? selectedHtml : '') + 'Games'; + } + + $('.viewMenuRemoteControlButton', page).before(html); + } + + function showLibraryMenu(page) { + + ensurePromises(); + + $.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) { + + var counts = response1[0]; + var liveTvServices = response2[0]; + + var panel = getLibraryMenu(page, counts, liveTvServices); + + $(panel).panel('toggle'); + }); + } + + function getLibraryMenu(page, counts, liveTvServices) { + + var panel = $('#libraryPanel', page); + + if (!panel.length) { + + var html = ''; + + html += '
'; + + html += '

MEDIABROWSER

'; + + html += '
'; + + if (counts.MovieCount) { + + html += getCollapsibleHtml('Movies', [ + + { text: 'Suggested', href: 'moviesrecommended.html' }, + { text: 'Movies', href: 'movies.html' }, + { text: 'Box Sets', href: 'boxsets.html' }, + { text: 'Trailers', href: 'movietrailers.html' }, + { text: 'Genres', href: 'moviegenres.html' }, + { text: 'People', href: 'moviepeople.html' }, + { text: 'Studios', href: 'moviestudios.html' } + ]); + } + + if (counts.SeriesCount) { + html += getCollapsibleHtml('TV', [ + + { text: 'Suggested', href: 'tvrecommended.html' }, + { text: 'Next Up', href: 'tvnextup.html' }, + { text: 'Upcoming', href: 'tvupcoming.html' }, + { text: 'Shows', href: 'tvshows.html' }, + { text: 'Episodes', href: 'episodes.html' }, + { text: 'Genres', href: 'tvgenres.html' }, + { text: 'People', href: 'tvpeople.html' }, + { text: 'Networks', href: 'tvstudios.html' } + ]); + } + + if (liveTvServices.length) { + html += getCollapsibleHtml('Live TV', [ + + { text: 'Guide', href: 'livetvguide.html' }, + { text: 'Channels', href: 'livetvchannels.html' }, + { text: 'Recordings', href: 'livetvrecordings.html' }, + { text: 'Scheduled', href: 'livetvtimers.html' }, + { text: 'Series', href: 'livetvseriestimers.html' } + ]); + } + + if (counts.SongCount || counts.MusicVideoCount) { + html += getCollapsibleHtml('Music', [ + + { text: 'Suggested', href: 'musicrecommended.html' }, + { text: 'Songs', href: 'songs.html' }, + { text: 'Albums', href: 'musicalbums.html' }, + { text: 'Album Artists', href: 'musicalbumartists.html' }, + { text: 'Artists', href: 'musicartists.html' }, + { text: 'Music Videos', href: 'musicvideos.html' }, + { text: 'Genres', href: 'musicgenres.html' } + ]); + } + + if (counts.GameCount) { + html += getCollapsibleHtml('Games', [ + + { text: 'Suggested', href: 'gamesrecommended.html' }, + { text: 'Games', href: 'games.html' }, + { text: 'Game Systems', href: 'gamesystems.html' }, + { text: 'Genres', href: 'gamegenres.html' }, + { text: 'Studios', href: 'gamestudios.html' } + ]); + } + + html += '
'; + + html += '
'; + + $(page).append(html); + + panel = $('#libraryPanel', page).panel({}).trigger('create'); + } + + return panel; + } + + function getCollapsibleHtml(title, links) { + + var i, length; + var selectedIndex = -1; + var collapsed = 'true'; + + var currentUrl = window.location.toString().toLowerCase(); + + for (i = 0, length = links.length; i < length; i++) { + + if (currentUrl.indexOf(links[i].href.toLowerCase()) != -1) { + collapsed = 'false'; + selectedIndex = i; + break; + } + } + + var html = ''; + + html += '
'; + html += '

' + title + '

'; + + html += ''; + html += '
'; + + return html; + } + + window.LibraryMenu = { + showLibraryMenu: showLibraryMenu + }; + + $(document).on('pagebeforeshow', ".libraryPage", function () { + + var page = this; + + if (!$('.viewMenuBar', page).length) { + + Dashboard.getCurrentUser().done(function (user) { + + renderHeader(page, user); + + ensurePromises(); + + $.when(itemCountsPromise, liveTvServicesPromise).done(function (response1, response2) { + + var counts = response1[0]; + var liveTvServices = response2[0]; + + insertViews(page, user, counts, liveTvServices); + + + }); + }); + } + }); + +})(window, document, jQuery); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index a58b53a10e..c94d7ca199 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -651,7 +651,9 @@ var Dashboard = { var html = '
'; - html += '

Tools

'; + html += '

MEDIABROWSER

'; + + html += '
Metadata Manager
'; html += '
'; @@ -686,7 +688,7 @@ var Dashboard = { html += '
'; - html += ''; + html += '

MEDIABROWSER

'; for (i = 0, length = links.length; i < length; i++) { diff --git a/dashboard-ui/tvgenres.html b/dashboard-ui/tvgenres.html index acca0de9df..073d657672 100644 --- a/dashboard-ui/tvgenres.html +++ b/dashboard-ui/tvgenres.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvnextup.html b/dashboard-ui/tvnextup.html index 7b66f25489..18710b93e1 100644 --- a/dashboard-ui/tvnextup.html +++ b/dashboard-ui/tvnextup.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvpeople.html b/dashboard-ui/tvpeople.html index f47955f9ee..624084aef0 100644 --- a/dashboard-ui/tvpeople.html +++ b/dashboard-ui/tvpeople.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tvrecommended.html index f84e4b0bb5..1a0cd2aa9e 100644 --- a/dashboard-ui/tvrecommended.html +++ b/dashboard-ui/tvrecommended.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html index 898cc29188..6ec4e6e639 100644 --- a/dashboard-ui/tvshows.html +++ b/dashboard-ui/tvshows.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvstudios.html b/dashboard-ui/tvstudios.html index 6881ce14fa..0c43572618 100644 --- a/dashboard-ui/tvstudios.html +++ b/dashboard-ui/tvstudios.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks
diff --git a/dashboard-ui/tvupcoming.html b/dashboard-ui/tvupcoming.html index 2e6b162479..02f6ddad08 100644 --- a/dashboard-ui/tvupcoming.html +++ b/dashboard-ui/tvupcoming.html @@ -12,7 +12,7 @@ Shows Episodes Genres - Actors + People Networks