Add btnFilter-wrapper to fix hover styling

jellyfin · Aug 16, 2024 · 56c6fef · 56c6fef
1 parent 9fd3b18
commit 56c6fef
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 26 deletions.
diff --git a/src/components/filterdialog/filterIndicator.js b/src/components/filterdialog/filterIndicator.js
@@ -3,6 +3,7 @@ import './filterIndicator.scss';
 export function getFilterStatus(query) {
     return Boolean(
         query.Filters
+            || query.IsFavorite
             || query.VideoTypes
             || query.SeriesStatus
             || query.Is4K
@@ -25,18 +26,18 @@ export function getFilterStatus(query) {
 }
 
 export function setFilterStatus(page, hasFilters) {
-    const btnFilter = page.querySelector('.btnFilter');
+    const btnFilterWrapper = page.querySelector('.btnFilter-wrapper');
 
-    if (btnFilter) {
-        let indicatorElem = btnFilter.querySelector('.filterIndicator');
+    if (btnFilterWrapper) {
+        let indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
 
         if (!indicatorElem && hasFilters) {
-            btnFilter.insertAdjacentHTML(
-                'beforeend',
+            btnFilterWrapper.insertAdjacentHTML(
+                'afterbegin',
                 '<div class="filterIndicator">!</div>'
             );
-            btnFilter.classList.add('btnFilterWithIndicator');
-            indicatorElem = btnFilter.querySelector('.filterIndicator');
+            btnFilterWrapper.classList.add('btnFilterWithIndicator');
+            indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
         }
 
         if (indicatorElem) {

diff --git a/src/components/filterdialog/filterIndicator.scss b/src/components/filterdialog/filterIndicator.scss
@@ -2,22 +2,18 @@
     position: relative;
 }
 
-.btnFilterWithIndicator > div {
-    margin-left: 3px;
-}
-
 .filterIndicator {
     color: #fff;
     position: absolute;
-    top: -7px;
-    right: 0;
-    width: 1.6em;
-    height: 1.6em;
-    z-index: 100000000;
+    top: 2px;
+    right: 2px;
+    width: 1.8em;
+    height: 1.8em;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 45%;
+    font-size: 60%;
     border-radius: 100em;
     box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
     background: #03a9f4;

diff --git a/src/controllers/livetv.html b/src/controllers/livetv.html
@@ -61,7 +61,9 @@ <h2 class="sectionTitle sectionTitle-cards" style="display: inline-block; vertic
         <div class="pageTabContent" id="channelsTab" data-index="2">
             <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
                 <div class="paging"></div>
-                <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+                <div class="btnFilter-wrapper">
+                    <button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+                </div>
             </div>
             <div is="emby-itemscontainer" id="items" 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 focuscontainer-x">

diff --git a/src/controllers/movies/movies.html b/src/controllers/movies/movies.html
@@ -6,7 +6,9 @@
             <button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -48,7 +50,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderLatestMovies}</h
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">

diff --git a/src/controllers/music/music.html b/src/controllers/music/music.html
@@ -15,7 +15,9 @@
             <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -57,7 +59,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -73,7 +77,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@@ -94,7 +100,9 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderFrequentlyPlayed
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:67.5em;margin: 0 auto;"></div>

diff --git a/src/controllers/shows/tvrecommended.html b/src/controllers/shows/tvrecommended.html
@@ -5,7 +5,9 @@
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
 
         <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
@@ -59,7 +61,9 @@ <h1>${MessageNothingHere}</h1>
             <div class="paging"></div>
             <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
             <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
-            <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            <<div class="btnFilter-wrapper">
+                <button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
+            </div>
         </div>
         <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
         </div>