rework detail page a little

dashboard-ui/css/librarybrowser.css

@@ -50,13 +50,8 @@
 @media all and (max-width: 1200px) {
 
     .libraryPage > .ui-content {
-        padding-left: .4em !important;
-        padding-right: .4em !important;
-    }
-
-    .detailSection {
-        margin-left: .25em;
-        margin-right: .25em;
+        padding-left: .5em !important;
+        padding-right: .5em !important;
     }
 }
 
@@ -140,10 +135,14 @@
 }
 
 .detailButtonsContainer {
-    padding: .35em 0 .35em;
+    padding: 0 0 .5em;
     text-align: center;
 }
 
+    .detailButtonsContainer a, .detailButtonsContainer button {
+        margin-top: 0;
+    }
+
 .viewSettings {
     margin: 0 0 .25em;
     text-align: center;
@@ -260,7 +259,7 @@
     display: inline-block;
     font-size: 12px;
     text-align: center;
-    padding: 2px 4px;
+    padding: 1px 6px 0;
     border-radius: 2px;
 }
 
@@ -371,7 +370,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     background-size: cover;
     background-position: center 15%;
     background-repeat: no-repeat;
-    height: 600px;
+    height: 500px;
     position: relative;
 }
 
@@ -384,14 +383,11 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 }
 
 .noBackdrop {
-    height: auto;
-    border: 0;
+    height: 260px;
 }
 
     .noBackdrop .itemBackdropContent {
         background-color: transparent;
-        position: static;
-        margin-top: 1em;
     }
 
 .lnkSibling {
@@ -410,12 +406,10 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         text-decoration: underline;
     }
 
-@media all and (max-width: 1000px) {
-
-    .lnkSibling {
-        display: none !important;
+    .lnkSibling:not(.hide) {
+        display: block;
     }
-}
+
 
 .lnkPreviousItem {
     left: 10px;
@@ -425,19 +419,34 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     right: 0;
 }
 
+.detailImageContainer {
+    position: absolute;
+}
+
+.detailImageContainer {
+    top: -66px;
+}
+
 .itemDetailImage {
-    max-height: 280px;
-    max-width: 320px;
     -moz-box-shadow: 0px 0 20px #000;
     -webkit-box-shadow: 0px 0 20px #000;
     box-shadow: 0px 0 20px #000;
     border: solid 1px #222;
-    margin-top: -20px;
-    margin-bottom: 10px;
 }
 
-.noBackdrop .itemDetailImage {
-    margin-top: 0;
+.thumbDetailImage {
+    max-width: 360px;
+    max-height: 360px;
+}
+
+.squareDetailImage {
+    max-width: 240px;
+    max-height: 240px;
+}
+
+.portraitDetailImage {
+    max-width: 240px;
+    max-height: 360px;
 }
 
 .itemDetailGalleryLink img:hover {
@@ -446,9 +455,31 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     box-shadow: 0 0 20px 3px #38c;
 }
 
-.itemByNameImageContainer .itemDetailImage {
-    margin: 0 !important;
-    max-height: 220px;
+.detailContentEffectedByThumbImage:not(.lastDetailContentEffectedByImage) {
+    margin-left: 380px;
+}
+
+.detailContentEffectedBySquareImage:not(.lastDetailContentEffectedByImage) {
+    margin-left: 260px;
+}
+
+.detailContentEffectedByPortraitImage {
+    margin-left: 260px;
+}
+
+.detailContentEffectedByImage a {
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedByThumbImage {
+    padding: 0 .5em;
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedBySquareImage {
+    padding: 0 .5em;
+}
+
+.lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
+    min-height: 140px;
 }
 
 .parentName {
@@ -457,6 +488,57 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     margin-bottom: .5em;
 }
 
+@media all and (min-width: 800px) {
+    .lastDetailContentEffectedByImage.detailContentEffectedBySquareImage {
+        margin-top: 2em;
+    }
+}
+
+@media all and (max-width: 1000px) {
+    .detailImageContainer {
+        margin-left: 20px;
+    }
+
+    .thumbDetailImage {
+        max-width: 340px;
+    }
+
+    .squareDetailImage {
+        max-width: 220px;
+    }
+
+    .portraitDetailImage {
+        max-width: 220px;
+    }
+
+    .lastDetailContentEffectedByImage.detailContentEffectedByPortraitImage {
+        min-height: 110px;
+    }
+}
+
+@media all and (max-width: 800px) {
+    .detailContentEffectedByThumbImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+    .detailContentEffectedBySquareImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+    .detailContentEffectedByPortraitImage {
+        margin-left: 0 !important;
+        padding: 0 1em;
+    }
+
+
+
+    .parentName {
+        margin-bottom: 1em;
+    }
+}
+
 .inlineItemName {
     font-size: 22px;
 }
@@ -609,7 +691,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 
 .detailImageProgressContainer {
     position: absolute;
-    bottom: 10px;
+    bottom: 3px;
     right: 0;
     left: 0;
     text-align: center;
@@ -642,19 +724,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         display: none;
     }
 
-    .itemBackdrop {
-        height: auto;
-    }
-
-    .itemBackdropContent {
-        position: static;
-        padding: 1em 1em .5em;
+    .itemBackdrop:not(.noBackdrop) {
+        height: 280px;
     }
 
     .itemDetailImage {
         max-height: 240px;
         max-width: 100px;
-        margin-top: 0;
     }
 
     .mobileOverview:not(.hide), .mobileGenres, .mobileDetailButtons {
@@ -669,34 +745,28 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         font-size: 18px;
     }
 
-        .inlineItemName + .itemMiscInfo {
-            margin-left: 0 !important;
-            margin-top: 1em;
-            display: block !important;
-        }
-
-    .primaryDetailPageContent .userDataIcons {
-        margin-left: 0 !important;
-        margin-top: 1em;
-        display: block;
-    }
-}
-
-
-@media all and (min-width: 750px) {
-
-    .lnkSibling:not(.hide) {
-        display: block;
+    .primaryDetailPageContent p {
+        margin: 1em 0 !important;
     }
 
-    .itemBackdrop:not(.noBackdrop) {
-        border-bottom: 1px solid #111;
+    .backdropDetailPageContent {
+        text-align: center;
+    }
+
+    .detailImageContainer {
+        display: none;
+    }
+
+    .noBackdrop .detailImageContainer {
+        display: block;
+        position: static;
+        text-align: center;
     }
 }
 
 @media all and (min-width: 750px) {
     .detailPageContent {
-        max-width: 900px;
+        max-width: 1000px;
         width: auto;
     }
 }
@@ -1312,3 +1382,27 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         margin-right: 1em;
     }
 }
+
+.smallDetailImageContainer img {
+    -moz-box-shadow: 0px 0 20px #000;
+    -webkit-box-shadow: 0px 0 20px #000;
+    box-shadow: 0px 0 20px #000;
+    border: solid 1px #222;
+    max-width: 240px;
+    max-height: 240px;
+}
+
+@media all and (max-width: 800px) {
+
+    .smallDetailImageContainer img {
+        max-width: 120px;
+        max-height: 120px;
+    }
+}
+
+@media all and (max-width: 1000px) {
+
+    .smallDetailImageContainer {
+        padding-left: 1em;
+    }
+}

dashboard-ui/css/librarymenu.css

@@ -186,10 +186,6 @@
         color: #fff !important;
     }
 
-.musicViewMenu {
-    background-image: url(images/items/folders/music.png);
-}
-
 .homeViewMenu {
     background-image: url(images/mblogoicon.png) !important;
     background-size: 39px 26px !important;

dashboard-ui/css/materialize.css

@@ -123,9 +123,13 @@
     padding: 1em 2em;
 }
 
-    .btn-large i {
-        font-size: 1.6rem;
-    }
+.btn.btn-inline {
+    padding: .6em 1.25em .6em 34px;
+}
+
+.btn-large i {
+    font-size: 1.6rem;
+}
 
 .btn-floating-large i {
     font-size: 1.6rem;
@@ -155,6 +159,10 @@
     font-family: Roboto !important;
 }
 
+.btnSmall {
+    font-size: 13px;
+}
+
 .btnCancel {
     background-color: #444;
 }
@@ -172,6 +180,7 @@
     display: inline-block;
     width: auto;
     margin-bottom: 0;
+    padding: .6em .5em .6em .5em!important;
 }
 
 button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
@@ -182,7 +191,7 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
     vertical-align: middle;
 }
 
-.btn i {
+.btn:not(.btn-inline):not(.btnNoText) i {
     position: absolute;
     left: 10px;
 }
@@ -192,3 +201,11 @@ button.btn:not(.btn-inline), button.btn-large:not(.btn-inline) {
     left: 24px;
     top: 22px;
 }
+
+.btnNoText {
+    padding: .6em .5em!important;
+}
+
+.btnNoText {
+    border-radius: 5px;
+}

dashboard-ui/css/site.css

@@ -1001,11 +1001,12 @@ progress {
 
 .accentButton {
     display: inline-block;
-    background: rgba(51, 136, 204, .8);
+    background: rgba(51, 136, 204, .9);
     border-radius: 1000px;
     padding: 4px 10px;
     color: #fff !important;
-    font-weight: normal !important;
+    font-size: 13px;
+    font-weight: 400 !important;
     text-decoration: none;
     vertical-align: middle;
     border: 0;

dashboard-ui/css/tileitem.css

@@ -415,14 +415,6 @@
     position: relative;
 }
 
-.posterItemDefaultText {
-    position: absolute;
-    top: 30%;
-    left: 0;
-    right: 0;
-    text-align: center;
-}
-
 .myLibraryPosterItem {
     width: 42%;
     min-width: 50px;
@@ -436,12 +428,17 @@
         background-color: rgba(82, 181, 75, 0.7);
     }
 
-    .myLibraryPosterItem .posterItemDefaultText {
+    .myLibraryPosterItem .posterItemText {
         top: 0;
         left: 0;
         line-height: 34px;
         text-align: left;
-        padding: 0 0 0 34px;
+        padding: 0 0 0 12px;
+        position: absolute;
+    }
+
+    .myLibraryPosterItem i {
+        margin-right: 10px;
     }
 
 .moviesPosterItem .posterItemImage, .trailersPosterItem .posterItemImage {
@@ -479,6 +476,7 @@
 .musicvideosPosterItem .posterItemImage {
     background-color: rgba(143, 54, 168, 0.7);
 }
+
 @media all and (min-width: 600px) {
 
     .myLibraryPosterItem {
@@ -487,6 +485,7 @@
         min-width: 160px;
     }
 }
+
 @media all and (min-width: 1000px) {
 
     .myLibraryPosterItem {
@@ -494,4 +493,4 @@
         /* Specify a min width just in case the container doesn't have a width */
         min-width: 220px;
     }
-}
+}

dashboard-ui/itembynamedetails.html

@@ -123,7 +123,7 @@
             <table class="detailPageContent primaryDetailPageContent">
                 <tr>
                     <td style="vertical-align: top; padding: 0 1em 0 0;">
-                        <div id="itemImage" class="itemImageContainer itemByNameImageContainer"></div>
+                        <div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
                     </td>
                     <td style="vertical-align: top; padding: 0;">
                         <p style="margin-top:0;"><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>

dashboard-ui/itemdetails.html

@@ -109,56 +109,36 @@
 
         <div id="itemBackdrop" class="itemBackdrop noBackdrop">
             <div class="itemBackdropContent">
-                <table class="detailPageContent primaryDetailPageContent">
-                    <tr>
-                        <td style="vertical-align: top; padding: 0 .8em 0 0;">
-                            <div class="itemImageContainer">
-                                <div id="itemImage">
-                                </div>
-                            </div>
-                        </td>
-                        <td style="vertical-align: top; padding: 0; position: relative;">
-                            <p><span class="parentName"></span><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
-                            <p>
-                                <span class="itemCommunityRating"></span>
-                                <span class="userDataIcons"></span>
-                            </p>
-                            <p id="artist"></p>
-                            <p class="itemGenres desktopGenres"></p>
-                            <p class="itemOverview desktopOverview"></p>
-                            <div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;">
-                                <span class="missingIndicator" style="margin: 0 .5em; display: none;">
-                                    <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelMissing}</span>
-                                </span>
-                                <span class="offlineIndicator" style="margin: 0 .5em; display: none;">
-                                    <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelOffline}</span>
-                                </span>
-                                <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
-                                <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
-                                <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
-                                <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                                <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
-                                <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
-                            </div>
-                        </td>
-                    </tr>
-                </table>
-                <div class="detailButtonsContainer mobileDetailButtons">
-                    <span class="missingIndicator" style="margin: 0 .5em; display: none;">
-                        <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelMissing}</span>
-                    </span>
-                    <span class="offlineIndicator" style="margin: 0 .5em; display: none;">
-                        <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelOffline}</span>
-                    </span>
-                    <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
-                    <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
-                    <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
-                    <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                    <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
-                    <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
+
+                <div class="detailPageContent primaryDetailPageContent backdropDetailPageContent">
+
+                    <div class="detailImageContainer">
+                    </div>
+
+                    <div class="detailContentEffectedByImage">
+                        <p><span class="parentName"></span><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
+                        <p style="margin:1.1em 0">
+                            <span class="itemCommunityRating"></span>
+                            <span class="userDataIcons"></span>
+                        </p>
+
+                        <div class="detailButtonsContainer desktopDetailButtons" style="text-align:left;">
+                            <span class="missingIndicator" style="margin: 0 .5em; display: none;">
+                                <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelMissing}</span>
+                            </span>
+                            <span class="offlineIndicator" style="margin: 0 .5em; display: none;">
+                                <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelOffline}</span>
+                            </span>
+                            <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
+                            <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
+                            <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
+                            <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
+                            <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
+                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
+                        </div>
+                    </div>
                 </div>
-                <p class="itemGenres mobileGenres"></p>
-                <p class="itemOverview mobileOverview"></p>
+
             </div>
             <a href="#" id="lnkPreviousItem" class="lnkPreviousItem lnkSibling hide" data-role="button" title="${ButtonPrevious}" data-icon="carat-l" data-mini="true" data-inline="true" data-iconpos="notext">${ButtonPrevious}</a>
             <a href="#" id="lnkNextItem" class="lnkNextItem lnkSibling hide" data-role="button" title="${ButtonNext}" data-icon="carat-r" data-mini="true" data-inline="true" data-iconpos="notext">${ButtonNext}</a>
@@ -166,7 +146,29 @@
         <div data-role="content">
             <div class="detailPageContent">
 
-                <br />
+                <div class="detailSection" style="margin-bottom:1.5em;">
+                    <div class="detailSectionContent detailContentEffectedByImage lastDetailContentEffectedByImage">
+
+                        <div class="detailButtonsContainer mobileDetailButtons">
+                            <span class="missingIndicator" style="margin: 0 .5em; display: none;">
+                                <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelMissing}</span>
+                            </span>
+                            <span class="offlineIndicator" style="margin: 0 .5em; display: none;">
+                                <span style="background: #cc3333; padding: 5px 1em; border-radius: 5px;">${LabelOffline}</span>
+                            </span>
+                            <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
+                            <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
+                            <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
+                            <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
+                            <a class="btnSync hide" data-role="button" data-icon="cloud" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
+                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
+                        </div>
+                        <p id="artist"></p>
+                        <p class="itemGenres"></p>
+                        <p class="itemOverview"></p>
+                        <p id="seriesAirTime"></p>
+                    </div>
+                </div>
                 <div class="collectionItems"></div>
                 <div id="childrenCollapsible" class="hide detailSection">
                     <div class="detailSectionHeader">
@@ -188,21 +190,19 @@
                     </div>
                     <div id="castContent" class="detailSectionContent"></div>
                 </div>
-                <div class="detailSection detailCollapsibleSection detailsSection">
-                    <div data-role="collapsible" class="detailPageCollabsible" data-content-theme="false">
-                        <h2>${HeaderDetails}</h2>
-                        <div>
-                            <div class="tabDetails">
-                                <p id="players"></p>
-                                <p id="seriesAirTime"></p>
-                                <p id="itemBudget"></p>
-                                <p id="itemRevenue"></p>
-                                <p class="itemExternalLinks"></p>
-
-                                <p class="itemStudios"></p>
-                                <p class="itemKeywords"></p>
-                                <p class="itemTags"></p>
-                            </div>
+                <div class="detailSection detailsSection">
+                    <div class="detailSectionHeader">
+                        ${HeaderDetails}
+                    </div>
+                    <div class="detailSectionContent" style="padding:0 1em;">
+                        <div class="tabDetails">
+                            <p id="players"></p>
+                            <p id="itemBudget"></p>
+                            <p id="itemRevenue"></p>
+                            <p class="itemExternalLinks"></p>
+                            <p class="itemStudios"></p>
+                            <p class="itemKeywords"></p>
+                            <p class="itemTags"></p>
                         </div>
                     </div>
                 </div>

dashboard-ui/livetvprogram.html

@@ -13,8 +13,8 @@
             <a href="livetvtimers.html">${TabScheduled}</a>
             <a href="livetvseriestimers.html">${TabSeries}</a>
         </div>
-        <div id="itemBackdrop" class="itemBackdrop noBackdrop">
-            <div class="itemBackdropContent">
+        <div>
+            <div>
                 <table class="detailPageContent primaryDetailPageContent">
                     <tr>
                         <td style="vertical-align: top; padding: 0 1em 0 0;">

dashboard-ui/scripts/indexpage.js

@@ -25,42 +25,42 @@
 
             var item = items[i];
 
-            var imgUrl;
+            var icon;
 
             switch (item.CollectionType) {
                 case "movies":
-                    imgUrl = "css/images/items/folders/movies.png";
+                    icon = "fa-film";
                     break;
                 case "music":
-                    imgUrl = "css/images/items/folders/music.png";
+                    icon = "fa-music";
                     break;
                 case "photos":
-                    imgUrl = "css/images/items/folders/photos.png";
+                    icon = "fa-photo";
                     break;
                 case "livetv":
                 case "tvshows":
-                    imgUrl = "css/images/items/folders/tv.png";
+                    icon = "fa-video-camera";
                     break;
                 case "games":
-                    imgUrl = "css/images/items/folders/games.png";
+                    icon = "fa-gamepad";
                     break;
                 case "trailers":
-                    imgUrl = "css/images/items/folders/movies.png";
+                    icon = "fa-film";
                     break;
                 case "homevideos":
-                    imgUrl = "css/images/items/folders/homevideos.png";
+                    icon = "fa-video-camera";
                     break;
                 case "musicvideos":
-                    imgUrl = "css/images/items/folders/musicvideos.png";
+                    icon = "fa-video-camera";
                     break;
                 case "books":
-                    imgUrl = "css/images/items/folders/books.png";
+                    icon = "fa-book";
                     break;
                 case "channels":
-                    imgUrl = "css/images/items/folders/channels.png";
+                    icon = "fa-video-camera";
                     break;
                 default:
-                    imgUrl = "css/images/items/folders/folder.png";
+                    icon = "fa-folder-o";
                     break;
             }
 
@@ -75,14 +75,13 @@
 
             html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
 
-            var style = 'background-image:url(\'' + imgUrl + '\');';
-
             var imageCssClass = '';
 
-            html += '<div class="posterItemImage ' + imageCssClass + '" style="' + style + '">';
+            html += '<div class="posterItemImage ' + imageCssClass + '">';
             html += '</div>';
 
             html += "<div class='posterItemDefaultText posterItemText'>";
+            html += '<i class="fa ' + icon + '"></i>';
             html += item.Name;
             html += "</div>";
 

dashboard-ui/scripts/itemdetailpage.js

@@ -146,7 +146,7 @@
 
         var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
 
-        $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, imageHref));
+        LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref);
     }
 
     function onWebSocketMessage(e, data) {

dashboard-ui/scripts/librarybrowser.js

@@ -299,6 +299,10 @@
 
             var commands = [];
 
+            if (BoxSetEditor.supportsAddingToCollection(item)) {
+                commands.push('addtocollection');
+            }
+
             if (PlaylistManager.supportsPlaylists(item)) {
                 commands.push('playlist');
             }
@@ -377,6 +381,10 @@
             html += '<ul data-role="listview" style="min-width: 180px;">';
             html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
 
+            if (commands.indexOf('addtocollection') != -1) {
+                html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');BoxSetEditor.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToCollection') + '</a></li>';
+            }
+
             if (commands.indexOf('playlist') != -1) {
                 html += '<li><a href="#" onclick="$(\'.playFlyout\').popup(\'close\');PlaylistManager.showPanel([\'' + itemId + '\']);">' + Globalize.translate('ButtonAddToPlaylist') + '</a></li>';
             }
@@ -2118,13 +2126,13 @@
 
             var url;
 
-            var imageHeight = 280;
+            var imageHeight = 360;
 
             if (preferThumb && imageTags.Thumb) {
 
                 url = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.ImageTags.Thumb
                 });
             }
@@ -2132,7 +2140,7 @@
 
                 url = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Primary",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.ImageTags.Primary
                 });
             }
@@ -2140,7 +2148,7 @@
 
                 url = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Backdrop",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.BackdropImageTags[0]
                 });
             }
@@ -2148,7 +2156,7 @@
 
                 url = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Thumb",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.ImageTags.Thumb
                 });
             }
@@ -2156,7 +2164,7 @@
 
                 url = ApiClient.getScaledImageUrl(item.Id, {
                     type: "Disc",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.ImageTags.Disc
                 });
             }
@@ -2164,7 +2172,7 @@
 
                 url = ApiClient.getScaledImageUrl(item.AlbumId, {
                     type: "Primary",
-                    maxHeight: imageHeight,
+                    height: imageHeight,
                     tag: item.AlbumPrimaryImageTag
                 });
 
@@ -2218,6 +2226,175 @@
             return html;
         },
 
+        renderDetailImage: function (elem, item, href, preferThumb) {
+
+            var imageTags = item.ImageTags || {};
+
+            if (item.PrimaryImageTag) {
+                imageTags.Primary = item.PrimaryImageTag;
+            }
+
+            var html = '';
+
+            var url;
+            var shape = 'portrait';
+
+            var imageHeight = 360;
+            var detectRatio = false;
+
+            if (preferThumb && imageTags.Thumb) {
+
+                url = ApiClient.getScaledImageUrl(item.Id, {
+                    type: "Thumb",
+                    height: imageHeight,
+                    tag: item.ImageTags.Thumb
+                });
+                shape = 'thumb';
+            }
+            else if (imageTags.Primary) {
+
+                url = ApiClient.getScaledImageUrl(item.Id, {
+                    type: "Primary",
+                    height: imageHeight,
+                    tag: item.ImageTags.Primary
+                });
+                detectRatio = true;
+            }
+            else if (item.BackdropImageTags && item.BackdropImageTags.length) {
+
+                url = ApiClient.getScaledImageUrl(item.Id, {
+                    type: "Backdrop",
+                    height: imageHeight,
+                    tag: item.BackdropImageTags[0]
+                });
+                shape = 'thumb';
+            }
+            else if (imageTags.Thumb) {
+
+                url = ApiClient.getScaledImageUrl(item.Id, {
+                    type: "Thumb",
+                    height: imageHeight,
+                    tag: item.ImageTags.Thumb
+                });
+                shape = 'thumb';
+            }
+            else if (imageTags.Disc) {
+
+                url = ApiClient.getScaledImageUrl(item.Id, {
+                    type: "Disc",
+                    height: imageHeight,
+                    tag: item.ImageTags.Disc
+                });
+                shape = 'square';
+            }
+            else if (item.AlbumId && item.AlbumPrimaryImageTag) {
+
+                url = ApiClient.getScaledImageUrl(item.AlbumId, {
+                    type: "Primary",
+                    height: imageHeight,
+                    tag: item.AlbumPrimaryImageTag
+                });
+                shape = 'square';
+            }
+            else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicGenre") {
+                url = "css/images/items/detail/audio.png";
+                shape = 'square';
+            }
+            else if (item.MediaType == "Game" || item.Type == "GameGenre") {
+                url = "css/images/items/detail/game.png";
+                shape = 'square';
+            }
+            else if (item.Type == "Person") {
+                url = "css/images/items/detail/person.png";
+                shape = 'square';
+            }
+            else if (item.Type == "Genre" || item.Type == "Studio") {
+                url = "css/images/items/detail/video.png";
+                shape = 'square';
+            }
+            else if (item.Type == "TvChannel") {
+                url = "css/images/items/detail/tv.png";
+                shape = 'square';
+            }
+            else {
+                url = "css/images/items/detail/video.png";
+                shape = 'square';
+            }
+
+            if (!href) {
+                href = "itemgallery.html?id=" + item.Id;
+            }
+
+            var linkToGallery = LibraryBrowser.shouldDisplayGallery(item);
+
+            html += '<div style="position:relative;">';
+            if (linkToGallery) {
+                html += "<a class='itemDetailGalleryLink' href='" + href + "'>";
+            }
+
+            if (detectRatio && item.PrimaryImageAspectRatio) {
+
+                if (Math.abs(item.PrimaryImageAspectRatio - 1.777777778) < .3) {
+                    shape = 'thumb';
+                } else if (Math.abs(item.PrimaryImageAspectRatio - 1) < .2) {
+                    shape = 'square';
+                }
+            }
+
+            var imgCssClass = 'itemDetailImage';
+            if (shape == 'thumb') {
+                imgCssClass += ' thumbDetailImage';
+            }
+            else if (shape == 'square') {
+                imgCssClass += ' squareDetailImage';
+            } else {
+                imgCssClass += ' portraitDetailImage';
+            }
+
+            html += "<img class='" + imgCssClass + "' src='" + url + "' />";
+
+            if (linkToGallery) {
+                html += "</a>";
+            }
+
+            var progressHtml = item.IsFolder ? '' : LibraryBrowser.getItemProgressBarHtml((item.Type == 'Recording' ? item : item.UserData));
+
+            if (progressHtml) {
+                html += '<div class="detailImageProgressContainer">';
+                html += progressHtml;
+                html += "</div>";
+            }
+
+            html += "</div>";
+
+            elem.html(html);
+
+            var page = $(elem).parents('.page');
+
+            var detailContentEffectedByImage = $('.detailContentEffectedByImage', page);
+
+            if (shape == 'thumb') {
+                detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
+
+                detailContentEffectedByImage.addClass('detailContentEffectedByThumbImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
+            }
+            else if (shape == 'square') {
+                detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
+                detailContentEffectedByImage.addClass('detailContentEffectedBySquareImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedByPortraitImage');
+
+            } else {
+                detailContentEffectedByImage.removeClass('detailContentEffectedByThumbImage');
+                detailContentEffectedByImage.removeClass('detailContentEffectedBySquareImage');
+                detailContentEffectedByImage.addClass('detailContentEffectedByPortraitImage');
+
+            }
+        },
+
         getMiscInfoHtml: function (item) {
 
             var miscInfo = [];

dashboard-ui/scripts/sync.js

@@ -27,7 +27,7 @@
             userId: userId,
             TargetId: target,
 
-            Quality: $('#selectQuality', form).val(),
+            Quality: $('#selectQuality', form).val() || null,
 
             Name: $('#txtSyncJobName', form).val(),
 
@@ -108,14 +108,16 @@
 
             html += '<br/>';
 
-            html += '<div>';
-            html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
-            html += '<select id="selectQuality" data-mini="true">';
-            html += '<option value="High">' + Globalize.translate('OptionHigh') + '</option>';
-            html += '<option value="Medium">' + Globalize.translate('OptionMedium') + '</option>';
-            html += '<option value="Low">' + Globalize.translate('OptionLow') + '</option>';
-            html += '</select>';
-            html += '</div>';
+            if (result.Options.indexOf('Quality') != -1) {
+                html += '<div>';
+                html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
+                html += '<select id="selectQuality" data-mini="true">';
+                html += '<option value="High">' + Globalize.translate('OptionHigh') + '</option>';
+                html += '<option value="Medium">' + Globalize.translate('OptionMedium') + '</option>';
+                html += '<option value="Low">' + Globalize.translate('OptionLow') + '</option>';
+                html += '</select>';
+                html += '</div>';
+            }
 
             //html += '<div data-role="collapsible" style="margin:1.5em 0">';
             //html += '<h2>' + Globalize.translate('HeaderSettings') + '</h2>';