update components

This commit is contained in:
Luke Pulverenti 2016-07-18 13:13:29 -04:00
parent e305bf40c8
commit b4f87ddb3a
8 changed files with 52 additions and 36 deletions

View file

@ -7,11 +7,14 @@
background-color: rgba(0, 0, 0, .85);
z-index: 998;
line-height: initial;
font-size: initial;
}
.cardOverlayInner {
padding: 11px 12px 10px;
padding: .5em;
color: #fff;
text-align: left;
}
.cardOverlayInner button:last-child {

View file

@ -47,7 +47,7 @@
var keyframes = [
{ transform: 'translateY(0)', offset: 0 },
{ transform: 'translateY(100%)', offset: 1 }];
var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
var timing = { duration: 180, iterations: 1, fill: 'forwards', easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
elem.classList.add('hide');
@ -72,12 +72,12 @@
var keyframes = [
{ transform: 'translateY(100%)', offset: 0 },
{ transform: 'translateY(0)', offset: 1 }];
var timing = { duration: 300, iterations: 1, fill: 'forwards', easing: 'ease-out' };
var timing = { duration: 200, iterations: 1, fill: 'forwards', easing: 'ease-out' };
elem.animate(keyframes, timing);
});
}
function getOverlayHtml(item, currentUser, card) {
function getOverlayHtml(apiClient, item, currentUser, card) {
var html = '';
@ -93,12 +93,12 @@
var name = itemHelper.getDisplayName(item);
html += '<div>';
var logoHeight = isSmallItem || isMiniItem ? 20 : 26;
var logoHeight = 26;
var imgUrl;
if (parentName && item.ParentLogoItemId) {
imgUrl = ApiClient.getScaledImageUrl(item.ParentLogoItemId, {
imgUrl = apiClient.getScaledImageUrl(item.ParentLogoItemId, {
maxHeight: logoHeight,
type: 'logo',
tag: item.ParentLogoImageTag
@ -109,7 +109,7 @@
}
else if (item.ImageTags.Logo) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
imgUrl = apiClient.getScaledImageUrl(item.Id, {
maxHeight: logoHeight,
type: 'logo',
tag: item.ImageTags.Logo
@ -179,18 +179,17 @@
function onShowTimerExpired(elem) {
elem = elem.querySelector('a');
var innerElem = elem.querySelector('.cardOverlayTarget');
if (!innerElem) {
innerElem = document.createElement('div');
innerElem.classList.add('hide');
innerElem.classList.add('cardOverlayTarget');
parentWithClass(elem, 'cardContent').appendChild(innerElem);
(elem.querySelector('.cardContent') || elem.querySelector('.cardBox')).appendChild(innerElem);
}
var dataElement = parentWithAttribute(elem, 'data-id');
var dataElement = elem;
var id = dataElement.getAttribute('data-id');
var type = dataElement.getAttribute('data-type');
@ -212,9 +211,7 @@
var card = elem;
elem = parentWithAttribute(elem, 'data-id');
innerElem.innerHTML = getOverlayHtml(item, user, card);
innerElem.innerHTML = getOverlayHtml(apiClient, item, user, card);
});
slideUpToShow(innerElem);
@ -223,8 +220,15 @@
function onHoverIn(e) {
var elem = e.target;
var card = parentWithClass(elem, 'card');
if (!elem.classList.contains('cardImage')) {
if (!card) {
return;
}
elem = card.querySelector('.cardImage,.cardImageContainer');
if (!elem) {
return;
}
@ -243,7 +247,7 @@
showOverlayTimeout = setTimeout(function () {
onShowTimerExpired(elem);
}, 1200);
}, 1000);
}
function preventTouchHover() {