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

Merge pull request #721 from grafixeyehero/alphaPicker-tv-mode

Browse Source 
Fix alphaPicker padding
This commit is contained in:
dkanada 2020-01-31 12:42:15 +09:00 committed by GitHub
commit acfb152cb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 39 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/librarybrowser.css
View File

@ -976,11 +976,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
margin-bottom: -1em; margin-bottom: -1em;
} }
@media all and (min-height: 31.25em) { @media all and (min-height:31.25em) {
.padded-left-withalphapicker {
padding-left: 7.5%;
}
.padded-right-withalphapicker { .padded-right-withalphapicker {
padding-right: 7.5%; padding-right: 7.5%;
} }

7
src/components/alphapicker/style.css
View File

@ -107,18 +107,11 @@
bottom: 1%; bottom: 1%;
} }
.alphaPicker-fixed-left {
left: 0.4em;
}
.alphaPicker-fixed-right { .alphaPicker-fixed-right {
right: 0.4em; right: 0.4em;
} }
@media all and (min-width: 62.5em) { @media all and (min-width: 62.5em) {
.alphaPicker-fixed-left {
left: 1em;
}
.alphaPicker-fixed-right { .alphaPicker-fixed-right {
right: 1em; right: 1em;

20
src/controllers/list.js
View File

@ -203,15 +203,9 @@ define(["globalize", "listView", "layoutManager", "userSettings", "focusManager"
if ("SortName" === values.sortBy && "Ascending" === values.sortOrder && numItems > 40) { if ("SortName" === values.sortBy && "Ascending" === values.sortOrder && numItems > 40) {
alphaPicker.classList.remove("hide"); alphaPicker.classList.remove("hide");
instance.itemsContainer.parentNode.classList.add("padded-right-withalphapicker");
if (layoutManager.tv) {
instance.itemsContainer.parentNode.classList.add("padded-left-withalphapicker");
} else {
instance.itemsContainer.parentNode.classList.add("padded-right-withalphapicker");
}
} else { } else {
alphaPicker.classList.add("hide"); alphaPicker.classList.add("hide");
instance.itemsContainer.parentNode.classList.remove("padded-left-withalphapicker");
instance.itemsContainer.parentNode.classList.remove("padded-right-withalphapicker"); instance.itemsContainer.parentNode.classList.remove("padded-right-withalphapicker");
} }
} }
@ -540,15 +534,9 @@ define(["globalize", "listView", "layoutManager", "userSettings", "focusManager"
self.scroller = view.querySelector(".scrollFrameY"); self.scroller = view.querySelector(".scrollFrameY");
var alphaPickerElement = self.alphaPickerElement; var alphaPickerElement = self.alphaPickerElement;
if (layoutManager.tv) { alphaPickerElement.classList.add("alphaPicker-fixed-right");
alphaPickerElement.classList.add("alphaPicker-fixed-left"); alphaPickerElement.classList.add("focuscontainer-right");
alphaPickerElement.classList.add("focuscontainer-left"); self.itemsContainer.parentNode.classList.add("padded-right-withalphapicker");
self.itemsContainer.parentNode.classList.add("padded-left-withalphapicker");
} else {
alphaPickerElement.classList.add("alphaPicker-fixed-right");
alphaPickerElement.classList.add("focuscontainer-right");
self.itemsContainer.parentNode.classList.add("padded-right-withalphapicker");
}
self.alphaPicker = new alphaPicker({ self.alphaPicker = new alphaPicker({
element: alphaPickerElement, element: alphaPickerElement,

8
src/controllers/movies/movies.js
View File

@ -169,11 +169,9 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
valueChangeEvent: "click" valueChangeEvent: "click"
}); });
if (layoutManager.desktop || layoutManager.mobile) { tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
alphaPickerElement.classList.add("alphabetPicker-right"); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.remove("padded-left-withalphapicker"); itemsContainer.classList.add("padded-right-withalphapicker");
itemsContainer.classList.add("padded-right-withalphapicker");
}
} }
var btnFilter = tabContent.querySelector(".btnFilter"); var btnFilter = tabContent.querySelector(".btnFilter");

10
src/controllers/movies/movietrailers.js
View File

@ -193,6 +193,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector(".alphaPicker"); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener("alphavaluechanged", function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
var query = getQuery(tabContent); var query = getQuery(tabContent);
@ -205,12 +206,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
valueChangeEvent: "click" valueChangeEvent: "click"
}); });
if (layoutManager.desktop || layoutManager.mobile) { tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); alphaPickerElement.classList.add("alphaPicker-fixed-right");
var itemsContainer = tabContent.querySelector(".itemsContainer"); itemsContainer.classList.add("padded-right-withalphapicker");
itemsContainer.classList.remove("padded-left-withalphapicker");
itemsContainer.classList.add("padded-right-withalphapicker");
}
tabContent.querySelector(".btnFilter").addEventListener("click", function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();

11
src/controllers/music/musicalbums.js
View File

@ -199,6 +199,7 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector(".alphaPicker"); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener("alphavaluechanged", function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
@ -211,12 +212,10 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: "click" valueChangeEvent: "click"
}); });
if (layoutManager.desktop || layoutManager.mobile) {
tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.remove("padded-left-withalphapicker"); itemsContainer.classList.add("padded-right-withalphapicker");
itemsContainer.classList.add("padded-right-withalphapicker");
}
tabContent.querySelector(".btnFilter").addEventListener("click", function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();

11
src/controllers/music/musicartists.js
View File

@ -181,6 +181,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector(".alphaPicker"); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener("alphavaluechanged", function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
@ -193,12 +194,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: "click" valueChangeEvent: "click"
}); });
if (layoutManager.desktop || layoutManager.mobile) {
tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.remove("padded-left-withalphapicker"); itemsContainer.classList.add("padded-right-withalphapicker");
itemsContainer.classList.add("padded-right-withalphapicker");
}
tabContent.querySelector(".btnFilter").addEventListener("click", function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();

11
src/controllers/shows/tvshows.js
View File

@ -210,6 +210,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
function initPage(tabContent) { function initPage(tabContent) {
var alphaPickerElement = tabContent.querySelector(".alphaPicker"); var alphaPickerElement = tabContent.querySelector(".alphaPicker");
var itemsContainer = tabContent.querySelector(".itemsContainer");
alphaPickerElement.addEventListener("alphavaluechanged", function (e) { alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
var newValue = e.detail.value; var newValue = e.detail.value;
@ -222,12 +223,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
element: alphaPickerElement, element: alphaPickerElement,
valueChangeEvent: "click" valueChangeEvent: "click"
}); });
if (layoutManager.desktop || layoutManager.mobile) {
tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right"); tabContent.querySelector(".alphaPicker").classList.add("alphabetPicker-right");
var itemsContainer = tabContent.querySelector(".itemsContainer"); alphaPickerElement.classList.add("alphaPicker-fixed-right");
itemsContainer.classList.remove("padded-left-withalphapicker"); itemsContainer.classList.add("padded-right-withalphapicker");
itemsContainer.classList.add("padded-right-withalphapicker");
}
tabContent.querySelector(".btnFilter").addEventListener("click", function () { tabContent.querySelector(".btnFilter").addEventListener("click", function () {
self.showFilterMenu(); self.showFilterMenu();

8
src/movies.html
View File

@ -8,10 +8,10 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div> </div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>
@ -53,7 +53,7 @@
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-left-withalphapicker padded-right"> <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
</div> </div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>
@ -90,4 +90,4 @@
</div> </div>
<div class="pageTabContent" data-index="6"> <div class="pageTabContent" data-index="6">
</div> </div>
</div> </div>

12
src/music.html
View File

@ -44,10 +44,10 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div> </div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>
@ -60,10 +60,10 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div> </div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>
@ -76,10 +76,10 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right">
</div> </div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>

4
src/tv.html
View File

@ -8,8 +8,8 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"></div> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"></div> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"></div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
<div class="paging"></div> <div class="paging"></div>