mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
adjust tile styles
This commit is contained in:
parent
89a83ba77e
commit
b9d90edfb2
9 changed files with 80 additions and 62 deletions
|
@ -103,7 +103,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryPage > .ui-content {
|
.libraryPage > .ui-content {
|
||||||
padding: 10px 0;
|
padding: 10px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.libraryPage, .libraryPage .itemListContent {
|
.libraryPage, .libraryPage .itemListContent {
|
||||||
|
@ -379,14 +379,14 @@ a.itemTag:hover {
|
||||||
|
|
||||||
.lnkSibling {
|
.lnkSibling {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 240px;
|
top: 10px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #fff!important;
|
|
||||||
font-weight: normal!important;
|
font-weight: normal!important;
|
||||||
display: none;
|
display: none;
|
||||||
background-color: rgba(0,0,0,0.6);
|
background-color: rgba(0,0,0,0.6);
|
||||||
border-radius: 3px;
|
color: #ddd!important;
|
||||||
padding: 3px 5px;
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnkSibling:hover {
|
.lnkSibling:hover {
|
||||||
|
@ -597,14 +597,6 @@ a.itemTag:hover {
|
||||||
.lnkSibling:not(.hide) {
|
.lnkSibling:not(.hide) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnkSibling {
|
|
||||||
bottom: 270px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noBackdrop .lnkSibling {
|
|
||||||
bottom: 260px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
@media all and (min-width: 1000px) {
|
||||||
|
@ -612,10 +604,6 @@ a.itemTag:hover {
|
||||||
.itemBackdrop {
|
.itemBackdrop {
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.noBackdrop .lnkSibling {
|
|
||||||
bottom: 205px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 650px) {
|
@media all and (min-width: 650px) {
|
||||||
|
@ -639,6 +627,20 @@ a.itemTag:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 800px) {
|
||||||
|
|
||||||
|
.ehsContent {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 900px) {
|
||||||
|
|
||||||
|
.ehsContent {
|
||||||
|
max-width: 880px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
@media all and (min-width: 1000px) {
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
|
@ -671,14 +673,6 @@ a.itemTag:hover {
|
||||||
|
|
||||||
@media all and (min-width: 1440px) {
|
@media all and (min-width: 1440px) {
|
||||||
|
|
||||||
.lnkSibling {
|
|
||||||
bottom: 205px;
|
|
||||||
color: #ddd!important;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
max-width: 980px;
|
max-width: 980px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -115,8 +115,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.channelImageContainer .itemDetailImage {
|
.channelImageContainer .itemDetailImage {
|
||||||
max-width: 160px;
|
max-width: 200px;
|
||||||
max-height: 100px;
|
max-height: 110px;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
.posterItem {
|
.posterItem {
|
||||||
margin: 7px;
|
margin: 6px;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
font-weight: normal!important;
|
font-weight: normal!important;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -22,6 +22,12 @@
|
||||||
box-shadow: 0 0 20px 3px #2572EB;
|
box-shadow: 0 0 20px 3px #2572EB;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.smallBackdropPosterItem, .smallPosterItem {
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.posterItemImage {
|
.posterItemImage {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -139,13 +145,13 @@
|
||||||
height: 162px;
|
height: 162px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallBackdropPosterItem {
|
.smallBackdropPosterItem {
|
||||||
width: 192px;
|
width: 168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallBackdropPosterItem .posterItemImage {
|
.smallBackdropPosterItem .posterItemImage {
|
||||||
height: 108px;
|
height: 94.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portraitPosterItem {
|
.portraitPosterItem {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -161,6 +167,13 @@
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 400px) {
|
||||||
|
|
||||||
|
.backdropPosterItem {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 540px) {
|
@media all and (min-width: 540px) {
|
||||||
|
|
||||||
.backdropPosterItem {
|
.backdropPosterItem {
|
||||||
|
@ -172,6 +185,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 540px) {
|
||||||
|
|
||||||
|
.smallBackdropPosterItem {
|
||||||
|
width: 184px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallBackdropPosterItem .posterItemImage {
|
||||||
|
height: 103.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 650px) {
|
@media all and (min-width: 650px) {
|
||||||
|
|
||||||
.backdropPosterItem {
|
.backdropPosterItem {
|
||||||
|
@ -189,6 +213,14 @@
|
||||||
.storePosterItem .posterItemImage {
|
.storePosterItem .posterItemImage {
|
||||||
height: 110px;
|
height: 110px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.smallBackdropPosterItem {
|
||||||
|
width: 192px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallBackdropPosterItem .posterItemImage {
|
||||||
|
height: 108px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 750px) {
|
@media all and (min-width: 750px) {
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-width: 54px;
|
min-width: 54px;
|
||||||
padding: 0 8px;
|
padding: 0 4px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -116,13 +116,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 340px) {
|
|
||||||
|
|
||||||
.txtSearch {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 850px) {
|
@media all and (min-width: 850px) {
|
||||||
|
|
||||||
.txtSearch {
|
.txtSearch {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
SortOrder: "Ascending",
|
SortOrder: "Ascending",
|
||||||
IncludeItemTypes: "BoxSet",
|
IncludeItemTypes: "BoxSet",
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "DateCreated",
|
Fields: "DateCreated,PrimaryImageAspectRatio",
|
||||||
StartIndex: 0
|
StartIndex: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -29,9 +29,11 @@
|
||||||
var checkSortOption = $('.radioSortBy:checked', page);
|
var checkSortOption = $('.radioSortBy:checked', page);
|
||||||
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
||||||
|
|
||||||
html += LibraryBrowser.getPosterDetailViewHtml({
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
context: "movies"
|
shape: "portrait",
|
||||||
|
context: 'movies',
|
||||||
|
useAverageAspectRatio: true
|
||||||
});
|
});
|
||||||
|
|
||||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||||
|
|
|
@ -878,7 +878,7 @@
|
||||||
if (options.showParentTitle) {
|
if (options.showParentTitle) {
|
||||||
|
|
||||||
html += "<div class='" + cssclass + "'>";
|
html += "<div class='" + cssclass + "'>";
|
||||||
html += item.SeriesName || item.Album || " ";
|
html += item.SeriesName || item.Album || item.AlbumArtist || " ";
|
||||||
html += "</div>";
|
html += "</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
SortOrder: "Ascending",
|
SortOrder: "Ascending",
|
||||||
IncludeItemTypes: "Trailer",
|
IncludeItemTypes: "Trailer",
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "DateCreated",
|
Fields: "DateCreated,PrimaryImageAspectRatio",
|
||||||
StartIndex: 0
|
StartIndex: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -31,17 +31,12 @@
|
||||||
var checkSortOption = $('.radioSortBy:checked', page);
|
var checkSortOption = $('.radioSortBy:checked', page);
|
||||||
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
||||||
|
|
||||||
if (view == "Backdrop") {
|
if (view == "Poster") {
|
||||||
html += LibraryBrowser.getPosterDetailViewHtml({
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
preferBackdrop: true,
|
shape: "portrait",
|
||||||
context: "movies"
|
context: 'movies',
|
||||||
});
|
useAverageAspectRatio: true
|
||||||
}
|
|
||||||
else if (view == "Poster") {
|
|
||||||
html += LibraryBrowser.getPosterDetailViewHtml({
|
|
||||||
items: result.Items,
|
|
||||||
context: "movies"
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
SortOrder: "Ascending",
|
SortOrder: "Ascending",
|
||||||
IncludeItemTypes: "MusicAlbum",
|
IncludeItemTypes: "MusicAlbum",
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "DateCreated",
|
Fields: "DateCreated,PrimaryImageAspectRatio",
|
||||||
StartIndex: 0
|
StartIndex: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -32,10 +32,13 @@
|
||||||
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
$('.viewSummary', page).html(LibraryBrowser.getViewSummaryHtml(query, checkSortOption)).trigger('create');
|
||||||
|
|
||||||
if (view == "Poster") {
|
if (view == "Poster") {
|
||||||
html += LibraryBrowser.getPosterDetailViewHtml({
|
html = LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
context: "music",
|
shape: "square",
|
||||||
shape: "square"
|
context: 'music',
|
||||||
|
useAverageAspectRatio: true,
|
||||||
|
showTitle: true,
|
||||||
|
showParentTitle: true
|
||||||
});
|
});
|
||||||
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
$('.itemsContainer', page).removeClass('timelineItemsContainer');
|
||||||
}
|
}
|
||||||
|
|
|
@ -70,7 +70,6 @@
|
||||||
showNewIndicator: false,
|
showNewIndicator: false,
|
||||||
shape: "backdrop",
|
shape: "backdrop",
|
||||||
showTitle: true,
|
showTitle: true,
|
||||||
showParentTitle: true,
|
|
||||||
showPremiereDate: true,
|
showPremiereDate: true,
|
||||||
showPremiereDateIndex: true,
|
showPremiereDateIndex: true,
|
||||||
preferThumb: true
|
preferThumb: true
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue