Merge pull request #694 from grafixeyehero/item-detail-page-

Item detail page layout improvements continued form #611

src/assets/css/librarybrowser.css

@@ -4,7 +4,7 @@
     vertical-align: middle;
 }
 
-.detailButton-mobile,
+.detailButton,
 .itemLinks,
 .listPaging,
 .sectionTabs,
@@ -130,7 +130,7 @@
     display: -webkit-flex;
 }
 
-.detailButton-mobile,
+.detailButton,
 .skinHeader {
     flex-direction: column;
     -webkit-flex-direction: column;
@@ -272,26 +272,7 @@
     }
 }
 
-@media all and (min-width: 84em) {
-    .headerTop {
-        padding: 1.489em 0;
-    }
-
-    .headerTabs {
-        -webkit-align-self: center;
-        align-self: center;
-        width: auto;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        justify-content: center;
-        margin-top: -3.34em;
-        position: relative;
-        top: -1.05em;
-    }
-
+@media all and (min-width:84em) {
     .libraryPage:not(.noSecondaryNavPage) {
         padding-top: 4.6em !important;
     }
@@ -432,6 +413,10 @@
     position: relative;
 }
 
+.personBackdrop {
+    background-size: contain;
+}
+
 .itemBackdropProgressBar {
     position: absolute !important;
     bottom: 0;
@@ -441,17 +426,7 @@
 
 .desktopMiscInfoContainer {
     position: absolute;
-    bottom: 0.75em;
-}
-
-.detailPagePrimaryContainer {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    position: sticky;
-    background-color: #101010;
-    top: 0;
-    z-index: 2;
+    bottom: .75em
 }
 
 .layout-mobile .detailPagePrimaryContainer {
@@ -459,10 +434,36 @@
     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;
 }
 
+.detailPagePrimaryContainer {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    position: sticky;
+    top: 8%;
+    z-index: 2;
+}
+
+.detailSticky {
+    background-color: #101010;
+}
+
 .infoWrapper {
     flex: 1 0 0;
 }
@@ -476,6 +477,9 @@
 
 .detailPageSecondaryContainer {
     margin: 1.25em 0;
+}
+
+.detailPageContent {
     display: flex;
     flex-direction: column;
     padding-left: 2%;
@@ -483,9 +487,8 @@
 }
 
 .detailImageContainer {
-    margin: 1.25em 0;
     position: sticky;
-    top: 15%;
+    top: 25%;
     float: left;
     width: 22.786458333333332vw;
 }
@@ -497,9 +500,6 @@
 
 .detailPagePrimaryContent {
     position: relative;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
 }
 
 .detailLogo {
@@ -542,9 +542,9 @@
     -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
-@media all and (max-width: 62.5em) {
-    .detailPageContent {
-        position: relative;
+@media all and (max-width:62.5em) {
+    .detailPageWrapperContainer {
+        position: relative
     }
 
     .btnPlaySimple {
@@ -613,7 +613,7 @@
     }
 }
 
-.detailButton-mobile,
+.detailButton,
 .mainDetailButtons {
     display: flex;
     display: -webkit-box;
@@ -657,7 +657,7 @@
     margin-top: 1.5em !important;
 }
 
-.detailButton-mobile {
+.detailButton {
     display: flex;
     flex-direction: column;
     -webkit-box-pack: center;
@@ -670,32 +670,28 @@
     padding: 0.5em 0.7em !important;
 }
 
-.detailButton {
-    margin: 0 0.5em 0 0 !important;
-}
-
-@media all and (min-width: 29em) {
-    .detailButton-mobile {
-        padding-left: 0.75em !important;
-        padding-right: 0.75em !important;
+@media all and (min-width:29em) {
+    .detailButton {
+        padding-left: .75em !important;
+        padding-right: .75em !important
     }
 }
 
-@media all and (min-width: 32em) {
-    .detailButton-mobile {
-        padding-left: 0.8em !important;
-        padding-right: 0.8em !important;
+@media all and (min-width:32em) {
+    .detailButton {
+        padding-left: .8em !important;
+        padding-right: .8em !important
     }
 }
 
-@media all and (min-width: 35em) {
-    .detailButton-mobile {
-        padding-left: 0.85em !important;
-        padding-right: 0.85em !important;
+@media all and (min-width:35em) {
+    .detailButton {
+        padding-left: .85em !important;
+        padding-right: .85em !important
     }
 }
 
-.detailButton-mobile-content {
+.detailButton-content {
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
@@ -711,19 +707,20 @@
     align-items: center;
 }
 
-.detailButton-mobile-icon {
+.detailButton-icon {
     font-size: 1.6em !important;
     width: 1em;
     height: 1em;
 }
 
 .detailImageProgressContainer {
-    margin-left: 6px;
-    width: 21.886458333333332vw;
+    position: absolute;
+    bottom: 0;
+    width: 22.786458333333332vw;
 }
 
-.detailButton-mobile-text {
-    margin-top: 0.7em;
+.detailButton-text {
+    margin-top: .7em;
     font-size: 80%;
     font-weight: 400;
 }
@@ -733,16 +730,33 @@
         margin-left: -0.5em;
     }
 
-    .detailButton {
-        display: none !important;
+    .detailButtonHideonMobile {
+        display: none !important
     }
 }
 
-@media all and (min-width: 62.5em) {
+@media all and (min-width:62.5em) {
+    .headerTop {
+        padding: 0.8em 0
+    }
+
+    .headerTabs {
+        align-self: center;
+        width: auto;
+        align-items: center;
+        justify-content: center;
+        margin-top: -3.34em;
+        position: relative;
+    }
+
     .detailFloatingButton {
         display: none !important;
     }
 
+    .personBackdrop {
+        display: none !important
+    }
+
     .mainDetailButtons {
         font-size: 108%;
         margin: 1.25em 0;
@@ -783,17 +797,11 @@
     margin-bottom: 3.4em !important;
 }
 
-.detailPageContent {
+.detailPageWrapperContainer {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
-@media all and (max-width: 62.5em) {
-    .detailPageContent-nodetailimg {
-        padding-top: 0;
-    }
-}
-
 .mediaInfoStream {
     margin: 0 3em 0 0;
     display: inline-block;
@@ -845,13 +853,9 @@
 
 @media all and (max-width: 75em) {
     .listViewUserDataButtons {
-        display: none !important;
-    }
-}
-
-@media all and (max-width: 62.5em) {
-    .detailsHiddenOnMobile {
-        display: none;
+        display: flex;
+        align-items: center;
+        font-size: 65%;
     }
 }
 

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;
 }

src/components/listview/listview.css

@@ -162,13 +162,14 @@
 
 @media all and (max-width: 64em) {
     .listItemImage-large {
-        width: 33.75vw;
-        height: 22.5vw;
+        width: 22vw;
+        height: 16vw;
         margin-right: 0 !important;
     }
 
+    .listItemIndicators,
     .listItemImageButton {
-        font-size: 1em !important;
+        font-size: 0.6em !important;
     }
 
     .listItemBody {

src/components/listview/listview.js

@@ -471,6 +471,8 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 html += indicators.getTimerIndicator(item).replace('indicatorIcon', 'indicatorIcon listItemAside');
             }
 
+            html += '<div class="listViewUserDataButtons">';
+
             if (!clickEntireItem) {
 
                 if (options.addToListButton) {
@@ -491,8 +493,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;
 
@@ -503,10 +503,9 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                     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="material-icons">favorite</i></button>';
                     }
-
-                    html += '</span>';
                 }
             }
+            html += '</div>';
 
             if (enableContentWrapper) {
                 html += '</div>';

src/controllers/itemdetailpage.js

@@ -461,7 +461,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         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, {
@@ -513,11 +514,18 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             itemBackdropElement.style.backgroundImage = "";
         }
 
+        if ("Person" === item.Type) {
+            itemBackdropElement.classList.add("personBackdrop");
+        } else {
+            itemBackdropElement.classList.remove("personBackdrop");
+        }
+
         return hasbackdrop;
     }
 
     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);
@@ -735,12 +743,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
             editable = false;
         }
 
-        if ("Person" !== item.Type) {
-            elem.classList.add("detailimg-hidemobile");
-            page.querySelector(".detailPageContent").classList.add("detailPageContent-nodetailimg");
-        } else {
-            page.querySelector(".detailPageContent").classList.remove("detailPageContent-nodetailimg");
-        }
+        elem.classList.add("detailimg-hidemobile");
 
         var imageTags = item.ImageTags || {};
 
@@ -1050,11 +1053,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         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;
@@ -2093,7 +2091,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
         });
         view.addEventListener("viewshow", function (e) {
             var page = this;
-            libraryMenu.setTransparentMenu(true);
+
+            if (layoutManager.mobile) {
+                libraryMenu.setTransparentMenu(true);
+            }
 
             if (e.detail.isRestored) {
                 if (currentItem) {

src/itemdetails.html

@@ -15,100 +15,100 @@
             </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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons detailButton-mobile-icon">explore</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="material-icons detailButton-icon">explore</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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons 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="material-icons detailButton-mobile-icon">call_split</i>
-                        <div class="detailButton-mobile-text">${ButtonSplit}</div>
+                    <div class="detailButton-content">
+                        <i class="material-icons 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="material-icons 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="material-icons detailButton-icon"></i>
+                        <div class="detailButton-text">${ButtonMore}</div>
                     </div>
                 </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;">

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,