mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
adjust mobile image sizes
This commit is contained in:
Luke Pulverenti
parent
eac4ec9324
commit
6a2085d68b
6 changed files with 142 additions and 51 deletions
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.largeCardMargin .cardBox {
|
||||
margin: 8px;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
/*@media all and (max-width: 600px) {
|
||||
|
|
@ -112,6 +112,10 @@
|
|||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.smallSquareCard .cardPadder {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.letterBoxCard .cardPadder {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
|
@ -120,6 +124,10 @@
|
|||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.smallPortraitCard .cardPadder {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.bannerCard .cardPadder {
|
||||
padding-bottom: 18.5%;
|
||||
}
|
||||
|
|
@ -252,6 +260,10 @@
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.smallSquareCard {
|
||||
width: 33.3334%;
|
||||
}
|
||||
|
||||
.backdropCard {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -264,6 +276,10 @@
|
|||
width: 33.3%;
|
||||
}
|
||||
|
||||
.smallPortraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.cardProgress {
|
||||
line-height: 7px;
|
||||
}
|
||||
|
|
@ -287,13 +303,24 @@
|
|||
.squareCard {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
.smallSquareCard {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 400px) {
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media all and (min-width: 540px) {
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 33.3%;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -303,6 +330,10 @@
|
|||
.portraitCard {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.smallPortraitCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 700px) {
|
||||
|
|
@ -326,7 +357,11 @@
|
|||
}
|
||||
|
||||
.smallBackdropCard {
|
||||
width: 25%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.smallSquareCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -340,6 +375,10 @@
|
|||
.smallBackdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.smallPortraitCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -364,6 +403,14 @@
|
|||
.smallBackdropCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.smallSquareCard {
|
||||
width: 16.666666666666666666666666666667%;
|
||||
}
|
||||
|
||||
.smallPortraitCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -380,6 +427,10 @@
|
|||
.smallBackdropCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
}
|
||||
|
||||
.smallPortraitCard {
|
||||
width: 12.5%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -525,14 +576,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
@media all and (min-width: 1100px) {
|
||||
|
||||
.homePageSmallBackdropCard {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1920px) {
|
||||
@media all and (min-width: 1440px) {
|
||||
|
||||
.homePageSmallBackdropCard {
|
||||
width: 14.285714285714285714285714285714%;
|
||||
|
|
|
|||
|
|
@ -95,6 +95,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 800px) {
|
||||
|
||||
.hiddenSectionOnNonMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.firstListHeader + .sectionHeaderButton {
|
||||
top: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,10 @@
|
|||
return deferred.promise();
|
||||
}
|
||||
|
||||
function createMediaLinks(options) {
|
||||
function getLibraryButtonsHtml(items) {
|
||||
|
||||
var html = "";
|
||||
|
||||
var items = options.items;
|
||||
|
||||
// "My Library" backgrounds
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
@ -86,12 +84,12 @@
|
|||
cssClass += ' ' + item.CollectionType + 'buttonCard';
|
||||
}
|
||||
|
||||
var href = item.url || LibraryBrowser.getHref(item, options.context);
|
||||
var href = item.url || LibraryBrowser.getHref(item);
|
||||
|
||||
html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
|
||||
html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
|
||||
|
||||
html += "<div class='cardText' style='padding:5px 10px;color:#fff;'>";
|
||||
html += "<div class='cardText' style='padding:6px 10px;color:#fff;'>";
|
||||
html += '<i class="fa ' + icon + '"></i>';
|
||||
html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
|
||||
html += "</div>";
|
||||
|
|
@ -114,12 +112,7 @@
|
|||
html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
|
||||
}
|
||||
html += '<div>';
|
||||
html += createMediaLinks({
|
||||
items: items,
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
|
||||
});
|
||||
html += getLibraryButtonsHtml(items);
|
||||
html += '</div>';
|
||||
|
||||
$(elem).html(html);
|
||||
|
|
@ -206,16 +199,16 @@
|
|||
|
||||
function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
$(elem).addClass('hiddenSectionOnMobile');
|
||||
} else {
|
||||
$(elem).removeClass('hiddenSectionOnMobile');
|
||||
}
|
||||
|
||||
return getUserViews(user.Id).done(function (items) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
html += '<div class="hiddenSectionOnMobile">';
|
||||
} else {
|
||||
html += '<div>';
|
||||
}
|
||||
|
||||
if (items.length) {
|
||||
|
||||
var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
|
||||
|
|
@ -241,6 +234,13 @@
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
if (autoHideOnMobile) {
|
||||
html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
|
||||
html += getLibraryButtonsHtml(items);
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
$(elem).html(html).lazyChildren().createCardMenus();
|
||||
|
||||
|
|
|
|||
|
|
@ -1177,7 +1177,7 @@
|
|||
|
||||
var chapters = item.Chapters || [];
|
||||
|
||||
var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
|
||||
var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
|
||||
|
||||
for (var i = 0, length = chapters.length; i < length; i++) {
|
||||
|
||||
|
|
@ -1399,7 +1399,7 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
|
||||
var maxWwidth = LibraryBrowser.getPosterViewInfo().thumbWidth;
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
|
|||
|
|
@ -954,28 +954,25 @@
|
|||
|
||||
getPostersPerRow: function (screenWidth) {
|
||||
|
||||
var div = $('<div class="card squareCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var square = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
function getValue(shape) {
|
||||
|
||||
div = $('<div class="card backdropCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var thumb = screenWidth / $('.cardImage', div).innerWidth();
|
||||
var div = $('<div class="card ' + shape + 'Card"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var width = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
return width;
|
||||
}
|
||||
|
||||
div = $('<div class="card portraitCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var poster = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
var info = {};
|
||||
|
||||
div = $('<div class="card bannerCard"><div class="cardBox"><div class="cardImage"></div></div></div>').appendTo(document.body);
|
||||
var banner = screenWidth / $('.cardImage', div).innerWidth();
|
||||
div.remove();
|
||||
info.square = getValue('square');
|
||||
info.smallSquare = getValue('smallSquare');
|
||||
info.thumb = getValue('backdrop');
|
||||
info.portrait = getValue('portrait');
|
||||
info.smallPortrait = getValue('smallPortrait');
|
||||
info.banner = getValue('banner');
|
||||
info.smallThumb = getValue('smallBackdrop');
|
||||
|
||||
return {
|
||||
thumb: thumb,
|
||||
poster: poster,
|
||||
square: square,
|
||||
banner: banner
|
||||
};
|
||||
return info;
|
||||
},
|
||||
|
||||
posterSizes: [],
|
||||
|
|
@ -1011,8 +1008,11 @@
|
|||
}
|
||||
|
||||
var thumbWidth = screenWidth / imagesPerRow.thumb;
|
||||
var posterWidth = screenWidth / imagesPerRow.poster;
|
||||
var smallThumbWidth = screenWidth / imagesPerRow.smallThumb;
|
||||
var posterWidth = screenWidth / imagesPerRow.portrait;
|
||||
var smallPosterWidth = screenWidth / imagesPerRow.smallPortrait;
|
||||
var squareSize = screenWidth / imagesPerRow.square;
|
||||
var smallSquareSize = screenWidth / imagesPerRow.smallSquare;
|
||||
var bannerWidth = screenWidth / imagesPerRow.banner;
|
||||
|
||||
if (!AppInfo.isTouchPreferred) {
|
||||
|
|
@ -1020,7 +1020,9 @@
|
|||
var roundTo = 100;
|
||||
|
||||
thumbWidth = Math.round(thumbWidth / roundTo) * roundTo;
|
||||
smallThumbWidth = Math.round(smallThumbWidth / roundTo) * roundTo;
|
||||
posterWidth = Math.round(posterWidth / roundTo) * roundTo;
|
||||
smallPosterWidth = Math.round(smallPosterWidth / roundTo) * roundTo;
|
||||
squareSize = Math.round(squareSize / roundTo) * roundTo;
|
||||
bannerWidth = Math.round(bannerWidth / roundTo) * roundTo;
|
||||
}
|
||||
|
|
@ -1029,10 +1031,26 @@
|
|||
var defaultThumb = 'backdrop';
|
||||
var defaultSquare = 'square';
|
||||
|
||||
if (AppInfo.hasLowImageBandwidth) {
|
||||
defaultThumb = 'smallBackdrop';
|
||||
defaultSquare = 'smallSquare';
|
||||
defaultPortait = 'smallPortrait';
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
defaultThumb: defaultThumb,
|
||||
smallThumbWidth: Math.round(smallThumbWidth),
|
||||
thumbWidth: Math.round(thumbWidth),
|
||||
|
||||
defaultPortait: defaultPortait,
|
||||
posterWidth: Math.round(posterWidth),
|
||||
smallPosterWidth: Math.round(smallPosterWidth),
|
||||
|
||||
defaultSquare: defaultSquare,
|
||||
squareSize: Math.round(squareSize),
|
||||
smallSquareSize: Math.round(smallSquareSize),
|
||||
|
||||
bannerWidth: Math.round(bannerWidth),
|
||||
screenWidth: screenWidth
|
||||
};
|
||||
|
|
@ -1071,12 +1089,27 @@
|
|||
}
|
||||
}
|
||||
|
||||
var sizes = LibraryBrowser.getPosterViewInfo();
|
||||
var posterInfo = LibraryBrowser.getPosterViewInfo();
|
||||
|
||||
var thumbWidth = sizes.thumbWidth;
|
||||
var posterWidth = sizes.posterWidth;
|
||||
var squareSize = sizes.squareSize;
|
||||
var bannerWidth = sizes.bannerWidth;
|
||||
var thumbWidth = posterInfo.thumbWidth;
|
||||
var posterWidth = posterInfo.posterWidth;
|
||||
var squareSize = posterInfo.squareSize;
|
||||
var bannerWidth = posterInfo.bannerWidth;
|
||||
|
||||
if (options.shape == 'backdrop' && posterInfo.defaultThumb == 'smallBackdrop') {
|
||||
options.shape = 'smallBackdrop';
|
||||
thumbWidth = posterInfo.smallThumbWidth;
|
||||
}
|
||||
|
||||
else if (options.shape == 'portrait' && posterInfo.defaultPortait == 'smallPortrait') {
|
||||
options.shape = 'smallPortrait';
|
||||
posterWidth = posterInfo.smallPosterWidth;
|
||||
}
|
||||
|
||||
else if (options.shape == 'square' && posterInfo.defaultSquare == 'smallSquare') {
|
||||
options.shape = 'smallSquare';
|
||||
squareSize = posterInfo.smallSquareSize;
|
||||
}
|
||||
|
||||
for (var i = 0, length = items.length; i < length; i++) {
|
||||
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
|
||||
// TODO: With iOS 8 this might not be required anymore
|
||||
if ($.browser.safari) {
|
||||
$('.itemVideo').css('visibility', 'hidden');
|
||||
//$('.itemVideo').css('visibility', 'hidden');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue