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

View file

@ -115,8 +115,8 @@
}
.channelImageContainer .itemDetailImage {
max-width: 160px;
max-height: 100px;
max-width: 200px;
max-height: 110px;
margin-top: 1em;
margin-bottom: 1em;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -70,7 +70,6 @@
showNewIndicator: false,
shape: "backdrop",
showTitle: true,
showParentTitle: true,
showPremiereDate: true,
showPremiereDateIndex: true,
preferThumb: true