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