mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code 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
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; transition: none !important;
border-radius: 0 !important; border-radius: 0 !important;
border: 3px solid transparent; border: 3px solid transparent;
will-change: transform;
/* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */ /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
overflow: hidden; overflow: hidden;
} }
.layout-tv .card .cardBox {
will-change: transform;
}
button.cardContent { button.cardContent {
display: block; display: block;
} }
@ -148,14 +151,20 @@ button.cardContent {
background-clip: content-box !important; background-clip: content-box !important;
} }
.scalableCard .cardImageContainer { .cardContent {
overflow: hidden;
}
.scalableCard .cardContent {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: auto !important; }
height: auto !important;
.scalableCard .cardImageContainer {
height: 100%;
} }
.round .cardImageContainer, .round .cardImage { .round .cardImageContainer, .round .cardImage {
@ -262,7 +271,7 @@ button.cardContent {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 0 .25em .25em 0; margin: 0 .35em .5em 0;
z-index: 1; z-index: 1;
} }
@ -299,7 +308,7 @@ button.cardContent {
width: 14.285714285714285714285714285714%; width: 14.285714285714285714285714285714%;
} }
.scalableCard.backdropCard { .scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 100%; width: 100%;
} }
@ -325,10 +334,10 @@ button.cardContent {
width: 42%; width: 42%;
} }
@media all and (max-width: 420px) { @media all and (min-width: 420px) {
.scalableCard.backdropCard { .scalableCard.backdropCard, .scalableCard.smallBackdropCard {
width: 100% !important; 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 + '"'; 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; var actionAttribute;
if (tagName == 'button') { if (tagName == 'button') {
@ -1113,8 +1109,15 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
className += ' bottomPaddedCard'; 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 '\ 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 + '\ ' + cardImageContainerOpen + cardImageContainerClose + innerCardFooter + cardContentClose + overlayButtons + cardScalableClose + outerCardFooter + cardBoxClose + '\
</' + tagName + '>'; </' + tagName + '>';
} }

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

@ -1,7 +1,7 @@
.itemProgressBar { .itemProgressBar {
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
position: relative; position: relative;
height: .7vh; height: .75vh;
} }
.itemProgressBarForeground { .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('hide');
innerElem.classList.add('cardOverlayTarget'); innerElem.classList.add('cardOverlayTarget');
var appendTo; var appendTo = dom.parentWithClass(elem, 'cardContent') || elem;
if (elem.classList.contains('cardImageContainer')) {
appendTo = dom.parentWithClass(elem, 'cardBox');
} else {
appendTo = elem.parentNode;
}
appendTo.appendChild(innerElem); appendTo.appendChild(innerElem);
} }
@ -204,7 +199,7 @@
function onHoverIn(e) { function onHoverIn(e) {
var elem = e.target; var elem = e.target;
var card = dom.parentWithClass(elem, 'cardImageContainer') || dom.parentWithClass(elem, 'cardImage'); var card = dom.parentWithClass(elem, 'cardImageContainer');
if (!card) { if (!card) {
return; 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 positionTicksData = item.UserData && item.UserData.PlaybackPositionTicks ? (' data-positionticks="' + item.UserData.PlaybackPositionTicks + '"') : '';
var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : ''; var collectionIdData = options.collectionId ? (' data-collectionid="' + options.collectionId + '"') : '';
var playlistIdData = options.playlistId ? (' data-playlistid="' + options.playlistId + '"') : ''; 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) { if (!clickEntireItem && options.dragHandle) {
html += '<button is="paper-icon-button-light" class="listViewDragHandle autoSize"><i class="md-icon">&#xE25D;</i></button>'; 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'), Type: card.getAttribute('data-type'),
Id: card.getAttribute('data-id'), Id: card.getAttribute('data-id'),
CollectionType: card.getAttribute('data-collectiontype'),
ChannelId: card.getAttribute('data-channelid'), ChannelId: card.getAttribute('data-channelid'),
SeriesId: card.getAttribute('data-seriesid'), SeriesId: card.getAttribute('data-seriesid'),
ServerId: card.getAttribute('data-serverid'), ServerId: card.getAttribute('data-serverid'),
@ -177,6 +178,11 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
PlaybackPositionTicks: parseInt(card.getAttribute('data-positionticks') || '0') PlaybackPositionTicks: parseInt(card.getAttribute('data-positionticks') || '0')
} }
}; };
}
function showPlayMenu(card, target) {
var item = getItemInfoFromCard(card);
require(['playMenu'], function (playMenu) { require(['playMenu'], function (playMenu) {
@ -199,17 +205,13 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
id = card.getAttribute('data-id'); id = card.getAttribute('data-id');
} }
var serverId = card.getAttribute('data-serverid'); var item = getItemInfoFromCard(card);
var type = card.getAttribute('data-type');
var isfolder = card.getAttribute('data-isfolder') == 'true'; var serverId = item.ServerId;
var type = item.Type;
if (action == 'link') { if (action == 'link') {
showItem({ showItem(item);
Id: id,
Type: type,
IsFolder: isfolder,
ServerId: serverId
});
} }
else if (action == 'instantmix') { else if (action == 'instantmix') {

4
dashboard-ui/channelitems.html
View file

@ -3,9 +3,11 @@
<div data-role="content"> <div data-role="content">
<div class="viewSettings"> <div class="viewSettings">
<div class="listTopPaging"> <div class="paging">
</div> </div>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer" style="text-align:center;"></div>
<div class="paging">
</div>
</div> </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; background-color: rgba(28,28,28,.92) !important;
} }
.homeTopViews .defaultBackground .cardImage {
background-color: #303030;
}
.viewMenuBar { .viewMenuBar {
/* It needs this in order to retain height since we're positioning the contents absolutely */ /* It needs this in order to retain height since we're positioning the contents absolutely */
height: 50px; height: 50px;

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

@ -125,8 +125,6 @@
filterButton: true filterButton: true
}); });
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
updateFilterControls(page); updateFilterControls(page);
html = cardBuilder.getCardsHtml({ html = cardBuilder.getCardsHtml({
@ -141,8 +139,14 @@
centerText: true 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'); var elem = page.querySelector('#items');
elem.innerHTML = html + pagingHtml; elem.innerHTML = html;
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(elem);
$('.btnNextPage', page).on('click', function () { $('.btnNextPage', page).on('click', function () {

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

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