From 33192cfc2433b768f247b19ebdf4300a7ea57d6b Mon Sep 17 00:00:00 2001 From: LukePulverenti Date: Wed, 6 Mar 2013 01:22:19 -0500 Subject: [PATCH] some very basic folder browsing --- MediaBrowser.WebDashboard/Html/css/site.css | 95 +++++++++++-------- MediaBrowser.WebDashboard/Html/itemList.html | 11 +++ .../Html/scripts/ItemDetailPage.js | 5 +- .../Html/scripts/ItemListPage.js | 47 ++++++++- .../Html/scripts/LoginPage.js | 7 +- .../Html/scripts/site.js | 14 ++- 6 files changed, 127 insertions(+), 52 deletions(-) diff --git a/MediaBrowser.WebDashboard/Html/css/site.css b/MediaBrowser.WebDashboard/Html/css/site.css index e6bd5f7c55..7fb09381f9 100644 --- a/MediaBrowser.WebDashboard/Html/css/site.css +++ b/MediaBrowser.WebDashboard/Html/css/site.css @@ -82,8 +82,7 @@ pre, textarea.pre { background-attachment: fixed; } -.libraryPage { - background: #1d1d1d url(images/bg.png) top left repeat-x; +.libraryPage, .libraryPage .ui-content { background: #262626!important; background-attachment: fixed!important; } @@ -163,7 +162,7 @@ h1 .imageLink { opacity: .5; } -.type-home h1 { +.type-home h1, .listHeader { margin-top: 1.25em; margin-bottom: 10px; padding-bottom: 5px; @@ -275,17 +274,17 @@ form, .readOnlyContent { @media all and (min-width: 650px) { .imgLogoIcon { - height: 60px; + height: 50px; } .imgLogoText { - height: 60px; + height: 50px; display: inline; } .header { padding-left: 30px; - padding-top: 20px; + padding-top: 15px; padding-bottom: 15px; } @@ -432,19 +431,28 @@ form, .readOnlyContent { font-size: 15px; padding: 0; position: relative; + padding-bottom: 28px; } - .posterViewItem a { - color: white!important; - font-weight: normal!important; - text-decoration: none; - } +.posterViewItemWithDualText { + padding-bottom: 56px; +} - .posterViewItem img { - max-width: 155px; - max-height: 155px; - vertical-align: bottom; - } +.posterViewItemWithNoText { + padding-bottom: 0!important; +} + +.posterViewItem a { + color: white!important; + font-weight: normal!important; + text-decoration: none; +} + +.posterViewItem img { + max-width: 155px; + max-height: 148px; + vertical-align: bottom; +} .premiumBanner img { position: absolute; @@ -460,24 +468,22 @@ form, .readOnlyContent { .posterViewItemText { text-overflow: ellipsis; overflow: hidden; + text-wrap: none; white-space: nowrap; margin: 0; - padding: 4px 0px 0; + padding: 4px 2px 0; + position: absolute; bottom: 0; left: 0; right: 0; + height: 24px; background: #181818; text-shadow: none; - max-width: 155px; } - .posterViewItemText div{ - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin: 0px 4px; - height: 24px; - } +.posterViewItemPrimaryText { + bottom: 28px; +} .posterViewItem:hover, .userItem:hover { -moz-box-shadow: 0 0 20px 3px #2572EB; @@ -489,11 +495,19 @@ form, .readOnlyContent { .posterViewItem { font-size: 16px; + padding-bottom: 29px; + } + + .posterViewItemWithDualText { + padding-bottom: 58px; } .posterViewItemText { padding-top: 5px; - max-width: 190px; + } + + .posterViewItemPrimaryText { + bottom: 29px; } .posterViewItem img { @@ -508,33 +522,34 @@ form, .readOnlyContent { font-size: 17px; } - .posterViewItem img { - max-width: 280px; - max-height: 280px; - } - - .posterViewItemText { - max-width: 280px; - } + .posterViewItem img { + max-width: 280px; + max-height: 250px; + } } @media all and (min-width: 1920px) { .posterViewItem { font-size: 19px; + padding-bottom: 33px; } - .posterViewItemText div{ + .posterViewItemWithDualText { + padding-bottom: 66px; + } + + .posterViewItemPrimaryText { + bottom: 33px; + } + + .posterViewItemText { height: 28px; } .posterViewItem img { max-width: 352px; - max-height: 352px; - } - - .posterViewItemText { - max-width: 352px; + max-height: 300px; } } diff --git a/MediaBrowser.WebDashboard/Html/itemList.html b/MediaBrowser.WebDashboard/Html/itemList.html index 363c0672a6..728f38a28a 100644 --- a/MediaBrowser.WebDashboard/Html/itemList.html +++ b/MediaBrowser.WebDashboard/Html/itemList.html @@ -6,6 +6,17 @@
+ +

+ + +
+
+ +
+
Panel content
diff --git a/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js b/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js index e5629f217f..ec14d5ec4b 100644 --- a/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js +++ b/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js @@ -2,12 +2,15 @@ onPageShow: function () { + ItemDetailPage.reload(); + }, + + reload: function() { var id = getParameterByName('id'); Dashboard.showLoadingMsg(); ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(ItemDetailPage.renderItem); - }, renderItem: function (item) { diff --git a/MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js b/MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js index 5f282702bb..bf89fa8138 100644 --- a/MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js +++ b/MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js @@ -1 +1,46 @@ - \ No newline at end of file +var ItemListPage = { + + onPageShow: function () { + + ItemListPage.reload(); + }, + + reload: function () { + + var userId = Dashboard.getCurrentUserId(); + + var parentId = getParameterByName('parentId'); + + var query = {}; + + if (parentId) { + query.parentId = parentId; + + ApiClient.getItem(userId, parentId).done(ItemListPage.renderTitle); + } + + ApiClient.getItems(userId, query).done(ItemListPage.renderItems); + }, + + renderItems: function(result) { + + var items = result.Items; + + var renderOptions = { + + items: items + }; + + var html = Dashboard.getPosterViewHtml(renderOptions); + + $('#listItems', $.mobile.activePage).html(html); + }, + + renderTitle: function (item) { + + + $('#itemName', $.mobile.activePage).html(item.Name); + } +}; + +$(document).on('pageshow', "#itemListPage", ItemListPage.onPageShow); diff --git a/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js b/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js index ca4677e04e..ac4570f088 100644 --- a/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js +++ b/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js @@ -62,7 +62,7 @@ var background = Dashboard.getRandomMetroColor(); - html += '
'; + html += '
'; if (user.HasPassword) { html += ""; @@ -83,10 +83,8 @@ html += ''; } + html += '
' + user.Name + '
'; html += '
'; - - html += '
' + user.Name + '
'; - html += '
'; var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate); if (lastSeen != "") { html += lastSeen; @@ -96,7 +94,6 @@ } html += '
'; - html += '
'; html += ''; html += '
'; diff --git a/MediaBrowser.WebDashboard/Html/scripts/site.js b/MediaBrowser.WebDashboard/Html/scripts/site.js index 1f3c301af9..94e3390d3b 100644 --- a/MediaBrowser.WebDashboard/Html/scripts/site.js +++ b/MediaBrowser.WebDashboard/Html/scripts/site.js @@ -414,9 +414,13 @@ var Dashboard = { var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; - var href = item.IsFolder ? "#" : "itemDetails.html?id=" + item.Id; + var href = item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemDetails.html?id=" + item.Id; - html += "
"; + var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer'); + + var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText"; + + html += "
"; if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { html += ""; } - if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) { + if (showText) { html += "
"; - html += "
" + item.Name + "
"; - html += "
" + html += item.Name; + html += "
"; } html += "
";