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