From 63b4249c3425981a7813e4895fd7600c63fe4c87 Mon Sep 17 00:00:00 2001
From: dkanada <dkanada@users.noreply.github.com>
Date: Thu, 23 May 2019 03:02:18 -0700
Subject: [PATCH] simplify some css rules

---
 .../emby-itemscontainer.js                    | 34 ++-------
 .../emby-scrollbuttons/emby-scrollbuttons.css |  4 +-
 .../emby-scrollbuttons/emby-scrollbuttons.js  |  3 +-
 src/components/homesections/homesections.js   |  5 +-
 src/css/librarybrowser.css                    | 70 +++----------------
 5 files changed, 22 insertions(+), 94 deletions(-)

diff --git a/src/components/emby-itemscontainer/emby-itemscontainer.js b/src/components/emby-itemscontainer/emby-itemscontainer.js
index b2b94145e..7cfb3e4a4 100644
--- a/src/components/emby-itemscontainer/emby-itemscontainer.js
+++ b/src/components/emby-itemscontainer/emby-itemscontainer.js
@@ -181,10 +181,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onSeriesTimerCreated(e, apiClient, data) {
-
         var itemsContainer = this;
         if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
             return;
         }
@@ -192,42 +190,33 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
     function onTimerCancelled(e, apiClient, data) {
         var itemsContainer = this;
-
         if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
             return;
         }
 
-        var id = data.Id;
-
         require(['cardBuilder'], function (cardBuilder) {
-            cardBuilder.onTimerCancelled(id, itemsContainer);
+            cardBuilder.onTimerCancelled(data.Id, itemsContainer);
         });
     }
 
     function onSeriesTimerCancelled(e, apiClient, data) {
-
         var itemsContainer = this;
         if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) {
-
             itemsContainer.notifyRefreshNeeded();
             return;
         }
 
-        var id = data.Id;
-
         require(['cardBuilder'], function (cardBuilder) {
-            cardBuilder.onSeriesTimerCancelled(id, itemsContainer);
+            cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer);
         });
     }
 
     function onLibraryChanged(e, apiClient, data) {
-
         var itemsContainer = this;
+
         var eventsToMonitor = getEventsToMonitor(itemsContainer);
         if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) {
-
             // yes this is an assumption
             return;
         }
@@ -253,25 +242,17 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function onPlaybackStopped(e, stopInfo) {
-
         var itemsContainer = this;
-
         var state = stopInfo.state;
 
         var eventsToMonitor = getEventsToMonitor(itemsContainer);
         if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') {
-
             if (eventsToMonitor.indexOf('videoplayback') !== -1) {
-
                 itemsContainer.notifyRefreshNeeded(true);
                 return;
             }
-        }
-
-        else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
-
+        } else if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Audio') {
             if (eventsToMonitor.indexOf('audioplayback') !== -1) {
-
                 itemsContainer.notifyRefreshNeeded(true);
                 return;
             }
@@ -279,7 +260,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function addNotificationEvent(instance, name, handler, owner) {
-
         var localHandler = handler.bind(instance);
         owner = owner || serverNotifications;
         events.on(owner, name, localHandler);
@@ -287,7 +267,6 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     function removeNotificationEvent(instance, name, owner) {
-
         var handler = instance['event_' + name];
         if (handler) {
             owner = owner || serverNotifications;
@@ -297,12 +276,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
     }
 
     ItemsContainerPrototype.createdCallback = function () {
-
         this.classList.add('itemsContainer');
     };
 
     ItemsContainerPrototype.attachedCallback = function () {
-
         this.addEventListener('click', onClick);
 
         if (browser.touch) {
@@ -346,6 +323,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
         this.removeEventListener('click', onClick);
         this.removeEventListener('contextmenu', onContextMenu);
         this.removeEventListener('contextmenu', disableEvent);
+
         itemShortcuts.off(this, getShortcutOptions());
 
         removeNotificationEvent(this, 'UserDataChanged');
@@ -374,9 +352,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager',
 
             var remainingMs = refreshIntervalEndTime - new Date().getTime();
             if (remainingMs > 0 && !this.needsRefresh) {
-
                 resetRefreshInterval(this, remainingMs);
-
             } else {
                 this.needsRefresh = true;
                 this.refreshIntervalEndTime = null;
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.css b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
index b220092c8..ac4f92809 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.css
@@ -3,8 +3,8 @@
 }
 
 .emby-scroller {
-    margin-left: 3.3%;
-    margin-right: 3.3%;
+    margin-left: 4em;
+    margin-right: 4em;
 }
 
 .emby-scrollbuttons {
diff --git a/src/components/emby-scrollbuttons/emby-scrollbuttons.js b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
index 8297dd028..50678068e 100644
--- a/src/components/emby-scrollbuttons/emby-scrollbuttons.js
+++ b/src/components/emby-scrollbuttons/emby-scrollbuttons.js
@@ -33,7 +33,8 @@ define(['layoutManager', 'dom', 'css!./emby-scrollbuttons', 'registerElement', '
     }
 
     function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
-        if (scrollWidth <= scrollSize) {
+        // hack alert add ten for rounding errors
+        if (scrollWidth <= scrollSize + 10) {
             scrollButtons.scrollButtonsLeft.classList.add('hide');
             scrollButtons.scrollButtonsRight.classList.add('hide');
         }
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 16876c508..c7637e4bd 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -372,8 +372,9 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         var html = '';
 
         if (userViews.length) {
-            html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
-            html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
+            html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('HeaderMyMedia') + '</h2>';
+            html += '</div>';
 
             if (enableScrollX()) {
                 html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">';
diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index ef8e11f5b..9fac59c89 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -960,97 +960,47 @@
 }
 
 .padded-left {
-    padding-left: 2%
+    padding-left: 4em;
 }
 
 .padded-right {
-    padding-right: 2%
+    padding-right: 4em;
 }
 
 .padded-top {
-    padding-top: 1em
+    padding-top: 1em;
 }
 
 .padded-bottom {
-    padding-bottom: 1em
+    padding-bottom: 1em;
 }
 
 .layout-tv .padded-top-focusscale {
     padding-top: 1em;
-    margin-top: -1em
+    margin-top: -1em;
 }
 
 .layout-tv .padded-bottom-focusscale {
     padding-bottom: 1em;
-    margin-bottom: -1em
+    margin-bottom: -1em;
 }
 
 @media all and (min-height:31.25em) {
     .padded-left-withalphapicker {
-        padding-left: 7.5%
+        padding-left: 7.5%;
     }
 
     .padded-right-withalphapicker {
-        padding-right: 7.5%
-    }
-}
-
-@media all and (min-width:31.25em) {
-    .padded-left {
-        padding-left: 6%
-    }
-
-    .padded-right {
-        padding-right: 6%
-    }
-}
-
-@media all and (min-width:37.5em) {
-    .padded-left {
-        padding-left: 4%
-    }
-
-    .padded-right {
-        padding-right: 4%
-    }
-}
-
-@media all and (min-width:50em) {
-    .padded-left {
-        padding-left: 3.2%
-    }
-
-    .padded-right {
-        padding-right: 3.2%
-    }
-}
-
-@media all and (min-width:64em) {
-    .padded-left {
-        padding-left: 3.3%
-    }
-
-    .padded-right {
-        padding-right: 3.3%
-    }
-}
-
-@media all and (min-width:50em) {
-    .layout-tv .padded-left-withalphapicker {
-        padding-left: 4.5%
-    }
-
-    .layout-tv .padded-right-withalphapicker {
-        padding-right: 4.5%
+        padding-right: 7.5%;
     }
 }
 
 .searchfields-icon {
-    color: #aaa
+    color: #aaaaaa;
 }
 
 .button-accent-flat {
-    color: #00a4dc !important
+    color: #00a4dc !important;
 }
 
 .clearLink {