1
0
Fork 0
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:
Luke Pulverenti 2016-08-08 22:10:12 -04:00
parent 274d8f6809
commit 782d50532d
16 changed files with 93 additions and 137 deletions

View file

@ -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",

View file

@ -215,7 +215,7 @@
return connectUser;
};
var minServerVersion = '3.0.5930';
var minServerVersion = '3.0.5971';
self.minServerVersion = function (val) {
if (val) {

View file

@ -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",

View file

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

View file

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

View file

@ -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">&nbsp;</div>';
nameHtml += '<div class="cardText cardText-secondary">&nbsp;</div>';
}
var html = '\

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

View file

@ -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 || '&nbsp;';
html += '</div>';
if (result.GameSystem) {
html += '<div class="cardText cardTextCentered">';
html += '<div class="cardText cardText-secondary cardTextCentered">';
html += result.GameSystem;
html += '</div>';
}

View file

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

View file

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

View file

@ -125,7 +125,6 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
queue: true,
playAllFromHere: !item.IsFolder,
queueAllFromHere: !item.IsFolder,
identify: false,
playlistId: playlistId,
collectionId: collectionId

View file

@ -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"
}

View file

@ -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"
}

View file

@ -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"
}

View file

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

View file

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