enable additional css containment

This commit is contained in:
Luke Pulverenti 2016-05-29 22:15:32 -04:00
parent ee96fa577b
commit e6d3222572
11 changed files with 32 additions and 70 deletions

View File

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.3.98",
"_release": "1.3.98",
"version": "1.3.99",
"_release": "1.3.99",
"_resolution": {
"type": "version",
"tag": "1.3.98",
"commit": "f4b1f61aa32d6266aa63b151e10d773201870ba4"
"tag": "1.3.99",
"commit": "7d4af256dfc6ba03b587ae34ed567557c441f2c1"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View File

@ -148,6 +148,7 @@
text-decoration: none;
/* Needed in firefox */
text-align: left;
contain: strict;
}
@media all and (min-width: 500px) {
@ -300,6 +301,7 @@
align-items: center;
/* Needed for Firefox */
text-align: left;
contain: strict;
}
.timeslotCellInner {

View File

@ -56,13 +56,14 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
var self = {};
var enableFade = browser.animate && !browser.mobile;
function fillImage(elem, source, enableEffects) {
if (!source) {
source = elem.getAttribute('data-src');
}
if (source) {
if (self.enableFade && enableEffects !== false) {
if (enableFade && enableEffects !== false) {
imageFetcher.loadImage(elem, source).then(fadeIn);
} else {
imageFetcher.loadImage(elem, source);
@ -73,10 +74,12 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
function fadeIn(elem) {
var duration = layoutManager.tv ? 200 : 300;
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = { duration: 300, iterations: 1 };
var timing = { duration: duration, iterations: 1 };
elem.animate(keyframes, timing);
}

View File

@ -36,7 +36,7 @@
"tag": "v1.5.2",
"commit": "18e8e12dcd9a4560de480562f65935feed334b86"
},
"_source": "git://github.com/PolymerElements/iron-selector.git",
"_source": "git://github.com/polymerelements/iron-selector.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-selector"
"_originalSource": "polymerelements/iron-selector"
}

View File

@ -34,6 +34,6 @@
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.0.0",
"_target": "^1.1.0",
"_originalSource": "Polymer/polymer"
}

View File

@ -1,32 +0,0 @@
define(['iron-list', 'lazyload-image'], function () {
function getTemplate(scrollTarget) {
var maxPhysical = 200;
// is="lazyload-image"
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/ironcardlist/ironcardlist.template.html', true);
xhr.onload = function (e) {
var html = this.response;
html = html.replace('${maxphysical}', maxPhysical);
html = html.replace('${scrolltarget}', scrollTarget);
resolve(html);
}
xhr.send();
});
}
return {
getTemplate: getTemplate
};
});

View File

@ -1,18 +0,0 @@
<template is="dom-bind">
<iron-list as="item" id="ironList" scroll-target="${scrolltarget}" max-physical-count="${maxphysical}" style="width:96%;" grid>
<template>
<div class$="{{item.elemClass}}" data-action$="{{item.defaultAction}}" data-itemid$="{{item.data-itemid}}" data-commands$="{{item.data-commands}}" data-context$="{{item.data-context}}" data-isfolder$="{{item.data-isfolder}}" data-itemtype$="{{item.data-itemtype}}" data-mediatype$="{{item.data-mediatype}}" data-positionticks$="{{item.data-positionticks}}" data-playaccess$="{{item.data-playaccess}}" data-locationtype$="{{item.data-locationtype}}" data-index$="{{item.data-index}}" data-albumid$="{{item.data-albumid}}" data-channelid$="{{item.data-channelid}}" data-artistid$="{{item.data-artistid}}">
<div class$="{{item.cardBoxClass}}">
<div class="cardScalable">
<div class="cardPadder"></div>
<a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">
<img is="lazyload-image" class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />
<div inner-h-t-m-l="{{item.overlayHtml}}"></div>
</a>
</div>
<div inner-h-t-m-l="{{item.footerHtml}}"></div>
</div>
</div>
</template>
</iron-list>
</template>

View File

@ -2,12 +2,23 @@
display: inline-block;
text-align: left;
position: relative;
contain: style;
}
iron-list .card {
display: block;
/*.itemsContainer .card {
contain: layout style;
}
.itemsContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.itemsContainer.smoothScrollX, .itemsContainer.hiddenScrollX {
display: block;
}*/
.card, .card a {
text-decoration: none;
font-weight: 400 !important;

View File

@ -62,6 +62,10 @@
padding-bottom: 0;
}
.pageTabContent {
contain: style;
}
.pageWithAbsoluteTabs .pageTabContent, .libraryPage > .ui-content {
padding-top: 10px;
}
@ -1166,13 +1170,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
}
}
@media all and (min-height: 480px) and (max-width: 800px) {
.absolutePageTabContent .itemsContainerWithAlphaPicker iron-list {
width: 99.5% !important;
}
}
@media all and (min-height: 500px) {
.alphabetPicker {

View File

@ -31,7 +31,7 @@
<div class="favoriteSections"></div>
</div>
<div class="pageTabContent ehsContent" id="upcomingTab" data-index="3">
<div id="upcomingItems" class="itemsContainer">
<div id="upcomingItems">
</div>
<div class="noItemsMessage hide">
<p>${MessageNothingHere}</p>

View File

@ -3125,7 +3125,6 @@ var AppInfo = {};
console.log('Loaded dependencies in onAppReady');
imageLoader.enableFade = browserInfo.animate && !browserInfo.mobile;
window.ImageLoader = imageLoader;
layoutManager.init();