mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
separate card style
This commit is contained in:
parent
274d8f6809
commit
782d50532d
16 changed files with 93 additions and 137 deletions
|
@ -16,12 +16,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.1.73",
|
||||
"_release": "1.1.73",
|
||||
"version": "1.1.74",
|
||||
"_release": "1.1.74",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.1.73",
|
||||
"commit": "3b108b8da07b5b715fe616f1528ad95acd15e061"
|
||||
"tag": "1.1.74",
|
||||
"commit": "3899ca26b73cbca2779ca2ff62c1063bf058ee4c"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/Emby.ApiClient.Javascript.git",
|
||||
"_target": "^1.1.51",
|
||||
|
|
|
@ -215,7 +215,7 @@
|
|||
return connectUser;
|
||||
};
|
||||
|
||||
var minServerVersion = '3.0.5930';
|
||||
var minServerVersion = '3.0.5971';
|
||||
self.minServerVersion = function (val) {
|
||||
|
||||
if (val) {
|
||||
|
|
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.162",
|
||||
"_release": "1.4.162",
|
||||
"version": "1.4.164",
|
||||
"_release": "1.4.164",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.162",
|
||||
"commit": "04e8903ff6b76ca7f1eaa4e1967f9dab0c9deca7"
|
||||
"tag": "1.4.164",
|
||||
"commit": "cb3f0c04702e4aa460840d7587c92f11f0ec6c33"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -1,4 +1,7 @@
|
|||
.card {
|
||||
border: 0;
|
||||
font-size: inherit !important;
|
||||
font-family: inherit !important;
|
||||
text-transform: none;
|
||||
background-color: transparent !important;
|
||||
background: none !important;
|
||||
|
@ -41,12 +44,6 @@
|
|||
contain: layout style;
|
||||
}
|
||||
|
||||
button.card {
|
||||
border: 0 !important;
|
||||
font-size: inherit !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.cardScalable {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -70,7 +67,7 @@ button.card {
|
|||
.card .cardBox {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
transition: none !important;
|
||||
transition: none;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
|
@ -85,14 +82,6 @@ button.card {
|
|||
}
|
||||
}
|
||||
|
||||
.round .cardBox {
|
||||
border: .7em solid transparent;
|
||||
}
|
||||
|
||||
.round .cardImageContainer {
|
||||
border: .15em solid transparent;
|
||||
}
|
||||
|
||||
.card:focus {
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
|
@ -103,20 +92,6 @@ button.card {
|
|||
border-color: transparent;
|
||||
}
|
||||
|
||||
.cardImageContainer, .round:focus .cardImageContainer {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.round .cardBox {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.layout-tv .round:focus .cardBox {
|
||||
transform: scale(1.34, 1.34);
|
||||
}
|
||||
|
||||
.bottomPaddedCard .cardBox:not(.visualCardBox) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
@ -184,7 +159,7 @@ button.card {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
button.cardImageContainer {
|
||||
.cardImageContainer-button {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
@ -209,18 +184,10 @@ button.cardImageContainer {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.round .cardContent {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.scalableCard .cardImageContainer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.round .cardImageContainer, .round .cardImage {
|
||||
border-radius: 1000px;
|
||||
}
|
||||
|
||||
.cardImage.coveredImage, .cardImageContainer.coveredImage, .coveredImage .cardImage {
|
||||
background-size: 100% 100%;
|
||||
background-position: center center;
|
||||
|
@ -234,10 +201,6 @@ button.cardImageContainer {
|
|||
padding: .5em .3em;
|
||||
}
|
||||
|
||||
.cardFooter .cardText + .cardText {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.visualCardBox .cardScalable, .visualCardBox .cardFooter {
|
||||
background-color: #222326;
|
||||
}
|
||||
|
@ -283,6 +246,10 @@ button.cardImageContainer {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.cardText-secondary {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.cardCenteredText {
|
||||
white-space: normal;
|
||||
}
|
||||
|
|
|
@ -669,7 +669,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
return 'defaultCardColor' + getDefaultColorIndex(str);
|
||||
}
|
||||
|
||||
function getCardTextLines(lines, cssClass, forceLines) {
|
||||
function getCardTextLines(lines, cssClass, forceLines, addSecondaryClass) {
|
||||
|
||||
var html = '';
|
||||
|
||||
|
@ -680,6 +680,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
var text = lines[i];
|
||||
|
||||
if (i == 1 && addSecondaryClass) {
|
||||
cssClass += ' cardText-secondary';
|
||||
}
|
||||
|
||||
if (text) {
|
||||
html += "<div class='" + cssClass + "'>";
|
||||
html += text;
|
||||
|
@ -865,7 +869,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
}
|
||||
|
||||
html += getCardTextLines(lines, cssClass, !options.overlayText);
|
||||
html += getCardTextLines(lines, cssClass, !options.overlayText, isOuterFooter);
|
||||
|
||||
if (progressHtml) {
|
||||
html += progressHtml;
|
||||
|
@ -1076,6 +1080,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
} else {
|
||||
|
||||
if (overlayButtons && !separateCardBox) {
|
||||
cardImageContainerClass += ' cardImageContainerClass-button';
|
||||
cardImageContainerOpen = imgUrl ? ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<button type="button" data-action="' + action + '" class="itemAction ' + cardImageContainerClass + '">');
|
||||
cardImageContainerClose = '</button>';
|
||||
|
||||
|
|
|
@ -69,12 +69,12 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoa
|
|||
nameHtml += '<div class="cardText">' + person.Name + '</div>';
|
||||
|
||||
if (person.Role) {
|
||||
nameHtml += '<div class="cardText">as ' + person.Role + '</div>';
|
||||
nameHtml += '<div class="cardText cardText-secondary">as ' + person.Role + '</div>';
|
||||
}
|
||||
else if (person.Type) {
|
||||
nameHtml += '<div class="cardText">' + Globalize.translate('core#' + person.Type) + '</div>';
|
||||
nameHtml += '<div class="cardText cardText-secondary">' + Globalize.translate('core#' + person.Type) + '</div>';
|
||||
} else {
|
||||
nameHtml += '<div class="cardText"> </div>';
|
||||
nameHtml += '<div class="cardText cardText-secondary"> </div>';
|
||||
}
|
||||
|
||||
var html = '\
|
||||
|
|
29
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/roundcard.css
vendored
Normal file
29
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/roundcard.css
vendored
Normal file
|
@ -0,0 +1,29 @@
|
|||
.cardBox-round {
|
||||
border: .7em solid transparent;
|
||||
}
|
||||
|
||||
.cardImageContainer-round {
|
||||
border: .15em solid transparent;
|
||||
}
|
||||
|
||||
.cardImageContainer, .card-round:focus .cardImageContainer {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.cardBox-round {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.layout-tv .card-round:focus .cardBox {
|
||||
transform: scale(1.34, 1.34);
|
||||
}
|
||||
|
||||
.cardContent-round {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.cardImageContainer-round, .card-round .cardImage {
|
||||
border-radius: 1000px;
|
||||
}
|
|
@ -203,15 +203,15 @@
|
|||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="cardFooter">';
|
||||
html += '<div class="cardFooter cardFooter-visual">';
|
||||
html += '<div class="cardText cardTextCentered">' + result.Name + '</div>';
|
||||
|
||||
html += '<div class="cardText cardTextCentered">';
|
||||
html += '<div class="cardText cardText-secondary cardTextCentered">';
|
||||
html += result.ProductionYear || ' ';
|
||||
html += '</div>';
|
||||
|
||||
if (result.GameSystem) {
|
||||
html += '<div class="cardText cardTextCentered">';
|
||||
html += '<div class="cardText cardText-secondary cardTextCentered">';
|
||||
html += result.GameSystem;
|
||||
html += '</div>';
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
z-index: 999;
|
||||
z-index: 99998;
|
||||
border: 1px solid #43A047;
|
||||
}
|
||||
|
||||
|
@ -19,6 +19,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.itemSelectionCount {
|
||||
|
|
|
@ -109,7 +109,6 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
|
|||
touchDragging: 1, // Enable navigation by dragging the SLIDEE with touch events.
|
||||
releaseSwing: false, // Ease out on dragging swing release.
|
||||
swingSpeed: 0.2, // Swing synchronization speed, where: 1 = instant, 0 = infinite.
|
||||
elasticBounds: false, // Stretch SLIDEE position limits when dragging past FRAME boundaries.
|
||||
dragThreshold: 3, // Distance in pixels before Sly recognizes dragging.
|
||||
intervactive: null, // Selector for special interactive elements.
|
||||
|
||||
|
@ -351,16 +350,7 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
|
|||
*/
|
||||
function slideTo(newPos, immediate) {
|
||||
|
||||
// Handle overflowing position limits
|
||||
if (dragging.init && dragging.slidee && o.elasticBounds) {
|
||||
if (newPos > pos.end) {
|
||||
newPos = pos.end + (newPos - pos.end) / 6;
|
||||
} else if (newPos < pos.start) {
|
||||
newPos = pos.start + (newPos - pos.start) / 6;
|
||||
}
|
||||
} else {
|
||||
newPos = within(newPos, pos.start, pos.end);
|
||||
}
|
||||
newPos = within(newPos, pos.start, pos.end);
|
||||
|
||||
if (!transform) {
|
||||
|
||||
|
@ -388,10 +378,6 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
|
|||
|
||||
function renderAnimate() {
|
||||
|
||||
if (!transform) {
|
||||
return;
|
||||
}
|
||||
|
||||
var obj = getComputedStyle(slideeElement, null).getPropertyValue('transform').match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/);
|
||||
if (obj) {
|
||||
// [1] = x, [2] = y
|
||||
|
@ -441,66 +427,36 @@ define(['browser', 'layoutManager', 'dom', 'scrollStyles'], function (browser, l
|
|||
};
|
||||
}
|
||||
|
||||
function getOffsets(elems) {
|
||||
function getBoundingClientRect(elem) {
|
||||
|
||||
var doc = document;
|
||||
var results = [];
|
||||
|
||||
if (!doc) {
|
||||
return results;
|
||||
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
||||
// If we don't have gBCR, just use 0,0 rather than error
|
||||
if (elem.getBoundingClientRect) {
|
||||
return elem.getBoundingClientRect();
|
||||
} else {
|
||||
return { top: 0, left: 0 };
|
||||
}
|
||||
|
||||
var docElem = doc.documentElement;
|
||||
var docElemValues = {
|
||||
clientTop: docElem.clientTop,
|
||||
clientLeft: docElem.clientLeft
|
||||
};
|
||||
|
||||
var win = doc.defaultView;
|
||||
var winValues = {
|
||||
pageXOffset: win.pageXOffset,
|
||||
pageYOffset: win.pageYOffset
|
||||
};
|
||||
|
||||
var box;
|
||||
var elem;
|
||||
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
|
||||
elem = elems[i];
|
||||
// Support: BlackBerry 5, iOS 3 (original iPhone)
|
||||
// If we don't have gBCR, just use 0,0 rather than error
|
||||
if (elem.getBoundingClientRect) {
|
||||
box = elem.getBoundingClientRect();
|
||||
} else {
|
||||
box = { top: 0, left: 0 };
|
||||
}
|
||||
|
||||
results[i] = {
|
||||
top: box.top + winValues.pageYOffset - docElemValues.clientTop,
|
||||
left: box.left + winValues.pageXOffset - docElemValues.clientLeft
|
||||
};
|
||||
}
|
||||
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the position object.
|
||||
*
|
||||
* @param {Mixed} item
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
* Returns the position object.
|
||||
*
|
||||
* @param {Mixed} item
|
||||
*
|
||||
* @return {Object}
|
||||
*/
|
||||
self.getPos = function (item) {
|
||||
|
||||
var offsets = getOffsets([slideeElement, item]);
|
||||
var doc = document;
|
||||
|
||||
var slideeOffset = offsets[0];
|
||||
var itemOffset = offsets[1];
|
||||
var slideeOffset = getBoundingClientRect(slideeElement);
|
||||
var itemOffset = getBoundingClientRect(item);
|
||||
|
||||
var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
|
||||
var size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
||||
var size = o.horizontal ? itemOffset.width : itemOffset.height;
|
||||
if (!size) {
|
||||
size = item[o.horizontal ? 'offsetWidth' : 'offsetHeight'];
|
||||
}
|
||||
|
||||
var centerOffset = o.centerOffset || 0;
|
||||
|
||||
|
|
|
@ -125,7 +125,6 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
|
|||
queue: true,
|
||||
playAllFromHere: !item.IsFolder,
|
||||
queueAllFromHere: !item.IsFolder,
|
||||
identify: false,
|
||||
playlistId: playlistId,
|
||||
collectionId: collectionId
|
||||
|
||||
|
|
|
@ -32,14 +32,14 @@
|
|||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-icon",
|
||||
"homepage": "https://github.com/polymerelements/iron-icon",
|
||||
"_release": "1.0.9",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.9",
|
||||
"commit": "f6fb241901377e30e2c9c6cd47e3e8e8beb6574d"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
||||
"_source": "git://github.com/polymerelements/iron-icon.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-icon"
|
||||
"_originalSource": "polymerelements/iron-icon"
|
||||
}
|
|
@ -26,14 +26,14 @@
|
|||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"main": "iron-meta.html",
|
||||
"homepage": "https://github.com/polymerelements/iron-meta",
|
||||
"homepage": "https://github.com/PolymerElements/iron-meta",
|
||||
"_release": "1.1.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.1",
|
||||
"commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-meta.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-meta"
|
||||
"_originalSource": "PolymerElements/iron-meta"
|
||||
}
|
|
@ -32,14 +32,14 @@
|
|||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/polymer/polymer",
|
||||
"homepage": "https://github.com/Polymer/polymer",
|
||||
"_release": "1.6.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.6.1",
|
||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||
},
|
||||
"_source": "git://github.com/polymer/polymer.git",
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.1.0",
|
||||
"_originalSource": "polymer/polymer"
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
|
@ -1433,6 +1433,7 @@ var AppInfo = {};
|
|||
define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
|
||||
define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
|
||||
|
||||
define("roundCardStyle", ["cardStyle", 'css!' + embyWebComponentsBowerPath + "/cardbuilder/roundcard"], returnFirstDependency);
|
||||
define("cardStyle", ['css!' + embyWebComponentsBowerPath + "/cardbuilder/card"], returnFirstDependency);
|
||||
define("cardBuilder", [embyWebComponentsBowerPath + "/cardbuilder/cardbuilder"], returnFirstDependency);
|
||||
define("peoplecardbuilder", [embyWebComponentsBowerPath + "/cardbuilder/peoplecardbuilder"], returnFirstDependency);
|
||||
|
|
|
@ -42,7 +42,6 @@
|
|||
inheritThumb: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
showParentTitle: true,
|
||||
lazy: true,
|
||||
showTitle: true,
|
||||
|
@ -59,7 +58,6 @@
|
|||
showParentTitle: false,
|
||||
showUnplayedIndicator: false,
|
||||
showChildCountIndicator: true,
|
||||
overlayText: false,
|
||||
centerText: true,
|
||||
lazy: true,
|
||||
showTitle: false,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue