1
0
Fork 0
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:
Luke Pulverenti 2013-12-23 10:26:36 -05:00
parent 89a83ba77e
commit b9d90edfb2
9 changed files with 80 additions and 62 deletions

View file

@ -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;
} }

View file

@ -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;
} }

View file

@ -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,12 +145,12 @@
height: 162px; height: 162px;
} }
.smallBackdropPosterItem { .smallBackdropPosterItem {
width: 192px; width: 168px;
} }
.smallBackdropPosterItem .posterItemImage { .smallBackdropPosterItem .posterItemImage {
height: 108px; height: 94.5px;
} }
.portraitPosterItem { .portraitPosterItem {
@ -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) {

View file

@ -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 {

View file

@ -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);

View file

@ -878,7 +878,7 @@
if (options.showParentTitle) { if (options.showParentTitle) {
html += "<div class='" + cssclass + "'>"; html += "<div class='" + cssclass + "'>";
html += item.SeriesName || item.Album || "&nbsp;"; html += item.SeriesName || item.Album || item.AlbumArtist || "&nbsp;";
html += "</div>"; html += "</div>";
} }

View file

@ -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"
}); });
} }

View file

@ -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');
} }

View file

@ -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