better centering on suggested pages

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1458,7 +1458,6 @@
createGalleryImage: function (item, type, tag, index) {
var downloadWidth = 400;
var lightboxWidth = 800;
var html = '';
@ -1467,7 +1466,7 @@
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 += '<img class="galleryImage" src="' + LibraryBrowser.getImageUrl(item, type, index, {
maxwidth: downloadWidth,
maxwidth: lightboxWidth,
tag: tag
}) + '" />';
html += '</div>';

View File

@ -37,7 +37,7 @@
var html = '';
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) {
html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');"></div>';

View File

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