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:
parent
ba7627fa69
commit
d0100ecb29
10 changed files with 58 additions and 44 deletions
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 + '>';
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue