1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

continue card layout reconciliation

This commit is contained in:
Luke Pulverenti 2016-07-30 00:21:03 -04:00
parent ba7627fa69
commit d0100ecb29
10 changed files with 58 additions and 44 deletions

View file

@ -63,11 +63,14 @@ button.card {
transition: none !important;
border-radius: 0 !important;
border: 3px solid transparent;
will-change: transform;
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
overflow: hidden;
}
.layout-tv .card .cardBox {
will-change: transform;
}
button.cardContent {
display: block;
}
@ -148,14 +151,20 @@ button.cardContent {
background-clip: content-box !important;
}
.scalableCard .cardImageContainer {
.cardContent {
overflow: hidden;
}
.scalableCard .cardContent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto !important;
height: auto !important;
}
.scalableCard .cardImageContainer {
height: 100%;
}
.round .cardImageContainer, .round .cardImage {
@ -262,7 +271,7 @@ button.cardContent {
position: absolute;
bottom: 0;
right: 0;
margin: 0 .25em .25em 0;
margin: 0 .35em .5em 0;
z-index: 1;
}
@ -299,7 +308,7 @@ button.cardContent {
width: 14.285714285714285714285714285714%;
}
.scalableCard.backdropCard {
.scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 100%;
}
@ -325,10 +334,10 @@ button.cardContent {
width: 42%;
}
@media all and (max-width: 420px) {
@media all and (min-width: 420px) {
.scalableCard.backdropCard {
width: 100% !important;
.scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 50%;
}
}

View file

@ -1096,10 +1096,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
}
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var actionAttribute;
if (tagName == 'button') {
@ -1113,8 +1109,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
className += ' bottomPaddedCard';
}
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
return '\
<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
</' + tagName + '>';
}