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

fix web project

This commit is contained in:
Luke Pulverenti 2015-02-03 01:57:45 -05:00
parent 911880340e
commit 4ad1f56376
5 changed files with 39 additions and 35 deletions

View file

@ -135,7 +135,7 @@
} }
.detailButtonsContainer { .detailButtonsContainer {
padding: 0 0 .5em; padding: 0 0 1em;
text-align: center; text-align: center;
} }
@ -370,7 +370,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background-size: cover; background-size: cover;
background-position: center 15%; background-position: center 15%;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 500px; height: 550px;
position: relative; position: relative;
} }
@ -421,10 +421,15 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.detailImageContainer { .detailImageContainer {
position: absolute; position: absolute;
top: -66px;
} }
.detailImageContainer { .portraitDetailImageContainer {
top: -66px; top: -26px;
}
.thumbDetailImageContainer {
top: -26px;
} }
.itemDetailImage { .itemDetailImage {
@ -434,19 +439,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
border: solid 1px #222; border: solid 1px #222;
} }
.thumbDetailImage { .thumbDetailImageContainer img {
max-width: 360px; max-width: 360px;
max-height: 360px; max-height: 360px;
} }
.squareDetailImage { .squareDetailImageContainer img {
max-width: 240px; max-width: 240px;
max-height: 240px; max-height: 240px;
} }
.portraitDetailImage { .portraitDetailImageContainer img {
max-width: 240px; max-width: 240px;
max-height: 360px; max-height: 300px;
} }
.itemDetailGalleryLink img:hover { .itemDetailGalleryLink img:hover {
@ -464,7 +469,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
} }
.detailContentEffectedByPortraitImage { .detailContentEffectedByPortraitImage {
margin-left: 260px; margin-left: 220px;
} }
.detailContentEffectedByImage a { .detailContentEffectedByImage a {
@ -479,7 +484,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
} }
.lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage { .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
min-height: 140px; min-height: 115px;
} }
.parentName { .parentName {
@ -499,20 +504,20 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-left: 20px; margin-left: 20px;
} }
.thumbDetailImage { .thumbDetailImageContainer img {
max-width: 340px; max-width: 340px;
} }
.squareDetailImage { .squareDetailImageContainer img {
max-width: 220px; max-width: 220px;
} }
.portraitDetailImage { .portraitDetailImageContainer img {
max-width: 220px; max-width: 220px;
} }
.lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage { .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
min-height: 110px; min-height: 85px;
} }
} }
@ -532,6 +537,9 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
padding: 0 1em; padding: 0 1em;
} }
.lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
min-height: initial;
}
.parentName { .parentName {

View file

@ -140,8 +140,8 @@
<p id="itemLinks"></p> <p id="itemLinks"></p>
<div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;"> <div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;">
<button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button> <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
<button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
<a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a> <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
<button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
</div> </div>
</td> </td>
</tr> </tr>
@ -149,8 +149,8 @@
</div> </div>
<div class="detailButtonsContainer mobileDetailButtons"> <div class="detailButtonsContainer mobileDetailButtons">
<button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button> <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
<button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
<a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a> <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
<button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
</div> </div>
<p class="itemOverview mobileOverview"></p> <p class="itemOverview mobileOverview"></p>
<div data-role="content" style="padding-top: 0;"> <div data-role="content" style="padding-top: 0;">

View file

@ -13,12 +13,12 @@
<a href="livetvtimers.html">${TabScheduled}</a> <a href="livetvtimers.html">${TabScheduled}</a>
<a href="livetvseriestimers.html">${TabSeries}</a> <a href="livetvseriestimers.html">${TabSeries}</a>
</div> </div>
<div> <div style="padding: 1em 0;">
<div> <div>
<table class="detailPageContent primaryDetailPageContent"> <table class="detailPageContent primaryDetailPageContent">
<tr> <tr>
<td style="vertical-align: top; padding: 0 1em 0 0;"> <td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div> <div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
</td> </td>
<td style="vertical-align: top; padding: 0;"> <td style="vertical-align: top; padding: 0;">
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p> <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>

View file

@ -18,7 +18,7 @@
<table class="detailPageContent primaryDetailPageContent"> <table class="detailPageContent primaryDetailPageContent">
<tr> <tr>
<td style="vertical-align: top; padding: 0 1em 0 0;"> <td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div> <div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
</td> </td>
<td style="vertical-align: top; padding: 0;"> <td style="vertical-align: top; padding: 0;">
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p> <p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>

View file

@ -2334,24 +2334,14 @@
if (detectRatio && item.PrimaryImageAspectRatio) { if (detectRatio && item.PrimaryImageAspectRatio) {
if (Math.abs(item.PrimaryImageAspectRatio - 1.777777778) < .3) { if (item.PrimaryImageAspectRatio >= 1.48) {
shape = 'thumb'; shape = 'thumb';
} else if (Math.abs(item.PrimaryImageAspectRatio - 1) < .2) { } else if (item.PrimaryImageAspectRatio >= .85 && item.PrimaryImageAspectRatio <= 1.34) {
shape = 'square'; shape = 'square';
} }
} }
var imgCssClass = 'itemDetailImage'; html += "<img class='itemDetailImage' src='" + url + "' />";
if (shape == 'thumb') {
imgCssClass += ' thumbDetailImage';
}
else if (shape == 'square') {
imgCssClass += ' squareDetailImage';
} else {
imgCssClass += ' portraitDetailImage';
}
html += "<img class='" + imgCssClass + "' src='" + url + "' />";
if (linkToGallery) { if (linkToGallery) {
html += "</a>"; html += "</a>";
@ -2378,20 +2368,26 @@
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage'); detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage'); detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage'); elem.addClass('thumbDetailImageContainer');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage'); elem.removeClass('portraitDetailImageContainer');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage'); elem.removeClass('squareDetailImageContainer');
} }
else if (shape == 'square') { else if (shape == 'square') {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage'); detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage'); detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage'); detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
elem.removeClass('thumbDetailImageContainer');
elem.removeClass('portraitDetailImageContainer');
elem.addClass('squareDetailImageContainer');
} else { } else {
detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage'); detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage'); detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage'); detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage');
elem.removeClass('thumbDetailImageContainer');
elem.addClass('portraitDetailImageContainer');
elem.removeClass('squareDetailImageContainer');
} }
}, },