some very basic folder browsing
This commit is contained in:
LukePulverenti
parent
d02263591f
commit
33192cfc24
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -1 +1,46 @@
|
|||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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>";
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user