aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--MediaBrowser.WebDashboard/Html/css/site.css93
-rw-r--r--MediaBrowser.WebDashboard/Html/itemList.html11
-rw-r--r--MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js5
-rw-r--r--MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js47
-rw-r--r--MediaBrowser.WebDashboard/Html/scripts/LoginPage.js7
-rw-r--r--MediaBrowser.WebDashboard/Html/scripts/site.js14
6 files changed, 126 insertions, 51 deletions
diff --git a/MediaBrowser.WebDashboard/Html/css/site.css b/MediaBrowser.WebDashboard/Html/css/site.css
index e6bd5f7c5..7fb09381f 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{
- height: 28px;
+ .posterViewItemWithDualText {
+ padding-bottom: 66px;
}
- .posterViewItem img {
- max-width: 352px;
- max-height: 352px;
+ .posterViewItemPrimaryText {
+ bottom: 33px;
}
.posterViewItemText {
+ height: 28px;
+ }
+
+ .posterViewItem img {
max-width: 352px;
+ max-height: 300px;
}
}
diff --git a/MediaBrowser.WebDashboard/Html/itemList.html b/MediaBrowser.WebDashboard/Html/itemList.html
index 363c0672a..728f38a28 100644
--- a/MediaBrowser.WebDashboard/Html/itemList.html
+++ b/MediaBrowser.WebDashboard/Html/itemList.html
@@ -6,6 +6,17 @@
<body>
<div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
<div data-role="content">
+<!-- <div style="text-align: right;">
+ <button type="button" onclick="$( '#optionsPanel', $.mobile.activePage ).panel( 'open' );" data-mini="true" data-inline="true">Options</button>
+ </div>-->
+ <h1 id="itemName" class="listHeader"></h1>
+
+
+ <div id="listItems"></div>
+ </div>
+
+ <div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="a">
+ <div>Panel content</div>
</div>
</div>
</body>
diff --git a/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js b/MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
index e5629f217..ec14d5ec4 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 5f282702b..bf89fa813 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 ca4677e04..ac4570f08 100644
--- a/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js
+++ b/MediaBrowser.WebDashboard/Html/scripts/LoginPage.js
@@ -62,7 +62,7 @@
var background = Dashboard.getRandomMetroColor();
- html += '<div class="posterViewItem">';
+ html += '<div class="posterViewItem posterViewItemWithDualText">';
if (user.HasPassword) {
html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
@@ -83,10 +83,8 @@
html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
}
+ html += '<div class="posterViewItemText posterViewItemPrimaryText">' + user.Name + '</div>';
html += '<div class="posterViewItemText">';
-
- html += '<div>' + user.Name + '</div>';
- html += '<div>';
var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
if (lastSeen != "") {
html += lastSeen;
@@ -96,7 +94,6 @@
}
html += '</div>';
- html += '</div>';
html += '</a>';
html += '</div>';
diff --git a/MediaBrowser.WebDashboard/Html/scripts/site.js b/MediaBrowser.WebDashboard/Html/scripts/site.js
index 1f3c301af..94e3390d3 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 += "<div class='posterViewItem'><a href='" + href + "'>";
+ var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer');
+
+ var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
+
+ html += "<div class='" + cssClass + "'><a href='" + href + "'>";
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, {
@@ -443,10 +447,10 @@ var Dashboard = {
html += "<img style='background:" + Dashboard.getRandomMetroColor() + ";' src='css/images/defaultCollectionImage.png' />";
}
- if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {
+ if (showText) {
html += "<div class='posterViewItemText'>";
- html += "<div>" + item.Name + "</div>";
- html += "</div>"
+ html += item.Name;
+ html += "</div>";
}
html += "</a></div>";