From 617708009e4ead79a90d702264f5659da109018f Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Fri, 8 May 2020 19:50:56 +0200
Subject: [PATCH] Rework mobile details page

---
 src/assets/css/librarybrowser.css | 32 +++++++++++++++++++++----------
 src/controllers/itemDetails.js    |  2 +-
 src/themes/dark/theme.css         |  5 +++++
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index ef25435dae..2388f53bbb 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -24,10 +24,6 @@
     padding-top: 7em !important;
 }
 
-.layout-mobile .libraryPage {
-    padding-top: 4em !important;
-}
-
 .itemDetailPage {
     padding-top: 0 !important;
 }
@@ -444,6 +440,7 @@
 
 .layout-mobile .itemBackdrop {
     background-attachment: scroll;
+    height: 26.5vh;
 }
 
 .layout-desktop .itemBackdrop::after,
@@ -467,6 +464,11 @@
     padding-right: 2%;
 }
 
+.layout-mobile .detailPageContent {
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
 .layout-desktop .detailPageContent .emby-scroller,
 .layout-tv .detailPageContent .emby-scroller {
     margin-left: 0;
@@ -551,6 +553,11 @@
     text-align: center;
 }
 
+.layout-mobile .mainDetailButtons {
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+}
+
 .detailPagePrimaryContainer {
     display: flex;
     align-items: center;
@@ -561,7 +568,7 @@
 .layout-mobile .detailPagePrimaryContainer {
     display: block;
     position: relative;
-    top: 0;
+    padding: 2.5em 3.3% 1em;
 }
 
 .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@@ -694,12 +701,12 @@ div.itemDetailGalleryLink.defaultCardBackground {
 
 .emby-button.detailFloatingButton {
     position: absolute;
-    background-color: rgba(0, 0, 0, 0.5) !important;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 3;
+    top: 100%;
+    left: 90%;
     margin: -2.2em 0 0 -2.2em;
-    padding: 0.4em !important;
+    padding: 0.4em;
     color: rgba(255, 255, 255, 0.76);
 }
 
@@ -1150,6 +1157,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin: 0 0.2em 0 0;
 }
 
+.layout-mobile .detailsGroupItem .label,
+.layout-mobile .trackSelections .selectContainer .selectLabel {
+    flex-basis: 4.5em;
+}
+
 .trackSelections .selectContainer .detailTrackSelect {
     font-size: inherit;
     padding: 0;
diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js
index 7c53338d21..81cac76ddd 100644
--- a/src/controllers/itemDetails.js
+++ b/src/controllers/itemDetails.js
@@ -1968,7 +1968,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
                 });
             }
 
-            playItem(item, item.UserData && 'resume' === mode ? item.UserData.PlaybackPositionTicks : 0);
+            playItem(item, item.UserData && mode === 'resume' ? item.UserData.PlaybackPositionTicks : 0);
         }
 
         function onPlayClick() {
diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css
index a32e606386..72eedd6b96 100644
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@@ -453,3 +453,8 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc;
 }
+
+.emby-button.detailFloatingButton {
+    background-color: #00a4dc;
+    color: #fff;
+}