update detail layout

dashboard-ui/css/librarybrowser.css

@@ -455,6 +455,20 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
         display: block;
     }
 
+.detailUserDataIcons {
+    display: block;
+    margin-top: 1em;
+}
+
+@media all and (min-width: 620px) {
+
+    .detailUserDataIcons {
+        display: inline-block;
+        margin-top: 0;
+        margin-left: 1em;
+    }
+}
+
 @media all and (max-width: 1200px) {
 
     .lnkSibling {
@@ -504,7 +518,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
 .primaryDetailsContainer {
     float: left;
     padding: .75em 0 0 1.5em;
-    width: 68%;
 }
 
 .parentName {
@@ -576,14 +589,14 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
-@media all and (min-width: 600px) {
+@media all and (min-width: 500px) {
 
     .mobileDetails {
         display: none;
     }
 }
 
-@media all and (max-width: 600px) {
+@media all and (max-width: 500px) {
 
     .desktopDetails {
         display: none;
@@ -849,7 +862,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 
     .detailImageContainer img {
-        max-width: 80px;
+        max-width: 120px;
     }
 
     .mobileOverview:not(.hide), .mobileGenres {
@@ -877,6 +890,28 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     }
 }
 
+@media all and (max-width: 600px) {
+
+    .detailImageContainer img {
+        max-width: 100px;
+    }
+
+    .thumbDetailImageContainer img {
+        max-width: 180px;
+    }
+}
+
+@media all and (max-width: 500px) {
+
+    .detailImageContainer img {
+        max-width: 80px;
+    }
+
+    .thumbDetailImageContainer img {
+        max-width: 180px;
+    }
+}
+
 @media all and (min-width: 750px) {
     .detailPageContent {
         max-width: 950px;
@@ -1592,23 +1627,6 @@ paper-icon-button.listviewMenuButton {
     }
 }
 
-.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 {

dashboard-ui/itemdetails.html

@@ -54,7 +54,7 @@
                         <paper-button raised class="subdued btnSync hide"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
                         <paper-button raised class="subdued btnShare notext hide"><iron-icon icon="share"></iron-icon></paper-button>
                         <paper-button raised class="subdued btnMoreCommands hide notext"><iron-icon icon="more-vert"></iron-icon></paper-button>
-                        <span class="userDataIcons" style="display:inline-block;margin-left:1em;"></span>
+                        <div class="detailUserDataIcons userDataIcons"></div>
                     </div>
                 </div>
             </div>
@@ -75,7 +75,7 @@
                 <paper-button raised class="subdued btnSync hide"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
                 <paper-button raised class="subdued btnShare notext hide"><iron-icon icon="share"></iron-icon></paper-button>
                 <paper-button raised class="subdued btnMoreCommands hide notext"><iron-icon icon="more-vert"></iron-icon></paper-button>
-                <div class="userDataIcons" style="margin-top:1em;"></div>
+                <div class="detailUserDataIcons userDataIcons"></div>
             </div>
         </div>
         <div data-role="content" style="padding-top:0;clear:both;">