mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

some very basic folder browsing

Browse source
This commit is contained in:
LukePulverenti 2013-03-06 01:22:19 -05:00
parent 26b3cd0bab
commit d4f35b2811
6 changed files with 127 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

69
Html/css/site.css
View file

@ -82,8 +82,7 @@ pre, textarea.pre {
background-attachment: fixed; background-attachment: fixed;
} }
.libraryPage { .libraryPage, .libraryPage .ui-content {
background: #1d1d1d url(images/bg.png) top left repeat-x;
background: #262626!important; background: #262626!important;
background-attachment: fixed!important; background-attachment: fixed!important;
} }
@ -163,7 +162,7 @@ h1 .imageLink {
opacity: .5; opacity: .5;
} }
.type-home h1 { .type-home h1, .listHeader {
margin-top: 1.25em; margin-top: 1.25em;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 5px; padding-bottom: 5px;
@ -275,17 +274,17 @@ form, .readOnlyContent {
@media all and (min-width: 650px) { @media all and (min-width: 650px) {
.imgLogoIcon { .imgLogoIcon {
height: 60px; height: 50px;
} }
.imgLogoText { .imgLogoText {
height: 60px; height: 50px;
display: inline; display: inline;
} }
.header { .header {
padding-left: 30px; padding-left: 30px;
padding-top: 20px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
@ -432,6 +431,15 @@ form, .readOnlyContent {
font-size: 15px; font-size: 15px;
padding: 0; padding: 0;
position: relative; position: relative;
padding-bottom: 28px;
}
.posterViewItemWithDualText {
padding-bottom: 56px;
}
.posterViewItemWithNoText {
padding-bottom: 0!important;
} }
.posterViewItem a { .posterViewItem a {
@ -442,7 +450,7 @@ form, .readOnlyContent {
.posterViewItem img { .posterViewItem img {
max-width: 155px; max-width: 155px;
max-height: 155px; max-height: 148px;
vertical-align: bottom; vertical-align: bottom;
} }
@ -460,23 +468,21 @@ form, .readOnlyContent {
.posterViewItemText { .posterViewItemText {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-wrap: none;
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding: 4px 0px 0; padding: 4px 2px 0;
position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 24px;
background: #181818; background: #181818;
text-shadow: none; text-shadow: none;
max-width: 155px;
} }
.posterViewItemText div{ .posterViewItemPrimaryText {
text-overflow: ellipsis; bottom: 28px;
overflow: hidden;
white-space: nowrap;
margin: 0px 4px;
height: 24px;
} }
.posterViewItem:hover, .userItem:hover { .posterViewItem:hover, .userItem:hover {
@ -489,11 +495,19 @@ form, .readOnlyContent {
.posterViewItem { .posterViewItem {
font-size: 16px; font-size: 16px;
padding-bottom: 29px;
}
.posterViewItemWithDualText {
padding-bottom: 58px;
} }
.posterViewItemText { .posterViewItemText {
padding-top: 5px; padding-top: 5px;
max-width: 190px; }
.posterViewItemPrimaryText {
bottom: 29px;
} }
.posterViewItem img { .posterViewItem img {
@ -510,11 +524,7 @@ form, .readOnlyContent {
.posterViewItem img { .posterViewItem img {
max-width: 280px; max-width: 280px;
max-height: 280px; max-height: 250px;
}
.posterViewItemText {
max-width: 280px;
} }
} }
@ -522,19 +532,24 @@ form, .readOnlyContent {
.posterViewItem { .posterViewItem {
font-size: 19px; font-size: 19px;
padding-bottom: 33px;
} }
.posterViewItemText div{ .posterViewItemWithDualText {
padding-bottom: 66px;
}
.posterViewItemPrimaryText {
bottom: 33px;
}
.posterViewItemText {
height: 28px; height: 28px;
} }
.posterViewItem img { .posterViewItem img {
max-width: 352px; max-width: 352px;
max-height: 352px; max-height: 300px;
}
.posterViewItemText {
max-width: 352px;
} }
} }

11
Html/itemList.html
View file

@ -6,6 +6,17 @@
<body> <body>
<div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a"> <div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
<div data-role="content"> <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>
</div> </div>
</body> </body>

5
Html/scripts/ItemDetailPage.js
View file

@ -2,12 +2,15 @@
onPageShow: function () { onPageShow: function () {
ItemDetailPage.reload();
},
reload: function() {
var id = getParameterByName('id'); var id = getParameterByName('id');
Dashboard.showLoadingMsg(); Dashboard.showLoadingMsg();
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(ItemDetailPage.renderItem); ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(ItemDetailPage.renderItem);
}, },
renderItem: function (item) { renderItem: function (item) {

47
Html/scripts/ItemListPage.js
View file

@ -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);

7
Html/scripts/LoginPage.js
View file

@ -62,7 +62,7 @@
var background = Dashboard.getRandomMetroColor(); var background = Dashboard.getRandomMetroColor();
html += '<div class="posterViewItem">'; html += '<div class="posterViewItem posterViewItemWithDualText">';
if (user.HasPassword) { 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;' \">"; 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 += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
} }
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + user.Name + '</div>';
html += '<div class="posterViewItemText">'; html += '<div class="posterViewItemText">';
html += '<div>' + user.Name + '</div>';
html += '<div>';
var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate); var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
if (lastSeen != "") { if (lastSeen != "") {
html += lastSeen; html += lastSeen;
@ -96,7 +94,6 @@
} }
html += '</div>'; html += '</div>';
html += '</div>';
html += '</a>'; html += '</a>';
html += '</div>'; html += '</div>';

14
Html/scripts/site.js
View file

@ -414,9 +414,13 @@ var Dashboard = {
var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; 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) { if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
@ -443,10 +447,10 @@ var Dashboard = {
html += "<img style='background:" + Dashboard.getRandomMetroColor() + ";' src='css/images/defaultCollectionImage.png' />"; 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 class='posterViewItemText'>";
html += "<div>" + item.Name + "</div>"; html += item.Name;
html += "</div>" html += "</div>";
} }
html += "</a></div>"; html += "</a></div>";