Merge pull request #2246 from thornbill/fix-item-details-mobile

Fix layout issues on mobile item details

src/assets/css/librarybrowser.css

@@ -250,6 +250,26 @@
     padding-bottom: 10vh;
 }
 
+.primaryImageWrapper {
+    display: none;
+}
+
+.primaryImageWrapper > img {
+    display: block;
+    margin: 0 auto;
+    max-width: 80vw;
+    max-height: 50vh;
+}
+
+.primaryImageWrapper > img.aspect-square {
+    max-height: 45vh;
+}
+
+.layout-mobile .primaryImageWrapper {
+    display: block;
+    flex: 1 0 auto;
+}
+
 @media all and (min-width: 40em) {
     .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
@@ -453,8 +473,7 @@
 }
 
 .layout-mobile .itemBackdrop {
-    background-attachment: scroll;
-    height: 26.5vh;
+    display: none;
 }
 
 .layout-desktop .itemBackdrop::after {
@@ -614,7 +633,8 @@
 }
 
 .layout-mobile .mainDetailButtons {
-    margin-top: 1em;
+    flex: 2 0 70%;
+    margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
 
@@ -638,9 +658,9 @@
 }
 
 .layout-mobile .detailPagePrimaryContainer {
-    display: block;
+    flex-wrap: wrap;
     position: relative;
-    padding: 0.5em 3.3% 0.5em;
+    padding: 4.5rem 3.3% 0.5rem;
 }
 
 .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@@ -669,6 +689,10 @@
     flex: 1 0 0;
 }
 
+.layout-mobile .infoWrapper {
+    flex: 2 0 70%;
+}
+
 .infoText {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -729,7 +753,8 @@
     background-size: contain;
 }
 
-.noBackdrop .detailLogo {
+.noBackdrop .detailLogo,
+.layout-mobile .detailLogo {
     display: none;
 }
 

src/controllers/itemDetails/index.html

@@ -5,6 +5,10 @@
     <div class="detailLogo"></div>
     <div class="detailPageWrapperContainer">
         <div class="detailPagePrimaryContainer padded-left padded-right">
+            <div class="primaryImageWrapper hide">
+                <img id="primaryImage" />
+            </div>
+
             <div class="infoWrapper infoText">
                 <div class="nameContainer"></div>
                 <div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>

src/controllers/itemDetails/index.js

@@ -552,7 +552,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    if (!layoutManager.mobile && !userSettings.detailsBanner()) {
+    if (layoutManager.mobile || !userSettings.detailsBanner()) {
         return false;
     }
 
@@ -589,6 +589,24 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     return hasbackdrop;
 }
 
+function renderPrimaryImage(page, item, apiClient) {
+    if (item?.ImageTags?.Primary) {
+        const imageUrl = apiClient.getScaledImageUrl(item.Id, {
+            type: 'Primary',
+            maxWidth: dom.getScreenWidth(),
+            tag: item.ImageTags.Primary
+        });
+
+        const imageElem = page.querySelector('#primaryImage');
+        imageElem.src = imageUrl;
+        imageElem.alt = item.Name;
+        if (item.PrimaryImageAspectRatio === 1) {
+            imageElem.classList.add('aspect-square');
+        }
+        page.querySelector('.primaryImageWrapper')?.classList.remove('hide');
+    }
+}
+
 function reloadFromItem(instance, page, params, item, user) {
     const apiClient = ServerConnections.getApiClient(item.ServerId);
 
@@ -601,6 +619,9 @@ function reloadFromItem(instance, page, params, item, user) {
         renderLogo(page, item, apiClient);
         renderDetailPageBackdrop(page, item, apiClient);
     }
+    if (layoutManager.mobile) {
+        renderPrimaryImage(page, item, apiClient);
+    }
     renderBackdrop(item);
 
     // Render the main information for the item
@@ -2073,7 +2094,7 @@ export default function (view, params) {
         view.addEventListener('viewshow', function (e) {
             const page = this;
 
-            libraryMenu.setTransparentMenu(true);
+            libraryMenu.setTransparentMenu(!layoutManager.mobile);
 
             if (e.detail.isRestored) {
                 if (currentItem) {