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

Fix alphaPicker padding

src/assets/css/librarybrowser.css

@@ -977,10 +977,6 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 @media all and (min-height:31.25em) {
-    .padded-left-withalphapicker {
-        padding-left: 7.5%;
-    }
-
     .padded-right-withalphapicker {
         padding-right: 7.5%;
     }

src/components/alphapicker/style.css

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

src/controllers/list.js

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

src/controllers/movies/movies.js

@@ -169,12 +169,10 @@ define(["loading", "layoutManager", "userSettings", "events", "libraryBrowser",
                     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");
             }
-            }
 
             var btnFilter = tabContent.querySelector(".btnFilter");
 

src/controllers/movies/movietrailers.js

@@ -193,6 +193,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
 
         function initPage(tabContent) {
             var alphaPickerElement = tabContent.querySelector(".alphaPicker");
+            var itemsContainer = tabContent.querySelector(".itemsContainer");
             alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
                 var newValue = e.detail.value;
                 var query = getQuery(tabContent);
@@ -205,12 +206,9 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 valueChangeEvent: "click"
             });
 
-            if (layoutManager.desktop || layoutManager.mobile) {
             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");
-            }
 
             tabContent.querySelector(".btnFilter").addEventListener("click", function () {
                 self.showFilterMenu();

src/controllers/music/musicalbums.js

@@ -199,6 +199,7 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
 
         function initPage(tabContent) {
             var alphaPickerElement = tabContent.querySelector(".alphaPicker");
+            var itemsContainer = tabContent.querySelector(".itemsContainer");
 
             alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
                 var newValue = e.detail.value;
@@ -211,12 +212,10 @@ define(["layoutManager", "playbackManager", "loading", "events", "libraryBrowser
                 element: alphaPickerElement,
                 valueChangeEvent: "click"
             });
-            if (layoutManager.desktop || layoutManager.mobile) {
+
             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");
-            }
 
             tabContent.querySelector(".btnFilter").addEventListener("click", function () {
                 self.showFilterMenu();

src/controllers/music/musicartists.js

@@ -181,6 +181,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
 
         function initPage(tabContent) {
             var alphaPickerElement = tabContent.querySelector(".alphaPicker");
+            var itemsContainer = tabContent.querySelector(".itemsContainer");
 
             alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
                 var newValue = e.detail.value;
@@ -193,12 +194,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 element: alphaPickerElement,
                 valueChangeEvent: "click"
             });
-            if (layoutManager.desktop || layoutManager.mobile) {
+
             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");
-            }
 
             tabContent.querySelector(".btnFilter").addEventListener("click", function () {
                 self.showFilterMenu();

src/controllers/shows/tvshows.js

@@ -210,6 +210,7 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
 
         function initPage(tabContent) {
             var alphaPickerElement = tabContent.querySelector(".alphaPicker");
+            var itemsContainer = tabContent.querySelector(".itemsContainer");
 
             alphaPickerElement.addEventListener("alphavaluechanged", function (e) {
                 var newValue = e.detail.value;
@@ -222,12 +223,10 @@ define(["layoutManager", "loading", "events", "libraryBrowser", "imageLoader", "
                 element: alphaPickerElement,
                 valueChangeEvent: "click"
             });
-            if (layoutManager.desktop || layoutManager.mobile) {
+
             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");
-            }
 
             tabContent.querySelector(".btnFilter").addEventListener("click", function () {
                 self.showFilterMenu();

src/movies.html

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

src/music.html

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

src/tv.html

@@ -8,8 +8,8 @@
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="material-icons">filter_list</i></button>
         </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="paging"></div>