Merge pull request #498 from dkanada/scrollbutton

Fix issues with scrollbutton visibility
jellyfin · Oct 2, 2019 · 4b6ea2d · 4b6ea2d
2 parents b4da29b + c36a916
commit 4b6ea2d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 29 deletions.
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@@ -4,8 +4,15 @@
     right: 0;
     align-items: center;
     justify-content: center;
+    min-width:104px;
+    min-height:24px;
     z-index: 1;
     color: #ffffff;
     display: flex;
-    overflow: hidden;
+}
+
+.emby-scrollbuttons-button > i {
+    min-width: 24px;
+    min-height: 24px;
+    display: block;
 }
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
@@ -133,22 +133,21 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
 
     EmbyScrollButtonsPrototype.attachedCallback = function () {
         var scroller = this.nextSibling;
-        var parent = this.parentNode;
         this.scroller = scroller;
 
+        var parent = this.parentNode;
         parent.classList.add('emby-scroller-container');
 
         this.innerHTML = getScrollButtonHtml('left') + getScrollButtonHtml('right');
 
-        var scrollHandler = onScroll.bind(this);
-        this.scrollHandler = scrollHandler;
-
         var buttons = this.querySelectorAll('.emby-scrollbuttons-button');
         buttons[0].addEventListener('click', onScrollButtonClick);
         buttons[1].addEventListener('click', onScrollButtonClick);
         this.scrollButtonsLeft = buttons[0];
         this.scrollButtonsRight = buttons[1];
 
+        var scrollHandler = onScroll.bind(this);
+        this.scrollHandler = scrollHandler;
         scroller.addScrollEventListener(scrollHandler, {
             capture: false,
             passive: true

diff --git a/src/itemdetails.html b/src/itemdetails.html
@@ -191,7 +191,6 @@
                     </div>
 
                     <div class="recordingFields hide" style="margin: .5em 0 1.5em;">
-
                     </div>
 
                     <div class="detailSectionContent">
@@ -204,16 +203,14 @@ <h3 class="tagline"></h3>
                         <p id="itemBirthLocation"></p>
                         <p id="itemDeathDate"></p>
                         <p id="seriesAirTime"></p>
-                        <div class="itemTags hide" style="margin: .7em 0;font-size:92%;">
 
+                        <div class="itemTags hide" style="margin: .7em 0;font-size:92%;">
                         </div>
 
                         <div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;">
-
                         </div>
 
                         <div class="seriesRecordingEditor">
-
                         </div>
                     </div>
                 </div>
@@ -248,59 +245,47 @@ <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}
         </div>
         <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
-
             <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
             </div>
         </div>
         <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
-
             <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
             </div>
         </div>
         <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
             <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
-
             <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
-                    <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
             </div>
         </div>
         <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
-            <h2 class="sectionTitle padded-left padded-right">
-                ${HeaderUpcomingOnTV}
-            </h2>
+            <h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
             <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div>
-            <br />
         </div>
 
         <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
-            <h2 class="sectionTitle sectionTitle-cards padded-left">
-                ${HeaderSpecialFeatures}
-            </h2>
+            <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
             <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
         </div>
         <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
-            <h2 class="sectionTitle sectionTitle-cards padded-left">
-                ${HeaderMusicVideos}
-            </h2>
+            <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
             <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
         </div>
 
         <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
-
             <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
-                    <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
+                <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
             </div>
         </div>
 
         <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
             <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
-
             <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
-                    <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
+                <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
             </div>
         </div>
     </div>