mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
started preset views
This commit is contained in:
Luke Pulverenti
parent
d27b583884
commit
acdb860386
8 changed files with 102 additions and 138 deletions
BIN
dashboard-ui/css/images/bgflip.png
Normal file
BIN
dashboard-ui/css/images/bgflip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
dashboard-ui/css/images/items/list/audiowide.png
Normal file
BIN
dashboard-ui/css/images/items/list/audiowide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8 KiB |
|
|
@ -1,64 +1,69 @@
|
|||
/*.libraryContent {
|
||||
.libraryPage .header {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
display: none;
|
||||
.libraryPageHeader {
|
||||
margin: -5px 0 0;
|
||||
}
|
||||
|
||||
.libraryPageHeader a {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.libraryPage .ui-content {
|
||||
padding: 15px 30px 100px;
|
||||
}
|
||||
|
||||
.libraryPage, .itemListContent {
|
||||
background: #262626!important;
|
||||
/*background: #494949 url(images/bgflip.png) repeat-x!important;*/
|
||||
background-attachment: fixed!important;
|
||||
}
|
||||
|
||||
.libraryPage .currentUsername {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.listHeader {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.firstListHeader {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.libraryViewNav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.libraryViewNav .ui-btn-inner {
|
||||
padding: .6em 20px;
|
||||
}
|
||||
|
||||
.ehsContent {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media all and (min-width: 650px) {
|
||||
|
||||
.libraryContent {
|
||||
float: right;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 35%;
|
||||
border-right: 2px solid #666;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
.libraryContent {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1200px) {
|
||||
.libraryContent {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
width: 25%;
|
||||
.ehsContent {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1440px) {
|
||||
.libraryContent {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
.libraryContent {
|
||||
width: 87.5%;
|
||||
.ehsContent {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.librarySidebar {
|
||||
width: 12.5%;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,11 +86,6 @@ pre, textarea.pre {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.libraryPage, .itemListContent {
|
||||
background: #262626!important;
|
||||
background-attachment: fixed!important;
|
||||
}
|
||||
|
||||
/*
|
||||
Header
|
||||
*/
|
||||
|
|
@ -149,10 +144,6 @@ pre, textarea.pre {
|
|||
top: 4px;
|
||||
}
|
||||
|
||||
.libraryPage .currentUsername {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h1 .imageLink {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
@ -165,18 +156,6 @@ h1 .imageLink {
|
|||
opacity: .5;
|
||||
}
|
||||
|
||||
.type-home h1, .listHeader {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: normal;
|
||||
border-bottom: 1px solid #777;
|
||||
}
|
||||
|
||||
.libraryPage .ui-content > h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -300,11 +279,6 @@ form, .readOnlyContent {
|
|||
right: 30px;
|
||||
}
|
||||
|
||||
.libraryPage .ui-content {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.type-interior > .ui-content {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
|
|
|||
|
|
@ -7,26 +7,31 @@
|
|||
<div id="indexPage" data-role="page" class="page type-home libraryPage" data-theme="a">
|
||||
<div data-role="content">
|
||||
|
||||
<div class="libraryContent">
|
||||
<h1>What's New <a href="itemlist.html?SortBy=DateCreated&SortOrder=Descending&Recursive=true&Title=Recently Added" class="imageLink">
|
||||
<img src="css/images/rightarrow.png" /></a></h1>
|
||||
<div class="ehsContent">
|
||||
<h1 class="listHeader firstListHeader">Views</h1>
|
||||
|
||||
<div id="divWhatsNew"></div>
|
||||
|
||||
<div id="divResumable" style="display: none;">
|
||||
<h1>Resume <a href="itemlist.html?IsResumable=true&Recursive=true&Title=Resumable Items" class="imageLink">
|
||||
<img src="css/images/rightarrow.png" /></a></h1>
|
||||
|
||||
<div id="divResumableItems"></div>
|
||||
<div>
|
||||
<div class="posterViewItem">
|
||||
<a href="movies.html">
|
||||
<img style="background: #E12026;" src="css/images/items/list/chapter.png"><div class="posterViewItemText">Movies</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="posterViewItem">
|
||||
<a href="#">
|
||||
<img style="background: #FF870F;" src="css/images/items/list/collection.png"><div class="posterViewItemText">TV Shows</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="posterViewItem">
|
||||
<a href="#">
|
||||
<img style="background: #4BB3DD;" src="css/images/items/list/audiowide.png"><div class="posterViewItemText">Music</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Collections</h1>
|
||||
<h1 class="listHeader">Collections</h1>
|
||||
|
||||
<div id="divCollections"></div>
|
||||
</div>
|
||||
|
||||
<div class="librarySidebar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
23
dashboard-ui/movies.html
Normal file
23
dashboard-ui/movies.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Media Browser</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="moviesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
|
||||
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
|
||||
<img src="css/images/home.png"></a>Movies</h1>
|
||||
<div data-role="content">
|
||||
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
|
||||
<a href="#" data-role="button">Recommended</a>
|
||||
<a href="movies.html" data-role="button" class="ui-btn-active">Movies</a>
|
||||
<a href="#" data-role="button">Box Sets</a>
|
||||
<a href="#" data-role="button">Genres</a>
|
||||
<a href="#" data-role="button">Actors</a>
|
||||
<a href="#" data-role="button">Directors</a>
|
||||
<a href="#" data-role="button">Favorites</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -14,51 +14,6 @@
|
|||
|
||||
var options = {
|
||||
|
||||
limit: 6,
|
||||
sortBy: "DateCreated",
|
||||
sortOrder: "Descending",
|
||||
filters: "IsRecentlyAdded,IsNotFolder",
|
||||
ImageTypes: "Primary,Backdrop,Thumb",
|
||||
recursive: true
|
||||
};
|
||||
|
||||
ApiClient.getItems(userId, options).done(function (result) {
|
||||
|
||||
$('#divWhatsNew', page).html(Dashboard.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferBackdrop: true,
|
||||
showTitle: true
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
options = {
|
||||
|
||||
limit: 6,
|
||||
sortBy: "DatePlayed",
|
||||
sortOrder: "Descending",
|
||||
filters: "IsResumable",
|
||||
recursive: true
|
||||
};
|
||||
|
||||
ApiClient.getItems(userId, options).done(function (result) {
|
||||
|
||||
$('#divResumableItems', page).html(Dashboard.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
preferBackdrop: true,
|
||||
showTitle: true
|
||||
}));
|
||||
|
||||
if (result.Items.length) {
|
||||
$('#divResumable', page).show();
|
||||
} else {
|
||||
$('#divResumable', page).hide();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
options = {
|
||||
|
||||
sortBy: "SortName"
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -744,17 +744,19 @@ var Dashboard = {
|
|||
|
||||
var isLibraryPage = page.hasClass('libraryPage');
|
||||
|
||||
headerHtml += '<a class="logo" href="index.html">';
|
||||
if (!page.hasClass('noLogoPage')) {
|
||||
headerHtml += '<a class="logo" href="index.html">';
|
||||
|
||||
if (page.hasClass('standalonePage')) {
|
||||
if (page.hasClass('standalonePage')) {
|
||||
|
||||
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
|
||||
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextblack.png" />';
|
||||
}
|
||||
else if (isLibraryPage) {
|
||||
|
||||
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
|
||||
}
|
||||
headerHtml += '</a>';
|
||||
}
|
||||
else if (isLibraryPage) {
|
||||
|
||||
headerHtml += '<img class="imgLogoIcon" src="css/images/mblogoicon.png" /><img class="imgLogoText" src="css/images/mblogotextwhite.png" />';
|
||||
}
|
||||
headerHtml += '</a>';
|
||||
|
||||
var imageColor = isLibraryPage ? "white" : "black";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue