From 442487799aabeaa38df161754ebaabbec42e8534 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 21:15:59 +0300
Subject: [PATCH 01/17] change shape to overflow

---
 src/assets/css/librarybrowser.css   | 16 ++++++++++------
 src/controllers/itemdetailpage.js   |  5 +++--
 src/itemdetails.html                |  4 ++--
 src/scripts/itembynamedetailpage.js | 16 ++++++++--------
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index af106959e0..9b3f504beb 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -413,11 +413,14 @@
     align-items: center;
     align-content: center;
     position: sticky;
-    background-color: #101010;
     top: 0;
     z-index: 2;
 }
 
+.detailSticky {
+    background-color: #101010;
+}
+
 .infoWrapper {
     flex: 1 0 0;
 }
@@ -431,6 +434,9 @@
 
 .detailPageSecondaryContainer {
     margin: 1.25em 0;
+}
+
+.detailPageContent {
     display: flex;
     flex-direction: column;
     padding-left: 2%;
@@ -443,7 +449,6 @@
 }
 
 .detailImageContainer {
-    margin: 1.25em 0;
     position: sticky;
     top: 15%;
     float: left;
@@ -452,7 +457,6 @@
 
 .detailPagePrimaryContent {
     position: relative;
-    flex-grow: 1
 }
 
 .detailLogo {
@@ -494,7 +498,7 @@
 }
 
 @media all and (max-width:62.5em) {
-    .detailPageContent {
+    .detailPageWrapperContainer {
         position: relative
     }
 
@@ -705,13 +709,13 @@
     margin-bottom: 3.4em !important
 }
 
-.detailPageContent {
+.detailPageWrapperContainer {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
 @media all and (max-width:62.5em) {
-    .detailPageContent-nodetailimg {
+    .detailPageWrapperContainer-nodetailimg {
         padding-top: 0;
     }
 }
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 1a0b66c75a..8f8b3baf39 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -524,6 +524,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
 
     function reloadFromItem(instance, page, params, item, user) {
         var context = params.context;
+        page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky");
         renderName(item, page.querySelector(".nameContainer"), false, context);
         var apiClient = connectionManager.getApiClient(item.ServerId);
         renderSeriesTimerEditor(page, item, apiClient, user);
@@ -743,9 +744,9 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
 
         if ("Person" !== item.Type) {
             elem.classList.add("detailimg-hidemobile");
-            page.querySelector(".detailPageContent").classList.add("detailPageContent-nodetailimg");
+            page.querySelector(".detailPageWrapperContainer").classList.add("detailPageWrapperContainer-nodetailimg");
         } else {
-            page.querySelector(".detailPageContent").classList.remove("detailPageContent-nodetailimg");
+            page.querySelector(".detailPageWrapperContainer").classList.remove("detailPageWrapperContainer-nodetailimg");
         }
 
         var imageTags = item.ImageTags || {};
diff --git a/src/itemdetails.html b/src/itemdetails.html
index fbe0cc50de..4ac632b8b1 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -6,7 +6,7 @@
     </div>
 
     <div class="detailLogo"></div>
-    <div class="detailPageWrapperContainer">
+    <div class="detailPageWrapperContainer padded-bottom-page">
         <div class="detailPagePrimaryContainer padded-left padded-right">
             <div class="infoWrapper infoText">
                 <div class="nameContainer"></div>
@@ -107,8 +107,8 @@
                 </button>
             </div>
         </div>
-        <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
         <div class="detailPageSecondaryContainer">
+            <div class="detailImageContainer padded-left"></div>
             <div class="detailPageContent">
                 <div class="detailPagePrimaryContent padded-left padded-right">
                     <div class="detailSection" style="margin-bottom: 0;">
diff --git a/src/scripts/itembynamedetailpage.js b/src/scripts/itembynamedetailpage.js
index 5d3c9dedb9..ea760900ec 100644
--- a/src/scripts/itembynamedetailpage.js
+++ b/src/scripts/itembynamedetailpage.js
@@ -99,7 +99,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 10,
                     SortBy: "StartDate"
                 }, {
-                    shape: "backdrop",
+                    shape: "overflowBackdrop",
                     showTitle: true,
                     centerText: true,
                     overlayMoreButton: true,
@@ -121,7 +121,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 10,
                     SortBy: "SortName"
                 }, {
-                    shape: "portrait",
+                    shape: "overflowPortrait",
                     showTitle: true,
                     centerText: true,
                     overlayMoreButton: true,
@@ -140,7 +140,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 10,
                     SortBy: "SortName"
                 }, {
-                    shape: "portrait",
+                    shape: "overflowPortrait",
                     showTitle: true,
                     centerText: true,
                     overlayPlayButton: true
@@ -157,7 +157,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 10,
                     SortBy: "SortName"
                 }, {
-                    shape: "portrait",
+                    shape: "overflowPortrait",
                     showTitle: true,
                     centerText: true,
                     overlayPlayButton: true
@@ -174,7 +174,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 10,
                     SortBy: "SortName"
                 }, {
-                    shape: "portrait",
+                    shape: "overflowPortrait",
                     showTitle: true,
                     centerText: true,
                     overlayMoreButton: true
@@ -191,7 +191,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     SortOrder: "Descending",
                     SortBy: "ProductionYear,Sortname"
                 }, {
-                    shape: "square",
+                    shape: "overflowSquare",
                     playFromHere: true,
                     showTitle: true,
                     showYear: true,
@@ -211,7 +211,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 8,
                     SortBy: "SortName"
                 }, {
-                    shape: "square",
+                    shape: "overflowSquare",
                     playFromHere: true,
                     showTitle: true,
                     showParentTitle: true,
@@ -231,7 +231,7 @@ define(["connectionManager", "listView", "cardBuilder", "imageLoader", "libraryB
                     Limit: 6,
                     SortBy: "SortName"
                 }, {
-                    shape: "backdrop",
+                    shape: "overflowBackdrop",
                     showTitle: true,
                     showParentTitle: true,
                     centerText: true,

From 28dfc698b5ed606f75d07bef3243bcd52197acb4 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 22:18:43 +0300
Subject: [PATCH 02/17] hide detail img on mobile

---
 src/controllers/itemdetailpage.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 8f8b3baf39..7bd9369025 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -742,12 +742,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             editable = false;
         }
 
-        if ("Person" !== item.Type) {
-            elem.classList.add("detailimg-hidemobile");
-            page.querySelector(".detailPageWrapperContainer").classList.add("detailPageWrapperContainer-nodetailimg");
-        } else {
-            page.querySelector(".detailPageWrapperContainer").classList.remove("detailPageWrapperContainer-nodetailimg");
-        }
+        elem.classList.add("detailimg-hidemobile");
 
         var imageTags = item.ImageTags || {};
 

From 040f4af781dee13bc9e633c43b0c79853046e691 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 22:20:06 +0300
Subject: [PATCH 03/17] add person img to itembackdrop

---
 src/controllers/itemdetailpage.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 7bd9369025..c5fb0f1bec 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -467,7 +467,8 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
             item.MediaType && item.MediaType !== "Video" ||
             item.Type === "MusicAlbum" ||
-            item.Type === "MusicArtist";
+            item.Type === "MusicArtist" ||
+            item.Type === "Person";
 
         if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
             imgUrl = apiClient.getScaledImageUrl(item.Id, {

From 69251cff483cada8fe8dcb893bda7d1a0e3498c6 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 22:22:50 +0300
Subject: [PATCH 04/17] overide itembackrop class backgroud-size cover to
 contain hide on desktop person backdrop

---
 src/assets/css/librarybrowser.css | 8 ++++++++
 src/controllers/itemdetailpage.js | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 9b3f504beb..8e9b10646d 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -387,6 +387,10 @@
     position: relative
 }
 
+.personBackdrop {
+    background-size: contain;
+}
+
 .itemBackdropProgressBar {
     position: absolute !important;
     bottom: 0;
@@ -671,6 +675,10 @@
         display: none !important
     }
 
+    .personBackdropimg-hideondesktop {
+        display: none !important;
+    }
+
     .mainDetailButtons {
         font-size: 108%;
         margin: 1.25em 0
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index c5fb0f1bec..0b57b91c3e 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -520,6 +520,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             itemBackdropElement.style.backgroundImage = "";
         }
 
+        if ("Person" === item.Type) {
+            itemBackdropElement.classList.add("personBackdropimg-hideondesktop");
+            itemBackdropElement.classList.add("personBackdrop");
+        } else {
+            itemBackdropElement.classList.remove("personBackdrop");
+        }
+
         return hasbackdrop;
     }
 

From 00469f9577277045997170b46362f135cc6af54e Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 22:27:02 +0300
Subject: [PATCH 05/17] show overview and externallink for movie and episode on
 mobile too

---
 src/assets/css/librarybrowser.css | 6 ------
 src/controllers/itemdetailpage.js | 5 -----
 2 files changed, 11 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 8e9b10646d..f13feb1ee3 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -783,12 +783,6 @@
     }
 }
 
-@media all and (max-width:62.5em) {
-    .detailsHiddenOnMobile {
-        display: none
-    }
-}
-
 .btnSyncComplete {
     background: #673AB7 !important
 }
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 0b57b91c3e..9ba512e940 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -1060,11 +1060,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         var overview = page.querySelector(".overview");
         var externalLinksElem = page.querySelector(".itemExternalLinks");
 
-        if ("Season" !== item.Type && "MusicAlbum" !== item.Type && "MusicArtist" !== item.Type) {
-            overview.classList.add("detailsHiddenOnMobile");
-            externalLinksElem.classList.add("detailsHiddenOnMobile");
-        }
-
         renderOverview([overview], item);
         var i;
         var itemMiscInfo;

From 927fd4d7e6144894424281d7adb0caef1fb12894 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Mon, 13 Jan 2020 23:36:23 +0300
Subject: [PATCH 06/17] set header setTransparentMenu for mobile only and fix
 some style

---
 src/assets/css/librarybrowser.css | 16 +++++++++-------
 src/controllers/itemdetailpage.js |  5 ++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index f13feb1ee3..b94ac1e4ac 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -671,12 +671,20 @@
 }
 
 @media all and (min-width:62.5em) {
+    .headerTop {
+        padding: 1.489em 0
+    }
+
+    .itemDetailPage  {
+        padding-top: 5em !important
+    }
+
     .detailFloatingButton {
         display: none !important
     }
 
     .personBackdropimg-hideondesktop {
-        display: none !important;
+        display: none !important
     }
 
     .mainDetailButtons {
@@ -722,12 +730,6 @@
     border-collapse: collapse;
 }
 
-@media all and (max-width:62.5em) {
-    .detailPageWrapperContainer-nodetailimg {
-        padding-top: 0;
-    }
-}
-
 .mediaInfoStream {
     margin: 0 3em 0 0;
     display: inline-block;
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 9ba512e940..652b642f39 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -2098,7 +2098,10 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         });
         view.addEventListener("viewshow", function (e) {
             var page = this;
-            libraryMenu.setTransparentMenu(true);
+
+            if (layoutManager.mobile) {
+                libraryMenu.setTransparentMenu(true);
+            }
 
             if (e.detail.isRestored) {
                 if (currentItem) {

From 5941c914fc81ffb659a593f8b470a4d094dcc718 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Tue, 14 Jan 2020 20:07:13 +0300
Subject: [PATCH 07/17] Fix ProgressBar position

---
 src/assets/css/librarybrowser.css | 5 +++--
 src/itemdetails.html              | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index b94ac1e4ac..2d96790d63 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -650,8 +650,9 @@
 }
 
 .detailImageProgressContainer {
-    margin-left: 6px;
-    width: 21.886458333333332vw;
+    position: absolute;
+    bottom: 0;
+    width: 22.786458333333332vw;
 }
 
 .detailButton-mobile-text {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 4ac632b8b1..96df0a3481 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -108,7 +108,7 @@
             </div>
         </div>
         <div class="detailPageSecondaryContainer">
-            <div class="detailImageContainer padded-left"></div>
+            <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
             <div class="detailPageContent">
                 <div class="detailPagePrimaryContent padded-left padded-right">
                     <div class="detailSection" style="margin-bottom: 0;">

From 89b28d76f58af92c3e42c717b6f34ae593544b30 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 15 Jan 2020 18:54:48 +0300
Subject: [PATCH 08/17] applly suggestion

---
 src/assets/css/librarybrowser.css | 2 +-
 src/controllers/itemdetailpage.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 2d96790d63..8d9ca03d0a 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -684,7 +684,7 @@
         display: none !important
     }
 
-    .personBackdropimg-hideondesktop {
+    .personBackdrop {
         display: none !important
     }
 
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 652b642f39..82ce33c7c8 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -521,7 +521,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         }
 
         if ("Person" === item.Type) {
-            itemBackdropElement.classList.add("personBackdropimg-hideondesktop");
             itemBackdropElement.classList.add("personBackdrop");
         } else {
             itemBackdropElement.classList.remove("personBackdrop");

From ea68085229debe5187c6e0ebf3ef4441e8c8183c Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 17:56:52 +0300
Subject: [PATCH 09/17] fix show favorite on  mobile

---
 src/components/listview/listview.css | 4 ++--
 src/components/listview/listview.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css
index 4d3b27ce75..1ed543c11b 100644
--- a/src/components/listview/listview.css
+++ b/src/components/listview/listview.css
@@ -149,8 +149,8 @@
 
 @media all and (max-width: 64em) {
     .listItemImage-large {
-        width: 33.75vw;
-        height: 22.5vw;
+        width: 22vw;
+        height: 16vw;
         margin-right: 0 !important;
     }
 
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 94535deb6f..dcc3636a64 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -500,11 +500,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                         html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
                     }
 
+                    html += '</span>';
+
                     if (itemHelper.canRate(item)) {
                         html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
                     }
-
-                    html += '</span>';
                 }
             }
 

From c87b0b8263952fafcbb5e8b7c793c04652163dab Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 18:37:12 +0300
Subject: [PATCH 10/17] fix show favorite and wacted on  mobile

---
 src/assets/css/librarybrowser.css   |  4 +++-
 src/components/listview/listview.js | 11 +++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 8d9ca03d0a..ed3f0f13fd 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -782,7 +782,9 @@
 
 @media all and (max-width:75em) {
     .listViewUserDataButtons {
-        display: none !important
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 85%;
     }
 }
 
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index dcc3636a64..06f569c913 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -470,6 +470,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!options.recordButton && (item.Type === 'Timer' || item.Type === 'Program')) {
                 html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
             }
+            if (item.Type === 'Episode') {
+                html += '<div class="listViewUserDataButtons">';
+            } else {
+                html += '<div class="flex align-items-center">';
+            }
+
 
             if (!clickEntireItem) {
 
@@ -491,8 +497,6 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
 
                 if (options.enableUserDataButtons !== false) {
 
-                    html += '<span class="listViewUserDataButtons flex align-items-center">';
-
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
@@ -500,13 +504,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                         html += '<button is="emby-playstatebutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon">check</i></button>';
                     }
 
-                    html += '</span>';
-
                     if (itemHelper.canRate(item)) {
                         html += '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">favorite</i></button>';
                     }
                 }
             }
+            html += '</div>';
 
             if (enableContentWrapper) {
                 html += '</div>';

From 5a41d706c52a81b12277253744b10387c3e696f9 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 18:52:47 +0300
Subject: [PATCH 11/17] fix style on desktop

---
 src/assets/css/librarybrowser.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index ed3f0f13fd..af483bc1dc 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -752,6 +752,11 @@
     font-weight: 600
 }
 
+.listViewUserDataButtons {
+    display: flex;
+    align-items: center;
+}
+
 .recordingProgressBar::-moz-progress-bar {
     background-color: #c33
 }

From b051caa8a975d3bc6fb27012fef32085023a412c Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 19:26:19 +0300
Subject: [PATCH 12/17] revert back does't gowell on smaller screen and reduce
 font size

---
 src/assets/css/librarybrowser.css   | 9 ++-------
 src/components/listview/listview.js | 6 +-----
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index af483bc1dc..e2f9e34804 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -752,11 +752,6 @@
     font-weight: 600
 }
 
-.listViewUserDataButtons {
-    display: flex;
-    align-items: center;
-}
-
 .recordingProgressBar::-moz-progress-bar {
     background-color: #c33
 }
@@ -788,8 +783,8 @@
 @media all and (max-width:75em) {
     .listViewUserDataButtons {
         display: flex;
-        flex-wrap: wrap;
-        font-size: 85%;
+        align-items: center;
+        font-size: 65%;
     }
 }
 
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index 06f569c913..ebcc3fdd92 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -470,12 +470,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             if (!options.recordButton && (item.Type === 'Timer' || item.Type === 'Program')) {
                 html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
             }
-            if (item.Type === 'Episode') {
-                html += '<div class="listViewUserDataButtons">';
-            } else {
-                html += '<div class="flex align-items-center">';
-            }
 
+            html += '<div class="listViewUserDataButtons">';
 
             if (!clickEntireItem) {
 

From a821b78a8b539b73f09025a62b991351091a0085 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 20:10:38 +0300
Subject: [PATCH 13/17] reduce font size for indicator and btn

---
 src/components/listview/listview.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/listview/listview.css b/src/components/listview/listview.css
index 1ed543c11b..3fdce97057 100644
--- a/src/components/listview/listview.css
+++ b/src/components/listview/listview.css
@@ -154,8 +154,9 @@
         margin-right: 0 !important;
     }
 
+    .listItemIndicators,
     .listItemImageButton {
-        font-size: 1em !important;
+        font-size: 0.6em !important;
     }
 
     .listItemBody {

From b9ee5c7c242547cb3547f617adfcb410b1dbdee4 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Fri, 17 Jan 2020 21:00:12 +0300
Subject: [PATCH 14/17] centering primery title on mobile layout

---
 src/assets/css/librarybrowser.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index e2f9e34804..b0037f9ae7 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -408,6 +408,19 @@
     position: relative;
 }
 
+.layout-mobile .parentName,
+.layout-mobile .itemName,
+.layout-mobile .itemMiscInfo,
+.layout-mobile .mainDetailButtons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.layout-mobile .infoText {
+    white-space: normal;
+}
+
 .layout-tv .detailPagePrimaryContainer {
     position: relative;
 }

From 633999e5282317dbee60aeab80b08593ace5518a Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Tue, 21 Jan 2020 20:11:24 +0300
Subject: [PATCH 15/17] fix header tab scroll for mobile

---
 src/components/emby-tabs/emby-tabs.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css
index b8831b881a..8d1ac464fb 100644
--- a/src/components/emby-tabs/emby-tabs.css
+++ b/src/components/emby-tabs/emby-tabs.css
@@ -31,6 +31,10 @@
     overflow: hidden;
 }
 
+.layout-mobile .emby-tabs-slider {
+    overflow: auto;
+}
+
 .tabContent:not(.is-active) {
     display: none;
 }

From 474e53cc47756afd8013d91ad31ef91752ba7dd0 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 22 Jan 2020 00:22:26 +0300
Subject: [PATCH 16/17] Fix some sytle for PR #663

---
 src/assets/css/librarybrowser.css | 29 ++++++++++-------------------
 src/itemdetails.html              |  4 ++--
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index b0037f9ae7..74b25c3c76 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -242,20 +242,6 @@
 }
 
 @media all and (min-width:84em) {
-    .headerTop {
-        padding: 1.489em 0
-    }
-
-    .headerTabs {
-        align-self: center;
-        width: auto;
-        align-items: center;
-        justify-content: center;
-        margin-top: -3.34em;
-        position: relative;
-        top: -1.05em
-    }
-
     .libraryPage:not(.noSecondaryNavPage) {
         padding-top: 4.6em !important
     }
@@ -430,7 +416,7 @@
     align-items: center;
     align-content: center;
     position: sticky;
-    top: 0;
+    top: 8%;
     z-index: 2;
 }
 
@@ -467,7 +453,7 @@
 
 .detailImageContainer {
     position: sticky;
-    top: 15%;
+    top: 25%;
     float: left;
     width: 22.786458333333332vw;
 }
@@ -686,11 +672,16 @@
 
 @media all and (min-width:62.5em) {
     .headerTop {
-        padding: 1.489em 0
+        padding: 0.8em 0
     }
 
-    .itemDetailPage  {
-        padding-top: 5em !important
+    .headerTabs {
+        align-self: center;
+        width: auto;
+        align-items: center;
+        justify-content: center;
+        margin-top: -3.34em;
+        position: relative;
     }
 
     .detailFloatingButton {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 96df0a3481..849642f451 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -6,7 +6,7 @@
     </div>
 
     <div class="detailLogo"></div>
-    <div class="detailPageWrapperContainer padded-bottom-page">
+    <div class="detailPageWrapperContainer">
         <div class="detailPagePrimaryContainer padded-left padded-right">
             <div class="infoWrapper infoText">
                 <div class="nameContainer"></div>
@@ -108,7 +108,7 @@
             </div>
         </div>
         <div class="detailPageSecondaryContainer">
-            <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
+            <div class="detailImageContainer padded-left"></div>
             <div class="detailPageContent">
                 <div class="detailPagePrimaryContent padded-left padded-right">
                     <div class="detailSection" style="margin-bottom: 0;">

From a592ac2b1a2ff563a1a0dbb49a4f585f0567b377 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Wed, 22 Jan 2020 23:14:28 +0300
Subject: [PATCH 17/17] rename detailButton-mobile to detailButton

---
 src/assets/css/librarybrowser.css |  26 ++++----
 src/itemdetails.html              | 102 +++++++++++++++---------------
 2 files changed, 62 insertions(+), 66 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 74b25c3c76..a6af6dccd2 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -4,7 +4,7 @@
     vertical-align: middle
 }
 
-.detailButton-mobile,
+.detailButton,
 .itemLinks,
 .listPaging,
 .sectionTabs,
@@ -95,7 +95,7 @@
     display: flex;
 }
 
-.detailButton-mobile,
+.detailButton,
 .skinHeader {
     flex-direction: column;
 }
@@ -563,7 +563,7 @@
     }
 }
 
-.detailButton-mobile,
+.detailButton,
 .mainDetailButtons {
     display: flex;
 }
@@ -601,7 +601,7 @@
     margin-top: 1.5em !important
 }
 
-.detailButton-mobile {
+.detailButton {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -610,39 +610,35 @@
     padding: .5em .7em !important
 }
 
-.detailButton {
-    margin: 0 .5em 0 0 !important
-}
-
 @media all and (min-width:29em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: .75em !important;
         padding-right: .75em !important
     }
 }
 
 @media all and (min-width:32em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: .8em !important;
         padding-right: .8em !important
     }
 }
 
 @media all and (min-width:35em) {
-    .detailButton-mobile {
+    .detailButton {
         padding-left: .85em !important;
         padding-right: .85em !important
     }
 }
 
-.detailButton-mobile-content {
+.detailButton-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center
 }
 
-.detailButton-mobile-icon {
+.detailButton-icon {
     font-size: 1.6em !important;
     width: 1em;
     height: 1em
@@ -654,7 +650,7 @@
     width: 22.786458333333332vw;
 }
 
-.detailButton-mobile-text {
+.detailButton-text {
     margin-top: .7em;
     font-size: 80%;
     font-weight: 400
@@ -665,7 +661,7 @@
         margin-left: -.5em
     }
 
-    .detailButton {
+    .detailButtonHideonMobile {
         display: none !important
     }
 }
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 849642f451..038b4b11ff 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -15,94 +15,94 @@
             </div>
 
             <div class="mainDetailButtons">
-                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">play_arrow</i>
-                        <div class="detailButton-mobile-text">${ButtonResume}</div>
+                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton detailButtonHideonMobile" data-mode="resume">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">play_arrow</i>
+                        <div class="detailButton-text">${ButtonResume}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">play_arrow</i>
-                        <div class="detailButton-mobile-text">${ButtonPlay}</div>
+                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton detailButtonHideonMobile" data-mode="play">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">play_arrow</i>
+                        <div class="detailButton-text">${ButtonPlay}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">get_app</i>
-                        <div class="detailButton-mobile-text">${ButtonDownload}</div>
+                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">get_app</i>
+                        <div class="detailButton-text">${ButtonDownload}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">theaters</i>
-                        <div class="detailButton-mobile-text">${ButtonTrailer}</div>
+                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">theaters</i>
+                        <div class="detailButton-text">${ButtonTrailer}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">shuffle</i>
-                        <div class="detailButton-mobile-text">${HeaderInstantMix}</div>
+                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">shuffle</i>
+                        <div class="detailButton-text">${HeaderInstantMix}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">shuffle</i>
-                        <div class="detailButton-mobile-text">${ButtonShuffle}</div>
+                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">shuffle</i>
+                        <div class="detailButton-text">${ButtonShuffle}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">delete</i>
-                        <div class="detailButton-mobile-text">${CancelSeries}</div>
+                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">delete</i>
+                        <div class="detailButton-text">${CancelSeries}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">stop</i>
-                        <div class="detailButton-mobile-text">${StopRecording}</div>
+                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">stop</i>
+                        <div class="detailButton-text">${StopRecording}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">delete</i>
-                        <div class="detailButton-mobile-text">${Delete}</div>
+                <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">delete</i>
+                        <div class="detailButton-text">${Delete}</div>
                     </div>
                 </button>
 
-                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">check</i>
-                        <div class="detailButton-mobile-text button-text"></div>
+                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">check</i>
+                        <div class="detailButton-text button-text"></div>
                     </div>
                 </button>
 
-                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">favorite</i>
-                        <div class="detailButton-mobile-text button-text">${Rate}</div>
+                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">favorite</i>
+                        <div class="detailButton-text button-text">${Rate}</div>
                     </div>
                 </button>
 
                 <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon">call_split</i>
-                        <div class="detailButton-mobile-text">${ButtonSplit}</div>
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon">call_split</i>
+                        <div class="detailButton-text">${ButtonSplit}</div>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
-                    <div class="detailButton-mobile-content">
-                        <i class="md-icon detailButton-mobile-icon"></i>
-                        <div class="detailButton-mobile-text">${ButtonMore}</div>
+                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton">
+                    <div class="detailButton-content">
+                        <i class="md-icon detailButton-icon"></i>
+                        <div class="detailButton-text">${ButtonMore}</div>
                     </div>
                 </button>
             </div>