1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update list classes

This commit is contained in:
Luke Pulverenti 2016-07-30 01:25:07 -04:00
parent ebe4dc0ca5
commit b160cd48a3
19 changed files with 46 additions and 40 deletions

View file

@ -17,13 +17,19 @@
display: flex; display: flex;
} }
.verticalItemsContainer { .vertical-list {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.vertical-wrap {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.verticalItemsContainer .card { .vertical-wrap .card {
contain: strict; contain: strict;
} }

View file

@ -248,7 +248,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
} }
html += '<' + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + '</' + sectionTitleTagName + '>'; html += '<' + sectionTitleTagName + ' class="sectionTitle">' + newIndexValue + '</' + sectionTitleTagName + '>';
if (isVertical) { if (isVertical) {
html += '<div class="itemsContainer verticalItemsContainer">'; html += '<div class="itemsContainer vertical-wrap">';
} }
currentIndexValue = newIndexValue; currentIndexValue = newIndexValue;
hasOpenSection = true; hasOpenSection = true;

View file

@ -6,7 +6,7 @@
<div class="paging"> <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 vertical-wrap" style="text-align:center;"></div>
<div class="paging"> <div class="paging">
</div> </div>
</div> </div>

View file

@ -10,7 +10,7 @@
<div class="pageTabContent ehsContent" id="channelsTab" data-index="1"> <div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
<div class="viewSettings"> <div class="viewSettings">
</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 vertical-wrap" style="text-align:center;"></div>
</div> </div>
<div data-role="content"> <div data-role="content">

View file

@ -85,7 +85,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">'; html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml(result.Items, { html += cardBuilder.getCardsHtml(result.Items, {

View file

@ -25,7 +25,7 @@
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
</div> </div>
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer"> <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer vertical-wrap">
</div> </div>
</div> </div>
<p class="noNextUpItems hide">${NoNextUpItemsMessage}</p> <p class="noNextUpItems hide">${NoNextUpItemsMessage}</p>

View file

@ -52,7 +52,7 @@
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer verticalItemsContainer"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap"></div>
</div> </div>
<div class="pageTabContent ehsContent" id="recordingsTab" data-index="3"> <div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
<div id="activeRecordings" class="homePageSection hide"> <div id="activeRecordings" class="homePageSection hide">

View file

@ -4,7 +4,7 @@
<div class="viewSettings"> <div class="viewSettings">
<div class="listTopPaging"></div> <div class="listTopPaging"></div>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
</div> </div>
</div> </div>

View file

@ -98,14 +98,14 @@
<div style="text-align: center; display: flex; align-items: center; justify-content: center;"> <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
</div> </div>
<div class="pageTabContent ehsContent" id="studiosTab" data-index="5"> <div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
<div class="viewSettings"> <div class="viewSettings">
<div class="listTopPaging"> <div class="listTopPaging">
</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 vertical-wrap" style="text-align: center;"></div>
</div> </div>
<div data-role="content"> <div data-role="content">

View file

@ -115,7 +115,7 @@
<div class="paging"></div> <div class="paging"></div>
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker verticalItemsContainer"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker vertical-wrap">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>

View file

@ -102,7 +102,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">'; html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({

View file

@ -130,10 +130,10 @@
for (var i = 0, length = containers.length; i < length; i++) { for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) { if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX'); containers[i].classList.add('hiddenScrollX');
containers[i].classList.remove('verticalItemsContainer'); containers[i].classList.remove('vertical-wrap');
} else { } else {
containers[i].classList.remove('hiddenScrollX'); containers[i].classList.remove('hiddenScrollX');
containers[i].classList.add('verticalItemsContainer'); containers[i].classList.add('vertical-wrap');
} }
} }
}; };

View file

@ -107,7 +107,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">'; html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml(recommendation.Items, { html += cardBuilder.getCardsHtml(recommendation.Items, {
@ -161,10 +161,10 @@
for (var i = 0, length = containers.length; i < length; i++) { for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) { if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX'); containers[i].classList.add('hiddenScrollX');
containers[i].classList.remove('verticalItemsContainer'); containers[i].classList.remove('vertical-wrap');
} else { } else {
containers[i].classList.remove('hiddenScrollX'); containers[i].classList.remove('hiddenScrollX');
containers[i].classList.add('verticalItemsContainer'); containers[i].classList.add('vertical-wrap');
} }
} }
} }

View file

@ -86,7 +86,7 @@
shape: getSquareShape(), shape: getSquareShape(),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
defaultAction: 'instantmix', action: 'instantmix',
lazy: true, lazy: true,
centerText: true, centerText: true,
overlayMoreButton: true overlayMoreButton: true
@ -132,7 +132,7 @@
shape: getSquareShape(), shape: getSquareShape(),
showTitle: true, showTitle: true,
showParentTitle: true, showParentTitle: true,
defaultAction: 'instantmix', action: 'instantmix',
lazy: true, lazy: true,
centerText: true, centerText: true,
overlayMoreButton: true overlayMoreButton: true
@ -255,10 +255,10 @@
for (var i = 0, length = containers.length; i < length; i++) { for (var i = 0, length = containers.length; i < length; i++) {
if (enableScrollX()) { if (enableScrollX()) {
containers[i].classList.add('hiddenScrollX'); containers[i].classList.add('hiddenScrollX');
containers[i].classList.remove('verticalItemsContainer'); containers[i].classList.remove('vertical-wrap');
} else { } else {
containers[i].classList.remove('hiddenScrollX'); containers[i].classList.remove('hiddenScrollX');
containers[i].classList.add('verticalItemsContainer'); containers[i].classList.add('vertical-wrap');
} }
} }
}; };

View file

@ -302,7 +302,7 @@
html += '</div>'; html += '</div>';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: items, items: items,
@ -348,7 +348,7 @@
if (scrollX) { if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: items, items: items,
@ -390,7 +390,7 @@
if (scrollX) { if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
@ -429,7 +429,7 @@
if (result.Items.length) { if (result.Items.length) {
html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>'; html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
@ -474,7 +474,7 @@
if (scrollX) { if (scrollX) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: items, items: items,
@ -533,7 +533,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
@ -577,7 +577,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
@ -657,7 +657,7 @@
html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>'; html += '<a href="channelitems.html?id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><button is="emby-button" type="button" class="raised more mini"><span>' + Globalize.translate('ButtonMore') + '</span></button></a>';
html += '</div>'; html += '</div>';
html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,
shape: 'autohome', shape: 'autohome',
@ -705,7 +705,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">'; html += '<div is="emby-itemscontainer" class="hiddenScrollX itemsContainer">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({
items: result.Items, items: result.Items,

View file

@ -111,10 +111,10 @@
if (enableScrollX()) { if (enableScrollX()) {
resumableItemsContainer.classList.add('hiddenScrollX'); resumableItemsContainer.classList.add('hiddenScrollX');
resumableItemsContainer.classList.remove('verticalItemsContainer'); resumableItemsContainer.classList.remove('vertical-wrap');
} else { } else {
resumableItemsContainer.classList.remove('hiddenScrollX'); resumableItemsContainer.classList.remove('hiddenScrollX');
resumableItemsContainer.classList.add('verticalItemsContainer'); resumableItemsContainer.classList.add('vertical-wrap');
} }
categorysyncbuttons.init(tabContent); categorysyncbuttons.init(tabContent);

View file

@ -104,7 +104,7 @@
if (enableScrollX()) { if (enableScrollX()) {
html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">'; html += '<div is="emby-itemscontainer" class="itemsContainer hiddenScrollX">';
} else { } else {
html += '<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer">'; html += '<div is="emby-itemscontainer" class="itemsContainer vertical-wrap">';
} }
html += cardBuilder.getCardsHtml({ html += cardBuilder.getCardsHtml({

View file

@ -5,7 +5,7 @@
<div class="listTopPaging"> <div class="listTopPaging">
</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 vertical-wrap" style="text-align:center;"></div>
</div> </div>
</div> </div>

View file

@ -34,7 +34,7 @@
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
</div> </div>
<div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer verticalItemsContainer"> <div is="emby-itemscontainer" id="nextUpItems" class="itemsContainer vertical-wrap">
</div> </div>
</div> </div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p> <p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
@ -48,7 +48,7 @@
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
</div> </div>
<div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer verticalItemsContainer"> <div is="emby-itemscontainer" id="latestEpisodes" class="itemsContainer vertical-wrap">
</div> </div>
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
<button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${ButtonSort}"><i class="md-icon">sort_by_alpha</i></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer verticalItemsContainer"> <div is="emby-itemscontainer" class="itemsContainer vertical-wrap">
</div> </div>
<div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;"> <div style="text-align: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;padding:.7em .5em;">
<div class="paging"></div> <div class="paging"></div>
@ -96,14 +96,14 @@
<div style="text-align: center; display: flex; align-items: center; justify-content: center;"> <div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><i class="md-icon">view_comfy</i></button>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer verticalItemsContainer"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer paddedItemsContainer vertical-wrap"></div>
</div> </div>
<div class="pageTabContent ehsContent" id="studiosTab" data-index="6"> <div class="pageTabContent ehsContent" id="studiosTab" data-index="6">
<div class="viewSettings"> <div class="viewSettings">
<div class="listTopPaging"> <div class="listTopPaging">
</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 vertical-wrap" style="text-align: center;"></div>
</div> </div>
<div data-role="content"> <div data-role="content">