cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

continue card layout reconciliation

Browse Source
This commit is contained in:
Luke Pulverenti 2016-07-30 00:21:03 -04:00
parent ba7627fa69
commit d0100ecb29
10 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View File

@ -63,11 +63,14 @@ button.card {
transition: none !important;
border-radius: 0 !important;
border: 3px solid transparent;
will-change: transform;
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
overflow: hidden;
}
.layout-tv .card .cardBox {
will-change: transform;
}
button.cardContent {
display: block;
}
@ -148,14 +151,20 @@ button.cardContent {
background-clip: content-box !important;
}
.scalableCard .cardImageContainer {
.cardContent {
overflow: hidden;
}
.scalableCard .cardContent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto !important;
height: auto !important;
}
.scalableCard .cardImageContainer {
height: 100%;
}
.round .cardImageContainer, .round .cardImage {
@ -262,7 +271,7 @@ button.cardContent {
position: absolute;
bottom: 0;
right: 0;
margin: 0 .25em .25em 0;
margin: 0 .35em .5em 0;
z-index: 1;
}
@ -299,7 +308,7 @@ button.cardContent {
width: 14.285714285714285714285714285714%;
}
.scalableCard.backdropCard {
.scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 100%;
}
@ -325,10 +334,10 @@ button.cardContent {
width: 42%;
}
@media all and (max-width: 420px) {
@media all and (min-width: 420px) {
.scalableCard.backdropCard {
width: 100% !important;
.scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 50%;
}
}

13
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js vendored
View File

@ -1096,10 +1096,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
timerAttributes += ' data-seriestimerid="' + item.SeriesTimerId + '"';
}
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var actionAttribute;
if (tagName == 'button') {
@ -1113,8 +1109,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
className += ' bottomPaddedCard';
}
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
return '\
<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '" data-mediatype="' + item.MediaType + '"' + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + ' data-prefix="' + prefix + '" class="' + className + '"> \
' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
</' + tagName + '>';
}

2
dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css vendored
View File

@ -1,7 +1,7 @@
.itemProgressBar {
background: rgba(0,0,0,.5);
position: relative;
height: .7vh;
height: .75vh;
}
.itemProgressBarForeground {

9
dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js vendored
View File

@ -162,12 +162,7 @@
innerElem.classList.add('hide');
innerElem.classList.add('cardOverlayTarget');
var appendTo;
if (elem.classList.contains('cardImageContainer')) {
appendTo = dom.parentWithClass(elem, 'cardBox');
} else {
appendTo = elem.parentNode;
}
var appendTo = dom.parentWithClass(elem, 'cardContent') || elem;
appendTo.appendChild(innerElem);
}
@ -204,7 +199,7 @@
function onHoverIn(e) {
var elem = e.target;
var card = dom.parentWithClass(elem, 'cardImageContainer') || dom.parentWithClass(elem, 'cardImage');
var card = dom.parentWithClass(elem, 'cardImageContainer');
if (!card) {
return;

5
dashboard-ui/bower_components/emby-webcomponents/listview/listview.js vendored
View File

@ -196,8 +196,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : '';
var mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
var collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
var channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + i + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-mediatype="' + item.MediaType + '" data-type="' + item.Type + '"' + positionTicksData + collectionIdData + playlistIdData + '>';
html += '<' + outerTagName + ' class="' + cssClass + '" data-index="' + i + '"' + playlistItemId + ' data-action="' + action + '" data-isfolder="' + item.IsFolder + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + positionTicksData + collectionIdData + playlistIdData + '>';
if (!clickEntireItem && options.dragHandle) {
html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>';

24
dashboard-ui/bower_components/emby-webcomponents/shortcuts.js vendored
View File

@ -163,11 +163,12 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
});
}
function showPlayMenu(card, target) {
function getItemInfoFromCard(card) {
var item = {
return {
Type: card.getAttribute('data-type'),
Id: card.getAttribute('data-id'),
CollectionType: card.getAttribute('data-collectiontype'),
ChannelId: card.getAttribute('data-channelid'),
SeriesId: card.getAttribute('data-seriesid'),
ServerId: card.getAttribute('data-serverid'),
@ -177,6 +178,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
PlaybackPositionTicks: parseInt(card.getAttribute('data-positionticks') || '0')
}
};
}
function showPlayMenu(card, target) {
var item = getItemInfoFromCard(card);
require(['playMenu'], function (playMenu) {
@ -199,17 +205,13 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
id = card.getAttribute('data-id');
}
var serverId = card.getAttribute('data-serverid');
var type = card.getAttribute('data-type');
var isfolder = card.getAttribute('data-isfolder') == 'true';
var item = getItemInfoFromCard(card);
var serverId = item.ServerId;
var type = item.Type;
if (action == 'link') {
showItem({
Id: id,
Type: type,
IsFolder: isfolder,
ServerId: serverId
});
showItem(item);
}
else if (action == 'instantmix') {

4
dashboard-ui/channelitems.html
View File

@ -3,9 +3,11 @@
<div data-role="content">
<div class="viewSettings">
<div class="listTopPaging">
<div class="paging">
</div>
</div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
<div class="paging">
</div>
</div>
</div>

4
dashboard-ui/devices/ios/ios.css
View File

@ -31,10 +31,6 @@ body:not(.dashboardDocument) .mainDrawerButton {
background-color: rgba(28,28,28,.92) !important;
}
.homeTopViews .defaultBackground .cardImage {
background-color: #303030;
}
.viewMenuBar {
/* It needs this in order to retain height since we're positioning the contents absolutely */
height: 50px;

10
dashboard-ui/scripts/channelitems.js
View File

@ -125,8 +125,6 @@
filterButton: true
});
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
updateFilterControls(page);
html = cardBuilder.getCardsHtml({
@ -141,8 +139,14 @@
centerText: true
});
var i, length;
var elems = page.querySelectorAll('.paging');
for (i = 0, length = elems.length; i < length; i++) {
elems[i].innerHTML = pagingHtml;
}
var elem = page.querySelector('#items');
elem.innerHTML = html + pagingHtml;
elem.innerHTML = html;
ImageLoader.lazyChildren(elem);
$('.btnNextPage', page).on('click', function () {

4
dashboard-ui/scripts/sections.js
View File

@ -472,9 +472,9 @@
var scrollX = enableScrollX() && browserInfo.safari && screenWidth > 800;
if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer homeTopViews">';
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else {
html += '<div is="emby-itemscontainer" class="itemsContainer homeTopViews verticalItemsContainer">';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">';
}
html += cardBuilder.getCardsHtml({
items: items,