cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

better centering on suggested pages

Browse Source
This commit is contained in:
Luke Pulverenti 2013-05-03 16:50:13 -04:00
parent b5c43bdbf7
commit 75ff5c8f43
13 changed files with 129 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dashboard-ui/css/librarybrowser.css
View File

@ -94,19 +94,20 @@
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
} }
.ehsContent {
max-width: 800px;
}
} }
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
.ehsContent { .ehsContent {
max-width: 850px; max-width: 940px;
} }
} }
@media all and (min-width: 1440px) { @media all and (min-width: 1440px) {
.ehsContent {
max-width: 900px;
}
.detailPageContent { .detailPageContent {
width: 70%; width: 70%;
@ -228,7 +229,7 @@
/* gets rid of default border in Firefox and Opera. */ /* gets rid of default border in Firefox and Opera. */
border: 0; border: 0;
margin: 0; margin: 0;
height: 12px; height: 14px;
} }
/* Polyfill */ /* Polyfill */
@ -278,7 +279,12 @@
.userDataIcons .itemProgressBar { .userDataIcons .itemProgressBar {
vertical-align: top; vertical-align: top;
position: relative; position: relative;
top: 4px; top: 3px;
margin-right: 1em; margin-right: 1em;
width: 50px;
}
.tileItem .itemProgressBar {
top: 2px;
width: 40px; width: 40px;
} }

48
dashboard-ui/css/posteritem.css
View File

@ -20,7 +20,7 @@
.posterItemImage { .posterItemImage {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom; background-position: center bottom;
background-color: #000; background-color: #000;
} }
@ -37,7 +37,7 @@
overflow: hidden; overflow: hidden;
text-wrap: none; text-wrap: none;
white-space: nowrap; white-space: nowrap;
padding: 4px 5px 4px; padding: 4px;
background: #181818; background: #181818;
text-shadow: none; text-shadow: none;
} }
@ -59,11 +59,11 @@
} }
.squarePosterItem { .squarePosterItem {
width: 160px; width: 150px;
} }
.squarePosterItem .posterItemImage { .squarePosterItem .posterItemImage {
height: 160px; height: 150px;
} }
.backdropPosterItem { .backdropPosterItem {
@ -74,6 +74,14 @@
height: 90px; height: 90px;
} }
.smallBackdropPosterItem {
width: 160px;
}
.smallBackdropPosterItem .posterItemImage {
height: 90px;
}
.portraitPosterItem { .portraitPosterItem {
width: 100px; width: 100px;
} }
@ -97,14 +105,6 @@
@media all and (min-width: 750px) { @media all and (min-width: 750px) {
.squarePosterItem {
width: 160px;
}
.squarePosterItem .posterItemImage {
height: 160px;
}
.portraitPosterItem { .portraitPosterItem {
width: 100px; width: 100px;
} }
@ -117,19 +117,11 @@
@media all and (min-width: 1200px) { @media all and (min-width: 1200px) {
.backdropPosterItem { .backdropPosterItem {
width: 272px; width: 224px;
} }
.backdropPosterItem .posterItemImage { .backdropPosterItem .posterItemImage {
height: 153px; height: 126px;
}
.squarePosterItem {
width: 160px;
}
.squarePosterItem .posterItemImage {
height: 160px;
} }
.portraitPosterItem { .portraitPosterItem {
@ -139,10 +131,6 @@
.portraitPosterItem .posterItemImage { .portraitPosterItem .posterItemImage {
height: 162px; height: 162px;
} }
.posterItem {
font-size: 15px;
}
} }
@media all and (min-width: 1440px) { @media all and (min-width: 1440px) {
@ -166,14 +154,6 @@
@media all and (min-width: 1920px) { @media all and (min-width: 1920px) {
.backdropPosterItem {
width: 320px;
}
.backdropPosterItem .posterItemImage {
height: 180px;
}
.squarePosterItem { .squarePosterItem {
width: 185px; width: 185px;
} }

4
dashboard-ui/css/site.css
View File

@ -699,8 +699,8 @@ progress {
} }
.imgUserItemRating { .imgUserItemRating {
height: 24px; height: 20px;
width: 24px; width: 20px;
margin-right: 1em; margin-right: 1em;
cursor: pointer; cursor: pointer;
} }

27
dashboard-ui/gamesrecommended.html
View File

@ -16,22 +16,23 @@
<a href="gamestudios.html" data-role="button">Studios</a> <a href="gamestudios.html" data-role="button">Studios</a>
</div> </div>
<div class="ehsContent"> <table class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Unplayed Games</h1> <tr>
<td>
<h1 class="listHeader firstListHeader">Latest Unplayed Games</h1>
<div id="recentlyAddedItems"> <div id="recentlyAddedItems">
</div> </div>
<div id="resumableSection" style="display: none;"> <div id="resumableSection" style="display: none;">
<h1 class="listHeader">Latest Played Games</h1> <h1 class="listHeader">Latest Played Games</h1>
<div id="resumableItems">
</div>
</div>
</div>
<div id="resumableItems">
</div>
</div>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</body> </body>

18
dashboard-ui/index.html
View File

@ -7,16 +7,20 @@
<div id="indexPage" data-role="page" class="page type-home libraryPage" data-theme="a"> <div id="indexPage" data-role="page" class="page type-home libraryPage" data-theme="a">
<div data-role="content"> <div data-role="content">
<div class="ehsContent"> <table class="ehsContent">
<h1 class="listHeader firstListHeader">Views</h1> <tr>
<td>
<h1 class="listHeader firstListHeader">Views</h1>
<div id="views"> <div id="views">
</div> </div>
<h1 class="listHeader">Collections</h1> <h1 class="listHeader">Collections</h1>
<div id="divCollections"></div> <div id="divCollections"></div>
</div> </td>
</tr>
</table>
</div> </div>
</div> </div>
</body> </body>

2
dashboard-ui/itembynamedetails.html
View File

@ -125,7 +125,7 @@
<p id="itemMiscInfo" class="itemMiscInfo"></p> <p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemOverview"></p> <p id="itemOverview"></p>
<p id="itemRatings"></p> <p id="itemRatings" class="userDataIcons"></p>
<p id="itemBirthday"></p> <p id="itemBirthday"></p>
<p id="itemBirthLocation"></p> <p id="itemBirthLocation"></p>
<p id="itemDeathDate"></p> <p id="itemDeathDate"></p>

14
dashboard-ui/itemdetails.html
View File

@ -116,7 +116,7 @@
<p id="itemMiscInfo" class="itemMiscInfo"></p> <p id="itemMiscInfo" class="itemMiscInfo"></p>
<p id="itemTagline" style="font-style: italic;"></p> <p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p> <p id="itemOverview"></p>
<p id="itemRatings"></p> <p id="itemRatings" class="userDataIcons"></p>
<p id="itemCommunityRating"></p> <p id="itemCommunityRating"></p>
<p id="itemPremiereDate"></p> <p id="itemPremiereDate"></p>
@ -158,12 +158,6 @@
<div id="galleryContent"></div> <div id="galleryContent"></div>
</div> </div>
</div> </div>
<div>
<div data-role="collapsible" id="themeSongsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Theme Songs</h3>
<div id="themeSongsContent"></div>
</div>
</div>
<div> <div>
<div data-role="collapsible" id="castCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="castCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Cast & Crew</h3> <h3>Cast & Crew</h3>
@ -176,6 +170,12 @@
<div id="scenesContent"></div> <div id="scenesContent"></div>
</div> </div>
</div> </div>
<div>
<div data-role="collapsible" id="themeSongsCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Theme Songs</h3>
<div id="themeSongsContent"></div>
</div>
</div>
<div> <div>
<div data-role="collapsible" id="themeVideosCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false"> <div data-role="collapsible" id="themeVideosCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
<h3>Theme Videos</h3> <h3>Theme Videos</h3>

35
dashboard-ui/moviesrecommended.html
View File

@ -18,27 +18,30 @@
<a href="moviestudios.html" data-role="button">Studios</a> <a href="moviestudios.html" data-role="button">Studios</a>
</div> </div>
<div class="ehsContent"> <table class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Unwatched Movies</h1> <tr>
<td>
<h1 class="listHeader firstListHeader">Latest Unwatched Movies</h1>
<div id="recentlyAddedItems"> <div id="recentlyAddedItems">
</div> </div>
<div id="resumableSection" style="display: none;"> <div id="resumableSection" style="display: none;">
<h1 class="listHeader">Resume</h1> <h1 class="listHeader">Resume</h1>
<div id="resumableItems"> <div id="resumableItems">
</div> </div>
</div> </div>
<div id="trailerSection" style="display: none;"> <div id="trailerSection" style="display: none;">
<h1 class="listHeader firstListHeader">Latest Unwatched Trailers</h1> <h1 class="listHeader firstListHeader">Latest Unwatched Trailers</h1>
<div id="trailerItems">
</div>
</div>
</div>
<div id="trailerItems">
</div>
</div>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</body> </body>

40
dashboard-ui/musicrecommended.html
View File

@ -16,31 +16,35 @@
<a href="musicgenres.html" data-role="button">Genres</a> <a href="musicgenres.html" data-role="button">Genres</a>
</div> </div>
<div class="ehsContent"> <table class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Albums</h1> <tr>
<td>
<h1 class="listHeader firstListHeader">Latest Albums</h1>
<div id="recentlyAddedAlbums"> <div id="recentlyAddedAlbums">
</div> </div>
<h1 class="listHeader">Latest Songs</h1> <h1 class="listHeader">Latest Songs</h1>
<div id="recentlyAddedSongs"> <div id="recentlyAddedSongs">
</div> </div>
<div id="recentlyPlayed" style="display: none;"> <div id="recentlyPlayed" style="display: none;">
<h1 class="listHeader">Recently Played</h1> <h1 class="listHeader">Recently Played</h1>
<div id="recentlyPlayedSongs"> <div id="recentlyPlayedSongs">
</div> </div>
</div> </div>
<div id="topPlayed" style="display: none;"> <div id="topPlayed" style="display: none;">
<h1 class="listHeader">Most Frequently Played</h1> <h1 class="listHeader">Most Frequently Played</h1>
<div id="topPlayedSongs"> <div id="topPlayedSongs">
</div> </div>
</div> </div>
</div> </td>
</tr>
</table>
</div> </div>
</div> </div>
</body> </body>

21
dashboard-ui/scripts/Itemdetailpage.js
View File

@ -344,33 +344,32 @@
var chapter = chapters[i]; var chapter = chapters[i];
var chapterName = chapter.Name || "Chapter " + i; var chapterName = chapter.Name || "Chapter " + i;
html += '<div class="scenePosterViewItem posterViewItem posterViewItemWithDualText">'; html += '<a class="posterItem smallBackdropPosterItem" href="#play-Chapter-' + i + '" onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');">';
html += '<a href="#play-Chapter-' + i + '" onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');">';
var imgUrl;
if (chapter.ImageTag) { if (chapter.ImageTag) {
var imgUrl = ApiClient.getImageUrl(item.Id, { imgUrl = ApiClient.getImageUrl(item.Id, {
width: 400, width: 400,
tag: chapter.ImageTag, tag: chapter.ImageTag,
type: "Chapter", type: "Chapter",
index: i index: i
}); });
html += '<img src="' + imgUrl + '" />';
} else { } else {
html += '<img src="css/images/items/list/chapter.png"/>'; imgUrl = "css/images/items/list/chapter.png";
} }
html += '<div class="posterViewItemText posterViewItemPrimaryText">' + chapterName + '</div>'; html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
html += '<div class="posterViewItemText">';
html += '<div class="posterItemText">' + chapterName + '</div>';
html += '<div class="posterItemText">';
html += ticks_to_human(chapter.StartPositionTicks); html += ticks_to_human(chapter.StartPositionTicks);
html += '</div>'; html += '</div>';
html += '</a>'; html += '</a>';
html += '</div>';
} }
$('#scenesContent', page).html(html); $('#scenesContent', page).html(html);
@ -478,7 +477,7 @@
var item = items[i]; var item = items[i];
html += '<a class="posterItem backdropPosterItem" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">'; html += '<a class="posterItem smallBackdropPosterItem" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">';
var imageTags = item.ImageTags || {}; var imageTags = item.ImageTags || {};

3
dashboard-ui/scripts/librarybrowser.js
View File

@ -1458,7 +1458,6 @@
createGalleryImage: function (item, type, tag, index) { createGalleryImage: function (item, type, tag, index) {
var downloadWidth = 400;
var lightboxWidth = 800; var lightboxWidth = 800;
var html = ''; var html = '';
@ -1467,7 +1466,7 @@
html += '<div class="posterViewItem" style="padding-bottom:0px;">'; html += '<div class="posterViewItem" style="padding-bottom:0px;">';
html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">'; html += '<a href="#pop_' + index + '_' + tag + '" data-transition="fade" data-rel="popup" data-position-to="window">';
html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, { html += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxwidth: downloadWidth, maxwidth: lightboxWidth,
tag: tag tag: tag
}) + '" />'; }) + '" />';
html += '</div>'; html += '</div>';

2
dashboard-ui/scripts/plugincatalogpage.js
View File

@ -37,7 +37,7 @@
var html = ''; var html = '';
var plugin = availablePlugins[i]; var plugin = availablePlugins[i];
html += "<a class='posterItem backdropPosterItem transparentPosterItem' href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>"; html += "<a class='posterItem smallBackdropPosterItem transparentPosterItem' href='addPlugin.html?name=" + encodeURIComponent(plugin.name) + "'>";
if (plugin.thumbImage) { if (plugin.thumbImage) {
html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');"></div>'; html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');"></div>';

25
dashboard-ui/tvrecommended.html
View File

@ -16,19 +16,24 @@
<a href="tvpeople.html" data-role="button">Actors</a> <a href="tvpeople.html" data-role="button">Actors</a>
<a href="tvstudios.html" data-role="button">Networks</a> <a href="tvstudios.html" data-role="button">Networks</a>
</div> </div>
<div class="ehsContent">
<h1 class="listHeader firstListHeader">Latest Unwatched Episodes</h1>
<div id="recentlyAddedItems"> <table class="ehsContent">
</div> <tr>
<td>
<h1 class="listHeader firstListHeader">Latest Unwatched Episodes</h1>
<div id="resumableSection" style="display: none;"> <div id="recentlyAddedItems">
<h1 class="listHeader">Resume</h1> </div>
<div id="resumableItems"> <div id="resumableSection" style="display: none;">
</div> <h1 class="listHeader">Resume</h1>
</div>
</div> <div id="resumableItems">
</div>
</div>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</body> </body>