mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
better centering on suggested pages
This commit is contained in:
parent
b5c43bdbf7
commit
75ff5c8f43
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -699,8 +699,8 @@ progress {
|
||||
}
|
||||
|
||||
.imgUserItemRating {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
@ -16,7 +16,9 @@
|
||||
<a href="gamestudios.html" data-role="button">Studios</a>
|
||||
</div>
|
||||
|
||||
<div class="ehsContent">
|
||||
<table class="ehsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="listHeader firstListHeader">Latest Unplayed Games</h1>
|
||||
|
||||
<div id="recentlyAddedItems">
|
||||
@ -28,10 +30,9 @@
|
||||
<div id="resumableItems">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -7,7 +7,9 @@
|
||||
<div id="indexPage" data-role="page" class="page type-home libraryPage" data-theme="a">
|
||||
<div data-role="content">
|
||||
|
||||
<div class="ehsContent">
|
||||
<table class="ehsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="listHeader firstListHeader">Views</h1>
|
||||
|
||||
<div id="views">
|
||||
@ -16,7 +18,9 @@
|
||||
<h1 class="listHeader">Collections</h1>
|
||||
|
||||
<div id="divCollections"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -18,7 +18,9 @@
|
||||
<a href="moviestudios.html" data-role="button">Studios</a>
|
||||
</div>
|
||||
|
||||
<div class="ehsContent">
|
||||
<table class="ehsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="listHeader firstListHeader">Latest Unwatched Movies</h1>
|
||||
|
||||
<div id="recentlyAddedItems">
|
||||
@ -37,8 +39,9 @@
|
||||
<div id="trailerItems">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -16,7 +16,9 @@
|
||||
<a href="musicgenres.html" data-role="button">Genres</a>
|
||||
</div>
|
||||
|
||||
<div class="ehsContent">
|
||||
<table class="ehsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="listHeader firstListHeader">Latest Albums</h1>
|
||||
|
||||
<div id="recentlyAddedAlbums">
|
||||
@ -40,7 +42,9 @@
|
||||
<div id="topPlayedSongs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -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 || {};
|
||||
|
||||
|
@ -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>';
|
||||
|
@ -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>';
|
||||
|
@ -16,7 +16,10 @@
|
||||
<a href="tvpeople.html" data-role="button">Actors</a>
|
||||
<a href="tvstudios.html" data-role="button">Networks</a>
|
||||
</div>
|
||||
<div class="ehsContent">
|
||||
|
||||
<table class="ehsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<h1 class="listHeader firstListHeader">Latest Unwatched Episodes</h1>
|
||||
|
||||
<div id="recentlyAddedItems">
|
||||
@ -28,7 +31,9 @@
|
||||
<div id="resumableItems">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
Loading…
Reference in New Issue
Block a user