mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update card layouts
This commit is contained in:
parent
614e07a81d
commit
cee7db2ce0
29 changed files with 194 additions and 71 deletions
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.165",
|
||||
"_release": "1.4.165",
|
||||
"version": "1.4.166",
|
||||
"_release": "1.4.166",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.165",
|
||||
"commit": "ebe71bd8b4505ceb207efb226686eb6c3e842b4c"
|
||||
"tag": "1.4.166",
|
||||
"commit": "869fe388b2e0bd01bee868001f9e1d456a2c7ca1"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -48,19 +48,19 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
|
||||
.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
||||
.cardPadder-square, .cardPadder-overflowSquare {
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
||||
.cardPadder-portrait, .cardPadder-overflowPortrait {
|
||||
padding-bottom: 150%;
|
||||
}
|
||||
|
||||
.bannerCard .cardPadder {
|
||||
.cardPadder-banner {
|
||||
padding-bottom: 18.5%;
|
||||
}
|
||||
|
||||
|
|
|
@ -1073,7 +1073,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
cardContentClose = '</button>';
|
||||
}
|
||||
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder-' + options.shape + '"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||
cardBoxClose = '</div>';
|
||||
cardScalableClose = '</div>';
|
||||
cardImageContainerClose = '</div>';
|
||||
|
|
|
@ -9,16 +9,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
return i.Type == 'Video';
|
||||
})[0] || {};
|
||||
|
||||
var shape = (options.backdropShape || 'backdrop') + 'Card';
|
||||
var shape = (options.backdropShape || 'backdrop');
|
||||
|
||||
if (videoStream.Width && videoStream.Height) {
|
||||
|
||||
if ((videoStream.Width / videoStream.Height) <= 1.34) {
|
||||
shape = (options.squareShape || 'square') + 'Card';
|
||||
shape = (options.squareShape || 'square');
|
||||
}
|
||||
}
|
||||
|
||||
className += ' ' + shape;
|
||||
className += ' ' + shape + 'Card';
|
||||
|
||||
if (options.block || options.rows) {
|
||||
className += ' block';
|
||||
|
@ -37,7 +37,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
|
||||
var chapter = chapters[i];
|
||||
|
||||
html += buildChapterCard(item, apiClient, chapter, i, options, className);
|
||||
html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
|
||||
itemsInRow++;
|
||||
|
||||
if (options.rows && itemsInRow >= options.rows) {
|
||||
|
@ -65,7 +65,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
return null;
|
||||
}
|
||||
|
||||
function buildChapterCard(item, apiClient, chapter, index, options, className) {
|
||||
function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
|
||||
|
||||
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
|
||||
|
||||
|
@ -88,7 +88,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
|||
<button type="button" class="' + className + '"' + dataAttributes + '> \
|
||||
<div class="cardBox">\
|
||||
<div class="cardScalable">\
|
||||
<div class="cardPadder"></div>\
|
||||
<div class="cardPadder-'+ shape + '"></div>\
|
||||
<div class="cardContent">\
|
||||
' + cardImageContainer + '\
|
||||
</div>\
|
||||
|
|
|
@ -81,7 +81,7 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoa
|
|||
<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"> \
|
||||
<div class="visualCardBox cardBox">\
|
||||
<div class="cardScalable">\
|
||||
<div class="cardPadder"></div>\
|
||||
<div class="cardPadder-portrait"></div>\
|
||||
<div class="cardContent">\
|
||||
' + cardImageContainer + '\
|
||||
</div>\
|
||||
|
|
|
@ -8,7 +8,8 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
|
|||
actionSheet.show({
|
||||
|
||||
title: options.text,
|
||||
items: options.buttons
|
||||
items: options.buttons,
|
||||
timeout: options.timeout
|
||||
|
||||
}).then(resolve, reject);
|
||||
});
|
||||
|
@ -45,7 +46,7 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
|
|||
|
||||
if (options.title) {
|
||||
html += '<h2>' + options.title + '</h2>';
|
||||
}
|
||||
}
|
||||
|
||||
var text = options.html || options.text;
|
||||
|
||||
|
|
|
@ -105,14 +105,14 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
|
|||
}
|
||||
}
|
||||
|
||||
if (options.open !== false) {
|
||||
if (item.Type != 'Timer' && item.Type != 'Audio') {
|
||||
commands.push({
|
||||
name: globalize.translate('sharedcomponents#Open'),
|
||||
id: 'open'
|
||||
});
|
||||
}
|
||||
}
|
||||
//if (options.open !== false) {
|
||||
// if (item.Type != 'Timer' && item.Type != 'Audio') {
|
||||
// commands.push({
|
||||
// name: globalize.translate('sharedcomponents#Open'),
|
||||
// id: 'open'
|
||||
// });
|
||||
// }
|
||||
//}
|
||||
|
||||
if (canPlay) {
|
||||
if (options.play !== false) {
|
||||
|
|
|
@ -188,7 +188,7 @@
|
|||
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
||||
html += '<div class="cardBox visualCardBox">';
|
||||
html += '<div class="cardScalable">';
|
||||
html += '<div class="cardPadder"></div>';
|
||||
html += '<div class="cardPadder-portrait"></div>';
|
||||
|
||||
html += '<div class="cardContent searchImage">';
|
||||
|
||||
|
|
|
@ -40,14 +40,11 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
|||
|
||||
resetRegistration();
|
||||
|
||||
function show(title, options, timeoutMs) {
|
||||
function showPersistentNotification(title, options, timeoutMs) {
|
||||
serviceWorkerRegistration.showNotification(title, options);
|
||||
}
|
||||
|
||||
resetRegistration();
|
||||
|
||||
if (serviceWorkerRegistration && !timeoutMs) {
|
||||
serviceWorkerRegistration.showNotification(title, options);
|
||||
return;
|
||||
}
|
||||
function showNonPersistentNotification(title, options, timeoutMs) {
|
||||
|
||||
try {
|
||||
var notif = new Notification(title, options);
|
||||
|
@ -69,6 +66,18 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
|||
}
|
||||
}
|
||||
|
||||
function show(title, options, timeoutMs) {
|
||||
|
||||
resetRegistration();
|
||||
|
||||
if (serviceWorkerRegistration) {
|
||||
showPersistentNotification(title, options, timeoutMs);
|
||||
return;
|
||||
}
|
||||
|
||||
showNonPersistentNotification(title, options, timeoutMs);
|
||||
}
|
||||
|
||||
function showNewItemNotification(item, apiClient) {
|
||||
|
||||
var notification = {
|
||||
|
@ -162,10 +171,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
|||
else if (status == 'progress') {
|
||||
notification.title = globalize.translate('sharedcomponents#InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
|
||||
|
||||
//notification.actions =
|
||||
//[
|
||||
// { action: 'cancel', title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
|
||||
//];
|
||||
notification.actions =
|
||||
[
|
||||
{ action: 'cancel-install-' + installation.Id, title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
|
||||
];
|
||||
}
|
||||
|
||||
if (status == 'progress') {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue